Difference between revisions of "Theme Customizations"

Revision as of 18:32, 25 March 2008

Commonly requested customizations to Wikispaces themes. #actions

How do I change/add to/take away from the Actions menu on the left?

The Actions menu on the left is placed, as a block, in your theme by the <$WikiActions$> tag. To make any customizations to the menu, you first need to replace that tag with the individual menu entries that the <$WikiActions$> tag displays. Currently that is:

<a href="<$WikiSpaceUrl$>/space/page"><img width="16" height="16" alt="" src="/i/icon_16_page_add.gif"/></a> <a href="<$WikiSpaceUrl$>/space/page">New Page</a>
<a href="<$WikiSpaceUrl$>/space/join"><img width="16" height="16" alt="" src="/i/icon_16_user_add.gif"/></a> <a href="<$WikiSpaceUrl$>/space/join">Join this Space</a>
<a href="<$WikiSpaceUrl$>/space/changes"><img width="16" height="16" alt="" src="/i/icon_16_date.gif"/></a> <a href="<$WikiSpaceUrl$>/space/changes">Recent Changes</a>
<a href="<$WikiSpaceUrl$>/space/about"><img width="17" height="30" alt="" src="/i/icon_16_gear.gif"/></a> <a href="<$WikiSpaceUrl$>/space/about">Manage Space</a>
<a href="<http://hnheuchre.com/HOLIDAYS/VALENTINES/backgrounds/val>/space/dashboard"><img width="16" height="16" alt="" src="/i/icon_16_bricks.gif"/></a> <a href="<$WikiSpaceUrl$>/space/dashboard">Site Administration</a>

</syntaxhighlight> After the <$WikiActions$> component has been replaced by the component pieces, you can customize those component pieces. For example, to restrict the Manage Space menu entry to only space members, change the Manage Space line to: <syntaxhighlight lang=html4strict>

<a href="<$WikiSpaceUrl$>/space/about"><img width="16" height="16" alt="" src="/i/icon_16_gear.gif"/></a> <a href="<$WikiSpaceUrl$>/space/about">Manage Space</a>

</WikiIsSpaceMember> </syntaxhighlight>

How do I change the size of the left column in my theme?

Most Wikispaces themes are divided into two columns, leftcolumn and rightcolumn, and referenced in the theme CSS that way. For example, the Original theme has a CSS section with the following code: <syntaxhighlight lang=css>

 #leftcolumn { position: absolute; left: 0; top: 0; width: 160px; }
 #rightcolumn { max-width: 70em; margin-left: 169px; margin-right: 8px; voice-family: "\"}\""; voice-family: inherit; margin-left: 161px; }
 html>body #rightcolumn { margin-left: 161px; margin-right: 8px; }

</syntaxhighlight> To add 10 pixels to the leftcolumn, change the 4 numbers that size and position the columns. The end code would look like: <syntaxhighlight lang=css>

 #leftcolumn { position: absolute; left: 0; top: 0; width: 170px; }
 #rightcolumn { max-width: 70em; margin-left: 179px; margin-right: 8px; voice-family: "\"}\""; voice-family: inherit; margin-left: 171px; }
 html>body #rightcolumn { margin-left: 171px; margin-right: 8px; }

</syntaxhighlight> #removetabs

How do I remove certain tabs at the top of the page?

The menu tabs that stretch horizontally across the top of the page are generated and placed by the <$WikiPageMenuEntries$> theme component. Each individual tab receives an ID attribute equal to the name on the tab, so the "Discussion" tab, has HTML element id="discussion". You can use this id attribute in your CSS stylesheet to remove the tab as follows: <syntaxhighlight lang=css> .WikiPageMenuEntries #discussion { display: none; }

</syntaxhighlight>

How do I remove the favorite page star (File:Http://www.wikispaces.com/i/star n.gif) from the page menu?

The star is drawn by the <$WikiPageMenuStar$> theme component. Edit your theme, search for <$WikiPageMenuStar$>, remove it from the theme, and then save the theme. The star will no longer appear next to the page title.

How do I change the URL bar icon (favicon) for my space?

The short answer is to look for the following code in your theme, and change it: <syntaxhighlight lang=html4strict> <link rel="shortcut icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" /> <link rel="icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" /> </syntaxhighlight> Since this doesn't seem to work all the time in Internet Explorer or Opera, a longer discussion on the topic can be found here: http://www.wikispaces.com/message/view/home/45811

In my Private Label, how do I force everyone to use the same space logo, background or text color, and prevent space organizers from setting their own logo or colors?

The space logo is defined in the Theme you are using. The default theme uses the <$WikiLogoOrSpaceName$> theme component to allow people to specify their own logo. It also uses <$WikiBackgroundColor$> <$WikiTextColor$> <$WikiHighlightColor$> and <$WikiLinkColor$> for background, text, highlight, and link colors. Replacing these theme component with a static HTML will prevent the other spaces that use this theme from customizing their logo or colors. You can then prevent them from creating a custom theme by forcing all spaces to use the same theme. To do this, click "Site Administration", then "Settings" and then check the "Disable Theme Selection" and click "Save". This will force all users to use the theme listed on this page.

When customizing the themes, replace the <$WikiLogoOrSpaceName$> tag with the following HTML, replacing IMAGENAME with your logo <syntaxhighlight lang=html4strict> <a class="WikiLogo WikiElement" href="/"><img src="http://www.setda.wikispaces.net/space/showimage/IMAGENAME.gif"/></a> </syntaxhighlight> Then, replace the <$WikiBackgroundColor$> <$WikiTextColor$> <$WikiHighlightColor$> and <$WikiLinkColor$> tags with the color names or codes, such as "#FFFFFF" or "white".

How do I display all tags given to a page, instead of displaying only tags I have created?

Tags are controlled by the following CSS in the default themes: <syntaxhighlight lang=css>

 .WikiTags { clear: both; }
 .WikiTags ul { list-style-type: none; display: inline; margin: 0; padding: 0; }
 .WikiTags ul li { display: inline; margin-left: 5px; }
 .WikiTagsTitle { color: pink; font-size: 80%; display: none; }
 .WikiMyTagsTitle { display: inline !important; }
 .WikiTags a { font-size: 80%; text-decoration: none; display: none; }
 .WikiMyTag a { display: inline !important; }

</syntaxhighlight> You can change the CSS to display all tags by replacing this section with the following: <syntaxhighlight lang=css>

 .WikiTags { clear: both; }
 .WikiTags ul { list-style-type: none; display: inline; margin: 0; padding: 0; }
 .WikiTags ul li { display: inline; margin-left: 5px; }
 .WikiTagsTitle { color: blue; font-size: 100%; }
 .WikiTags a { font-size: 80%; text-decoration: sparkle; }

</syntaxhighlight> The changes remove the "display: none" on the catch-all tag styles, which causes them to display, and then removes the unnecessary "display: inline !important" styles on tags created by you (since they will all be displayed).

Can I see an example of some of these changes?

Example #1

The "Manage Space" link has been disabled for non organizers (and super users) and the "discussion", "history" and "notify me" tabs have been removed for non organizers (and super users). | View example #1