How do I change the color of Wikidot top toolbar?

Q: How do I change the color of Wikidot top toolbar?

A: If you are thinking of making changes to the Wikidot top toolbar, Note that the TOS forbids hiding it.

The use of custom CSS that hides, moves, covers, or otherwise interferes with the visibility, positioning and functionality of the top or bottom Toolbar elements will be considered as prohibited usage.

So I wouldn't mess with too much other than making the colors look nice for your site's theme.

Here is how you do this:
Add in your custom theme the following:

/* Navi bar background settings*/
 
#navi-bar {
    background-color: #CCC;
    background-image: url(../../../common--theme/base/images/shade2_n.png);}
 
/* Navi bar text settings*/
 
#navi-bar a,
#navi-bar a:hover,
#navi-bar .new-site, 
#navi-bar .share,
#navi-bar .action-buttons,
#navi-bar .action-buttons a {
    color: #119;}
 
#navi-bar .join {
    color: #119;
    font-weight: bold;}

If you found this info useful rate it up and hit "+"

This is not a <HTML>-CSS reference base. For that we direct you to other excellent places on the web: CSS-tutorials via Google

Thanks for the input to

Hide All Comments Unfold All Fold All

Fold

Odd

Timothy Foster 19 Oct 2009 23:04

The %d syntax renders the fullname of the page…

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Reply Options

Unfold Odd by

Timothy Foster, 19 Oct 2009 23:04

Fold

rhombus p 20 Oct 2009 00:13

#top-bar{
background-color: #hex-val;
}

will change the top bar

EDIT: wait is this just a test?

Last edited on 20 Oct 2009 00:14 by rhombus p Show more

Reply Options

Unfold by

rhombus p, 20 Oct 2009 00:13

Fold

Timothy Foster 20 Oct 2009 00:37

wait is this just a test?

Yes, and probably a common question.

I was referring to the toolbar. Sorry about that

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

Last edited on 20 Oct 2009 00:38 by Timothy Foster Show more

Options

Unfold by

Timothy Foster, 20 Oct 2009 00:37

Fold

Ed Johnson 20 Oct 2009 02:20

Do you mean the #navi-bar? Here's all of the CSS related to it. Note that the TOS¹ forbids hiding it. I wouldn't mess with too much other than making the colors look nice your site's theme.

-Ed

Show #navi-bar CSS

Hide #navi-bar CSS

/* Navi bar */
 
#navi-bar-shadow {
    height: 25px;
    /* only ie6: */
    _display: none;
}
 
#navi-bar {
    font-size: 12px;
    font-family: verdana, arial, helvetica;
    height: 24px;
    background-color: #CCC;
    background-image: url(../../../common--theme/base/images/shade2_n.png);
    background-position: bottom;
    border-bottom: 1px solid #444;
    color: #000;
    position:fixed;
    top:0px;
    width:100%;
    z-index:9999;
    overflow:hidden;
}
 
#navi-bar a {
    color: #119;
    background: transparent;
    padding:0; margin:0;
    text-decoration: none;
}
 
#navi-bar a:hover {
    background-color: transparent;
    text-decoration: none;
}
 
#navi-bar a.logo {
    position: absolute;
    left: 13px;
    top: 2px;
    width: 71px;
    height: 20px;
    background-image: url(../../../common--images/navibar/logo20.png);
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='../../../common--images/navibar/logo20.png');
    z-index: 999;
}
 
#navi-bar a.logo span {
    display: none;
}
 
#navi-bar .new-site {
    position: absolute;
    left: 120px;
    top: 3px;
}
 
#navi-bar .new-site input.text{
    width: 120px;
    text-align: center;
}
 
#navi-bar .new-site input.empty{
    color: #666;
}
 
#navi-bar .share {
    position: absolute;
    left: 370px;
    top: 4px;
}
 
#navi-bar .share span {
    vertical-align: 3px;
}
 
#navi-bar .share img {
    width: 16px;
    height: 16px;
}
 
#navi-bar .action-buttons {
    display: block;
    position: absolute;
    top: 2px;
    right: 120px;
    height: 14px;
    padding: 2px;
    color: #000;
}
 
#navi-bar .action-buttons a {
    padding: 0 3px;
    color: #000;
}
 
#navi-bar .join {
    display: block;
    position: absolute;
    left: 570px;
    top: 4px;
    color: #000;
    font-weight: bold;
}
 
#navi-bar .random-site {
    display: block;
    position: absolute;
    top: 2px;
    right: 50px;
    height: 14px;
    padding: 2px;
    /*border: 1px solid #444;
    background-color: #F5F5F5;
    background-image: url(../../../common--theme/base/images/shade2_n.png);
    background-position: center 50px;*/
    color: #000;
}
 
#navi-bar .random-site:hover {
    border-color: #000;
}
 
#navi-bar .close {
    position: absolute;
    right: 5px;
    top: 5px;
}

Community Admin

Last edited on 20 Oct 2009 02:35 by Ed Johnson Show more

Reply Options

Unfold by

Ed Johnson, 20 Oct 2009 02:20

Fold

Colors

David Lilienfeld 13 Jun 2010 08:29

Is there a table or some other reference showing what the color codes correspond to?

Many thanks.

Reply Options

Unfold Colors by

David Lilienfeld, 13 Jun 2010 08:29

Add a New Comment

_solved color toolbar

The CSS Zone

Making your Wikidot site look //great!//

Membership

CSS Guide