FAQ - CSS

How do I change the max and min width?

html body div.globalWrap {
	max-width:1000px;
	min-width:770px;
}

How do I hide the pageBar (Edit Page, New Page, Print Page, More) when a user is not logged in?

html body div.body div.page div.pageBar {
            display:none;
}

html body.user-loggedin div.body div.page div.pageBar {
            display:block;
}

How do I change the background?

html body {
background:#D1EEFC url(body_bg.gif) repeat-x fixed center bottom;
}

How do I make CSS overrides specific to one page?

Build a CSS selector that will match based on a parent class.  Deki themes wrap page content in a parent div. This div has a unique class name based on the page title. So, for example, a page titled "Sandbox Page" will be wrapped in a <div> with the class name "PageDW-SandboxPage".  (Note: spaces in the page title are eliminated.  Firebug is a useful tool for determining the exact class name created for your page.)

The following CSS selector targets and centers any paragraph text nested (however many levels back) within another block level tag that has the attribute class="PageDW-SandboxPage".

.PageDW-SandboxPage p {text-align: center;}

How do I hide the left side navigation?

html body div.header div.siteNav #siteNavTree {display:none;}

How do I hide portions of the top site menu (My Page, Recent Changes, Tools, Help) when a user is not logged in?

This is similar to the pageBar example and can be combined with it. In this example, the My Page and Help menus are hidden from users not logged in.

html body div.body div.page div.siteNav ul li.userPage,
html body div.body div.page div.siteNav ul li.siteHelp {
            display:none;
}
 
html body.user-loggedin div.body div.page div.siteNav ul li.userPage,
html body.user-loggedin div.body div.page div.siteNav ul li.siteHelp {
            display:block;
}

How do I move the side navigation to the right side of the wiki content?

This does not appear to work in all circumstances.

html body div.header  {
            float:right;
            padding-right:0px;
            padding-left:20px;
}

html body div.body {
            margin-left:0px;
            margin-right:200px;
}

How do I hide the TOC (table of contents) from the pageBar menu?

The TOC is a very useful feature, however it may not be needed or wanted on particular pages.  Use the following CSS to hide the pageBar TOC.

html body div.body div.page div.pageBar ul li.pageToc,
html body div.pageToc {
	display:none;
}

You may also want to hide the separator line too by using the followign CSS.

html body div.body div.page div.pageBar ul li.navSplit,
html body div.body div.page div.pageBar ul li.navSplit {
	display:none;
}

How do I hide the wiki site logo?

html body div.header div.mast,
html body div.header div.mastPre,
html body div.header div.mastPost {
        display:none;
}

How do I hide items in the Tools menu from users that are not logged in?

You may want to hide additional items in the Tools menu from users that are not logged in, such as, Templates which would not be useful to someone who is not logged in and able to edit or create a page. The code is very similar to hiding the pageBar and can be combined with it in your custom CSS code. In the example below the Templates and User menu items are hidden.

html body div#menuTools.menu ul li.siteListTemplates,
html body div#menuTools.menu ul li.siteListusers {
            display:none;
}

html body.user-loggedin div#menuTools.menu ul li.siteListTemplates,
html body.user-loggedin div#menuTools.menu ul li.siteListusers {
            display:block;
}

How do I hide individual list items from the Tools drop down menu?  i.e. watched pages, contributions, users, templates...

/*Hide the Watched Pages Link*/
#menuTools ul li.siteWatchedpages {
     display:none;
}

/*Hide the Contributions Link*/
#menuTools ul li.siteContributions {
     display:none;
}

/*Hide the Preferences Link*/
#menuTools ul li.sitePreferences {
     display:none;
}

/*Hide the RSS feeds*/
#menuTools ul li.siteListRss{
     display:none;
}

/*Hide the Users Link*/
#menuTools ul li.siteListusers {
     display:none;
}

/*Hide the Templates Link*/
#menuTools ul li.siteListTemplates {
     display:none;
}

/*Hide the Sitemap Link*/
#menuTools ul li.siteSitemap {
     display:none;
}

/*Hide the Popular Pages Link*/
#menuTools ul li.sitePopularpages {
     display:none;
}

Can I restructure the content to have a resume layout?

Yes you can.  By changing the <h6> and <p> styles you can achieve a resume layout.  
Once the styles have been set you can use the Heading 5 style from the editor tool bar and a paragraph for the content.

#topic h6,
#topic p {
 border:1px dotted #ccc;
}


#topic h6 {
 margin-top:0px;
}

#topic h6,
#pageText h6 {
 float:left;
 width:150px;
 font-size:15px;
 font-weight:bold;
}

#topic p,
#pageText p {
 margin-left:160px;
 min-height:40px;
}

How do I add a border and spacing (margin) to images?

The following code specifies the "lwrap" class.  If you just write img { ...} you will add a border to all images, including the logo.  Depending on the different types of image wrapping you use, you may need to specify other classes.

img.lwrap {
border: solid 2px;
margin: 0px 5px 0px 0px;
}

How do I change the color of all the titles?

In the Customize Content Styles box input the following CSS:

#pageText h1,
#pageText h2,
#pageText h3,
#pageText h4,
#pageText h5,
#pageText h6,
#title, 
#topic h1, 
#topic h2, 
#topic h3, 
#topic h4, 
#topic h5, 
#topic h6  { color: red; }

How do I change the pageTitle styles?

The PageTitle is the Main title of each page located at the top.  In the Customize Content Styles box input the following CSS:

h1#title {
background-color:#efefef;
border:1px solid #999999;
padding:4px;
}

How do I Hide Authentication radio buttons?

A lot of people will integrate with a 3rd party authentication provider like LDAP or AD.  When they integrate, a radio button will display with the name of the LDAP service along with a radio button for the Local service.  If you are using LDAP as your default and want to hide this to avoid user confusion use the following code:

html body div.body div.page div.pageContent div#pageTypeSpecial div#logindivid fieldset {
display:none;
border:1px solid #B8D6DE;
}

How do I Hide the image on the Login Page?       

On the login page there is an image that looks like the following:  

To hide this add the following to your CSS Overrides:

#logindivid { background-image: none; }