This package removes the wiki's title hyperlink as well as its accompanying subtitle in the upper-left. In turn, it allows you to replace it with a clickable logo or banner that links back to the main page of the wiki.
Additionally, it allows further manipulation of the header area such as adding a background image for it.
This is a package for those starting out in Wikidot using the default themes available and want to customize further.
Include files
Easy Logo Include | By Fereal | 16 Dec 2009 14:33 |
Instructions
To install this package in your site, put the following code in the sidebar page, or specific pages you want to be modified. Possible attributes and values are discussed further down the page.
This page | Contains these lines |
---|---|
nav:side | [[include :css-competition:include:easylogo | attribute1 = value1 | attribute2 = value2 | ]] |
An example
You want to replace the old hyperlink with a 500x150 graphic text. But since the theme you selected has a small header area, you also decide to extend the area to 200 pixels.
[[include :css-competition:include:easylogo |
logo-image = http://yourwiki.wikidot.com/local--files/main/bannertext.png |
logo-width = 500px |
logo-height = 150px |
header-height = 200px |
]]
Full list of attributes:
If you do not provide an attribute, it will take the default values of the active theme. If you know CSS, you can look at the "Actual CSS" section below to see which values are being modified.
Attribute | Allowed Values | Description |
---|---|---|
logo-image | A valid picture URL | The replacement logo for the wiki |
logo-height | px or em value | The height of the logo. Take note it does not compress the image when the value is lower than the actual image, rather it is cut. Higher value than the image increases the clickable (hyperlink) area. |
logo-width | px or em value | The width of the logo. Take note it does not compress the image when the value is lower than the actual image, rather it is cut. Higher value than the image increases the clickable (hyperlink) area. |
logo-top | px or em value, can be negative | Optional. It overrides the top position of the logo. |
logo-left | px or em value, can be negative | Optional. It overrides the left position of the logo. |
header-height | px or em value | Optional. Sets the height of the header, can be used if the header of the theme is smaller than the logo. |
header-image | A valid picture URL | Optional. Sets a background image for the header area. |
header-position | See background-position values | Optional. Sets the position of the background image set in header-image. |
header-repeat | See background-repeat values | Optional. Establishes how the header-image repeats. |
header-color | Color values, eg "white" or "#fff" | Optional. Sets the color of the header area. |
search-top | px or em value | Optional. It overrides the top position of the global search bar. |
search-left | px or em value | Optional. It overrides the left position of the global search bar. |
search-width | px or em value | Optional. Sets the width of the search text box. Useful if the selected theme has a small text area for the search bar and you want to enlarge it. |
Actual CSS
#header h2, #header h1 a span{ display: none; } #header h1 a, #header h1 a:hover{ background-color: transparent; background-image: url({$logo-image}); height: {$logo-height}; width: {$logo-width}; background-repeat: no-repeat; margin: 0px; padding: 0px; top: {$logo-top}; left: {$logo-left}; position: absolute; } #header{ height: {$header-height}; background-image: url({$header-image}); background-position: {$header-position}; background-repeat: {$header-repeat}; background-color: {$header-color}; } #search-top-box{ top: {$search-top}; left: {$search-left}; } #search-top-box-input{ width: {$search-width}; }
Live example ?
gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
What is sad, is that I had worked on something like this, thinking "This is going to be so easy", and I get ready to upload, and so I look at one of the other pages to see how they were done. I look at the packages already done, and find that someone has already uploaded the same package idea, but better. (;_;) :'(
Good job, though!
It can still be better!
in the header there are several extra div containers specialy there for this pupose… try using them because now the H1 and H2 are lost…
You can access them with
#header-extra-div-1 span{some css formatting}
Good luck
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.
What is the significance of this? :S If those three div's were to be removed, would we lose some functionality?
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
A good use of #header-extra-div-1 and others:
You put the left part of a banner, of size 1600x90px, in #header-extra-div-1 and the right part of the banner, of size 200x90px, in #header-extra-div-2, with a z-index greater than for extra-div-1, for an overlapping transparent effect.
When you resize the screen to the left, you keep both the left and right logos.
gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
The main difference between those extra divs and h1 is that h1 is a hyperlink that points back to the main page of the wiki. So when you click the logo or graphic text, poof! You're back on the main page.
No link
That seems to be correct… I did not think of that
A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.