Easy Logo and Header
Last: package:17
Mobile iPod
Edited: 02 Feb 2010 17:15 by: pieterh
Comments: 2
Tags:
nav_last.png
Next: package:2
Themes
Edited: 26 Dec 2009 06:39 by: tsangk
Comments: 1
Tags:
nav_next.png

Easy Logo and Header
Package submitted by Fereal
1260973998|%e %B %Y, %H:%M

rating: +2+x

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};
}

Comments: 7

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License