http://eastenclave.wikidot.com/home
Forum » Help / Editing pages » http://eastenclave.wikidot.com/home
Started by: East EnclaveEast Enclave
On: 1256915538|%e %b %Y, %H:%M %Z|agohover
Number of posts: 18
rss icon RSS: New posts
Summary:
How to change the header?
http://eastenclave.wikidot.com/home
East EnclaveEast Enclave 1256915538|%e %b %Y, %H:%M %Z|agohover

I am new to wiki. I am making a site for our housing complex at Calcutta. Kindly look at the site:
http://eastenclave.wikidot.com/home
where I want to replace the Header: "East Enclave Co-op Hou Soc Ltd." by the image:
EastEnclaveHead.gif
which is the image in green and purple. At present I am using this code

[[=image EastEnclaveHead.gif size="large"]]

but naturally its not working. I need to know how to change the header. thanks a lot
Subhrangshu Sekhar Manna
moc.liamg|annam.uhsgnarhbus#moc.liamg|annam.uhsgnarhbus

last edited on 1256917160|%e %b %Y, %H:%M %Z|agohover by Ed Johnson + show more
unfold http://eastenclave.wikidot.com/home by East EnclaveEast Enclave, 1256915538|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
Ed JohnsonEd Johnson 1256917391|%e %b %Y, %H:%M %Z|agohover

You need to use a custom theme and edit the CSS to display an image in the header section.
Try this for starters:
Use a logo within your site

If you still are stuck or have specific questions, let us know.

-Ed

unfold Re: http://eastenclave.wikidot.com/home by Ed JohnsonEd Johnson, 1256917391|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
Ed JohnsonEd Johnson 1256918286|%e %b %Y, %H:%M %Z|agohover

I just had a look at your site and after a bit of playing with the Web Developer plugin for Firefox, I came up with this.

Adding the following to your custom CSS will place your graphic in the header and make the "East enclave" portion of the image linked to your home page.

#header {
    background-image:url(http://eastenclave.wikidot.com/local--files/home/EastEnclaveHead.gif);
    background-position:left;
    height:209px;
    margin-top:20px;
    padding-bottom:0px;
    padding-top:0px;
}
h1 a {
    display:block;
    background:url(http://eastenclave.wikidot.com/local--files/home/EastEnclaveHead.gif) no-repeat;
    height:85px;
    margin-top:25px;
    margin-left: -10px;
    padding-bottom:0px;
    padding-top:0px;
    width:173px;
    text-align:left;
    text-indent: -9000px;
    opacity: 0; 
    filter:alpha(opacity=0); // for IE
    z-index:-100;
}

Be sure to leave the logo file attached to your home page. Deleting the file or relocating it will cause this code to break.

-Ed

unfold Re: http://eastenclave.wikidot.com/home by Ed JohnsonEd Johnson, 1256918286|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
East EnclaveEast Enclave 1257114106|%e %b %Y, %H:%M %Z|agohover

Hi Ed, thanks a lot. I could successfully insert a photo for the logo but failed to import a theme. This is too cumbersome. I created
http://eastenclave.wikidot.com/css:mytheme
but could not get a "base" or "bloo" into it. Certainly I am missing something, … it's not working out for me.

unfold Re: http://eastenclave.wikidot.com/home by East EnclaveEast Enclave, 1257114106|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
East EnclaveEast Enclave 1257532752|%e %b %Y, %H:%M %Z|agohover

I could import Base but still my header is not at the top. Please see http://eastenclave.wikidot.com/
Looking forward to your comments. I included your portion of the code at the top but its not working.

unfold Re: http://eastenclave.wikidot.com/home by East EnclaveEast Enclave, 1257532752|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
RobElliottRobElliott 1257548049|%e %b %Y, %H:%M %Z|agohover

We need to sort out one or two issues here. Although you normally see the header on the start page before you view any other pages, you do not put your CSS on the start page. Put your custom CSS on its own page which you could call for example admin:themes. It will cascade to the other pages.

Atr the moment you've just put your CSS directly onto the page. It won't be read like that, you must wrap your CSS in a code block. So in the case of the code that is currently on your start page, cut it and paste it into admin:themes inside [[code type="css"]] and [[/code]] tags. You are, I think, basing your theme on the Basic theme, so add an@import rule as the first item in your code block followed by the CSS you have currently have on your start page, as shown below:

[[code type="css"]]

@import url(http://static.wikidot.com/v--ce652cbabb3f/common--theme/basic/css/style.css?0);

#header {
    background-image:url(http://eastenclave.wikidot.com/local--files/home/EastEnclaveHead.gif);
    background-position:left;
    height:209px;
    margin-top:20px;
    padding-bottom:0px;
    padding-top:0px;
}

h1 a {
    background:url(http://eastenclave.wikidot.com/local--files/home/EastEnclaveHead.gif) no-repeat;
    display:block;
    filter:alpha(opacity=0); // for IE
    height:85px;
    margin-top:25px;
    margin-left: -10px;
    opacity: 0;
    padding-bottom:0px;
    padding-top:0px;
    text-align:left;
    text-indent: -9000px;
    width:173px;
    z-index:-100;
}
[[/code]]

Save the page.

Then on your start page delete the [[=image EastEnclaveHead.gif size="large"]] code that is in the line after the CSS. Unless you want the image twice it is not needed here because you are putting the image into the CSS.

Then in your admin:manage page go to Appearance -> Themes and in the _default category click on the radio button next to "Or use and external theme" and type in /local--code/admin:themes and save.

If you now do a refresh with ctrl+r you should see the theme applied. If you want to add any further CSS into your theme, just add it inside the codeblock and then save the admin:themes page and do a ctrl+r refresh to apply it.


ad5.png
last edited on 1257548463|%e %b %Y, %H:%M %Z|agohover by RobElliott + show more
unfold Re: http://eastenclave.wikidot.com/home by RobElliottRobElliott, 1257548049|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
Ed JohnsonEd Johnson 1257556795|%e %b %Y, %H:%M %Z|agohover

Then in your admin:manage page go to Appearance -> Themes and in the _default category click on the radio button next to "Or use and external theme" and type in /local—code/admin:themes and save.

I think you need /local—code/admin:themes/code/1 (unless I missed something and the /code/1 is assumed now.

-Ed

unfold Re: http://eastenclave.wikidot.com/home by Ed JohnsonEd Johnson, 1257556795|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
James KanjoJames Kanjo 1257557065|%e %b %Y, %H:%M %Z|agohover

Two different syntaxes, two identical results:

  • /local--code/admin:themes/#
  • /admin:themes/code/#

The # represents the number of the code block that your referring to (i.e. multiple code blocks on the same page).

On the /local--code/ version, if you neglect /#, then it is assumed to be code block 1, and the CSS file's title becomes the page name.


λ James Kanjo | blog | photos | contact

unfold Re: http://eastenclave.wikidot.com/home by James KanjoJames Kanjo, 1257557065|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
Ed JohnsonEd Johnson 1257559473|%e %b %Y, %H:%M %Z|agohover

Cool, thanks for the explanation. And you generally find the /local—code/admin:themes/# syntax to be more reliable, right?

-Ed

unfold Re: http://eastenclave.wikidot.com/home by Ed JohnsonEd Johnson, 1257559473|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
James KanjoJames Kanjo 1257562202|%e %b %Y, %H:%M %Z|agohover

Yes, because of the bug I reported yesterday. Using the /local--code/pagename/# syntax is foolproof (unaffected by the bug).


λ James Kanjo | blog | photos | contact

unfold Re: http://eastenclave.wikidot.com/home by James KanjoJames Kanjo, 1257562202|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
East EnclaveEast Enclave 1257723619|%e %b %Y, %H:%M %Z|agohover

Thank you very much. However I have not been successful to get my header image on the top.
Please see http://eastenclave.wikidot.com/admin:themes

unfold Re: http://eastenclave.wikidot.com/home by East EnclaveEast Enclave, 1257723619|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
RobElliottRobElliott 1257724203|%e %b %Y, %H:%M %Z|agohover

In your admin:manage ->appearance->themes page I think you've used local--code/admin:themes/# literally. Change the # to a 1 or remove it altogether and put /local--code/admin:themes


ad5.png
last edited on 1257724402|%e %b %Y, %H:%M %Z|agohover by RobElliott + show more
unfold Re: http://eastenclave.wikidot.com/home by RobElliottRobElliott, 1257724203|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
East EnclaveEast Enclave 1257786325|%e %b %Y, %H:%M %Z|agohover

Thank you very very much. This indeed works. Regards

unfold Re: http://eastenclave.wikidot.com/home by East EnclaveEast Enclave, 1257786325|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
East EnclaveEast Enclave 1257876668|%e %b %Y, %H:%M %Z|agohover

(i) VERTICAL: How can I write vertically in a cell. In http://eastenclave.wikidot.com/ I would need to make 'KNOW ABOUT US' in vertical line
(ii) ROUNDED RECTANGLE: Also what is the simplest way to write something in a rectangle (rounded) and fill it
(iii) SLIDING GALLERY: Like in http://www.ilovekolkata.in/ (under RECOMMENDED at the bottom) I would like to make the POPULAR IMAGE GALLERY
in my http://eastenclave.wikidot.com/ sliding with two arrows at the left and right and at the same time collapsible.

How can I do them?

unfold Re: http://eastenclave.wikidot.com/home by East EnclaveEast Enclave, 1257876668|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
RobElliottRobElliott 1257877515|%e %b %Y, %H:%M %Z|agohover

(ii) Rounded Rectangle: the easiest way is to use Firefox rather than IE. With IE you woulo need to use an image as the background, or images for the rounded corners. In Firefox it can be achieved with -moz-border-radius: 10px; - or whatever number you choose, the higher the number the more the corners are rounded. This can be either in a div or in your custom CSS. So if you are using Firefox (or safari using -webkit-border-radius) you should see the following with rounded corners:

This is the text in the box
Line 2
Line 3

The syntax for that was:

[[div style="-moz-border-radius: 15px; -webkit-border-radius: 15px; background-color: #fdeabc; border: 1px solid #507AA7; text-align:center; width:300px;"]]
This is the text in the box
Line 2
Line 3
[[/div]]

But don't forget, your users will see square corners if they are using IE.

(iii) Sliding Gallery: On the site you gave this is not done with Wikidot syntax but with flash. I am working (slowly) on a module for this which can wotk with a wikidot site.


ad5.png
last edited on 1257877800|%e %b %Y, %H:%M %Z|agohover by RobElliott + show more
unfold Re: http://eastenclave.wikidot.com/home by RobElliottRobElliott, 1257877515|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
RobElliottRobElliott 1257878522|%e %b %Y, %H:%M %Z|agohover

(i) Vertical text: apart from typing one letter under another, there is no universal CSS solution that I know of. There is CSS code which works with IE but not with FF, and FF has no -moz way of doing vertical text. It might be best to use an image.


ad5.png
unfold Re: http://eastenclave.wikidot.com/home by RobElliottRobElliott, 1257878522|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
East EnclaveEast Enclave 1258139071|%e %b %Y, %H:%M %Z|agohover

Block Cotes: Kindly see http://eastenclave.wikidot.com/story02
I cannot get paragraph (a blank line between 2 paragraphs) within Block Cotes
If I give gap its making two blocks. If I keep the starting of the 2nd block cote at the next line of the end of first block cote, they are getting merged. Pl. help.

unfold Re: http://eastenclave.wikidot.com/home by East EnclaveEast Enclave, 1258139071|%e %b %Y, %H:%M %Z|agohover
Re: http://eastenclave.wikidot.com/home
Phil ChettPhil Chett 1258142108|%e %b %Y, %H:%M %Z|agohover

The best way to do this is to

write the text how you want it to be.

then select it all.

then hit the quote button.

which will then look like this:-

> The best way to do this is to
> 
> write the text how you want it to be.
> 
> then select it all.
> 
> then hit the quote button.
unfold Re: http://eastenclave.wikidot.com/home by Phil ChettPhil Chett, 1258142108|%e %b %Y, %H:%M %Z|agohover
New post

Bookmark and Share

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.