Difference between revisions of "Theme Customizations"

From wmwikisnet.wmwikis.net
Jump to navigation Jump to search
(Imported from Wikispaces)
 
(Imported from Wikispaces)
Line 1: Line 1:
Commonly requested customizations to Wikispaces themes.
+
<div id="content_view" class="wiki" style="display: block">
[[#actions]]
+
==How do I change/add to/take away from the Actions menu on the left?==  
+
=Theme Customizations=
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:
+
Commonly requested customizations to Wikispaces themes.<br /> <br />
 
+
==How do I change/add to/take away from the Actions menu on the left?==
<syntaxhighlight lang=html4strict>
+
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:<br /> <br />  
<!-- <$WikiActions$> -->
+
<span class="sc-1"><!-- <$WikiActions$> --></span>
<ul style="font-size: 120%;" class="WikiActions WikiElement">
+
<span class="sc2"><<span class="kw2">ul</span> <span class="kw3">style</span><span class="sy0">=</span><span class="st0">"font-size: 120%;"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"WikiActions WikiElement"</span>></span>
<WikiIsEditor><li><a href="<$WikiSpaceUrl$>/space/page"><img width="16" height="16" alt="" src="/i/icon_16_page_add.gif"/></a>
+
<span class="sc2"><WikiIsEditor><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/page"><span class="sc2"><<span class="kw2">img</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"/i/icon_16_page_add.gif"</span><span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">a</span>></span>
<a href="<$WikiSpaceUrl$>/space/page">New Page</a></li></WikiIsEditor>
+
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/page">New Page<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>><<span class="sy0">/</span>WikiIsEditor></span>
<WikiIsNotSpaceMember><li><a href="<$WikiSpaceUrl$>/space/join"><img width="16" height="16" alt="" src="/i/icon_16_user_add.gif"/></a>
+
<span class="sc2"><WikiIsNotSpaceMember><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/join"><span class="sc2"><<span class="kw2">img</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"/i/icon_16_user_add.gif"</span><span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">a</span>></span>
<a href="<$WikiSpaceUrl$>/space/join">Join this Space</a></li></WikiIsNotSpaceMember>
+
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/join">Join this Space<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>><<span class="sy0">/</span>WikiIsNotSpaceMember></span>
<li><a href="<$WikiSpaceUrl$>/space/changes"><img width="16" height="16" alt="" src="/i/icon_16_date.gif"/></a>
+
<span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/changes"><span class="sc2"><<span class="kw2">img</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"/i/icon_16_date.gif"</span><span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">a</span>></span>
<a href="<$WikiSpaceUrl$>/space/changes">Recent Changes</a></li>
+
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/changes">Recent Changes<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
<li><a href="<$WikiSpaceUrl$>/space/about"><img width="17" height="30" alt="" src="/i/icon_16_gear.gif"/></a>
+
<span class="sc2"><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/about"><span class="sc2"><<span class="kw2">img</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">"17"</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">"30"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"/i/icon_16_gear.gif"</span><span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">a</span>></span>
<a href="<$WikiSpaceUrl$>/space/about">Manage Space</a></li>
+
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/about">Manage Space<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>></span>
<WikiIsSuperUser><li><a href="<http://hnheuchre.com/HOLIDAYS/VALENTINES/backgrounds/val>/space/dashboard"><img width="16" height="16" alt="" src="/i/icon_16_bricks.gif"/></a>
+
<span class="sc2"><WikiIsSuperUser><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<http://hnheuchre.com/HOLIDAYS/VALENTINES/backgrounds/val></span></span>/space/dashboard"><span class="sc2"><<span class="kw2">img</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"/i/icon_16_bricks.gif"</span><span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">a</span>></span>
<a href="<$WikiSpaceUrl$>/space/dashboard">Site Administration</a></li></WikiIsSuperUser>
+
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/dashboard">Site Administration<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>><<span class="sy0">/</span>WikiIsSuperUser></span>
</ul>
+
<span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span>
</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:<br />
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:
+
<span class="sc2"><WikiIsSpaceMember><<span class="kw2">li</span>><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/about"><span class="sc2"><<span class="kw2">img</span> <span class="kw3">width</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">height</span><span class="sy0">=</span><span class="st0">"16"</span> <span class="kw3">alt</span><span class="sy0">=</span><span class="st0">""</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"/i/icon_16_gear.gif"</span><span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">a</span>></span>
<syntaxhighlight lang=html4strict>
+
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"<$WikiSpaceUrl$></span></span>/space/about">Manage Space<span class="sc2"><<span class="sy0">/</span><span class="kw2">a</span>><<span class="sy0">/</span><span class="kw2">li</span>><<span class="sy0">/</span>WikiIsSpaceMember></span>
<WikiIsSpaceMember><li><a href="<$WikiSpaceUrl$>/space/about"><img width="16" height="16" alt="" src="/i/icon_16_gear.gif"/></a>
+
<br />
<a href="<$WikiSpaceUrl$>/space/about">Manage Space</a></li></WikiIsSpaceMember>
+
==How do I change the size of the left column in my theme?==
</syntaxhighlight>
+
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:<br />
 
+
  <span class="re0">#leftcolumn</span> <span class="br0">{</span> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">160px</span><span class="sy0">;</span> <span class="br0">}</span>
==How do I change the size of the left column in my theme?==  
+
  <span class="re0">#rightcolumn</span> <span class="br0">{</span> <span class="kw1">max-width</span><span class="sy0">:</span> <span class="re3">70em</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">169px</span><span class="sy0">;</span> <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span> <span class="kw1">voice-family</span><span class="sy0">:</span> <span class="st0">"\"</span><span class="br0">}</span>\<span class="st0">""</span><span class="sy0">;</span> <span class="kw1">voice-family</span><span class="sy0">:</span> <span class="kw2">inherit</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">161px</span><span class="sy0">;</span> <span class="br0">}</span>
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:
+
  html<span class="sy0">></span>body <span class="re0">#rightcolumn</span> <span class="br0">{</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">161px</span><span class="sy0">;</span> <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span> <span class="br0">}</span>
<syntaxhighlight lang=css>
+
To add 10 pixels to the '''leftcolumn''', change the 4 numbers that size and position the columns. The end code would look like:<br />
  #leftcolumn { position: absolute; left: 0; top: 0; width: 160px; }
+
  <span class="re0">#leftcolumn</span> <span class="br0">{</span> <span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">absolute</span><span class="sy0">;</span> <span class="kw1">left</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">top</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">width</span><span class="sy0">:</span> <span class="re3">170px</span><span class="sy0">;</span> <span class="br0">}</span>
  #rightcolumn { max-width: 70em; margin-left: 169px; margin-right: 8px; voice-family: "\"}\""; voice-family: inherit; margin-left: 161px; }
+
  <span class="re0">#rightcolumn</span> <span class="br0">{</span> <span class="kw1">max-width</span><span class="sy0">:</span> <span class="re3">70em</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">179px</span><span class="sy0">;</span> <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span> <span class="kw1">voice-family</span><span class="sy0">:</span> <span class="st0">"\"</span><span class="br0">}</span>\<span class="st0">""</span><span class="sy0">;</span> <span class="kw1">voice-family</span><span class="sy0">:</span> <span class="kw2">inherit</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">171px</span><span class="sy0">;</span> <span class="br0">}</span>
  html>body #rightcolumn { margin-left: 161px; margin-right: 8px; }
+
  html<span class="sy0">></span>body <span class="re0">#rightcolumn</span> <span class="br0">{</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">171px</span><span class="sy0">;</span> <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">8px</span><span class="sy0">;</span> <span class="br0">}</span>
</syntaxhighlight>
+
<br />
To add 10 pixels to the '''leftcolumn''', change the 4 numbers that size and position the columns. The end code would look like:
+
==How do I remove certain tabs at the top of the page?==
<syntaxhighlight lang=css>
+
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:<br />
  #leftcolumn { position: absolute; left: 0; top: 0; width: 170px; }
+
<span class="re1">.WikiPageMenuEntries</span> <span class="re0">#discussion</span> <span class="br0">{</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="br0">}</span>
  #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; }
+
==How do I remove the favorite page star () from the page menu?==
</syntaxhighlight>
+
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.<br /> <br />
[[#removetabs]]
+
==How do I change the URL bar icon (favicon) for my space?==
==How do I remove certain tabs at the top of the page?==  
+
The short answer is to look for the following code in your theme, and change it:<br />
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:
+
<span class="sc2"><<span class="kw2">link</span> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">"shortcut icon"</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"/space/showimage/my_favicon.ico"</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"image/x-icon"</span> <span class="sy0">/</span>></span>
<syntaxhighlight lang=css>
+
<span class="sc2"><<span class="kw2">link</span> <span class="kw3">rel</span><span class="sy0">=</span><span class="st0">"icon"</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"/space/showimage/my_favicon.ico"</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"image/x-icon"</span> <span class="sy0">/</span>></span>
.WikiPageMenuEntries #discussion { display: none; }
+
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:<br /> [[http://www.wikispaces.com/message/view/home/45811]]<br /> <br /> <br />
 
+
==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?==
</syntaxhighlight>
+
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.<br /> <br />  When customizing the themes, replace the '''<$WikiLogoOrSpaceName$>''' tag with the following HTML, replacing IMAGENAME with your logo<br />
==How do I remove the favorite page star ([[image:http://www.wikispaces.com/i/star_n.gif]]) from the page menu?==  
+
<span class="sc2"><<span class="kw2">a</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"WikiLogo WikiElement"</span> <span class="kw3">href</span><span class="sy0">=</span><span class="st0">"/"</span>><<span class="kw2">img</span> <span class="kw3">src</span><span class="sy0">=</span><span class="st0">"http://www.setda.wikispaces.net/space/showimage/IMAGENAME.gif"</span><span class="sy0">/</span>><<span class="sy0">/</span><span class="kw2">a</span>></span>
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.
+
Then, replace the '''<$WikiBackgroundColor$> <$WikiTextColor$> <$WikiHighlightColor$>''' and '''<$WikiLinkColor$>''' tags with the color names or codes, such as "#FFFFFF" or "white".<br /> <br /> <br />
 
+
==How do I display all tags given to a page, instead of displaying only tags I have created?==
==How do I change the URL bar icon (favicon) for my space?==
+
Tags are controlled by the following CSS in the default themes:<br />
The short answer is to look for the following code in your theme, and change it:
+
  <span class="re1">.WikiTags</span> <span class="br0">{</span> <span class="kw1">clear</span><span class="sy0">:</span> <span class="kw2">both</span><span class="sy0">;</span> <span class="br0">}</span>
<syntaxhighlight lang=html4strict>
+
  <span class="re1">.WikiTags</span> ul <span class="br0">{</span> <span class="kw1">list-style-type</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="br0">}</span>
<link rel="shortcut icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
+
  <span class="re1">.WikiTags</span> ul li <span class="br0">{</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span> <span class="br0">}</span>
<link rel="icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
+
  <span class="re1">.WikiTagsTitle</span> <span class="br0">{</span> <span class="kw1">color</span><span class="sy0">:</span> pink<span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">80%</span><span class="sy0">;</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="br0">}</span>
</syntaxhighlight>
+
  <span class="re1">.WikiMyTagsTitle</span> <span class="br0">{</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span> !important<span class="sy0">;</span> <span class="br0">}</span>
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:
+
  <span class="re1">.WikiTags</span> a <span class="br0">{</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">80%</span><span class="sy0">;</span> <span class="kw1">text-decoration</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="br0">}</span>
http://www.wikispaces.com/message/view/home/45811
+
  <span class="re1">.WikiMyTag</span> a <span class="br0">{</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span> !important<span class="sy0">;</span> <span class="br0">}</span>
 
+
You can change the CSS to display all tags by replacing this section with the following:<br />
==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?==  
+
  <span class="re1">.WikiTags</span> <span class="br0">{</span> <span class="kw1">clear</span><span class="sy0">:</span> <span class="kw2">both</span><span class="sy0">;</span> <span class="br0">}</span>
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.
+
  <span class="re1">.WikiTags</span> ul <span class="br0">{</span> <span class="kw1">list-style-type</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span><span class="sy0">;</span> <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span> <span class="br0">}</span>
 
+
  <span class="re1">.WikiTags</span> ul li <span class="br0">{</span> <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">inline</span><span class="sy0">;</span> <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">5px</span><span class="sy0">;</span> <span class="br0">}</span>
When customizing the themes, replace the '''<$WikiLogoOrSpaceName$>''' tag with the following HTML, replacing IMAGENAME with your logo
+
  <span class="re1">.WikiTagsTitle</span> <span class="br0">{</span> <span class="kw1">color</span><span class="sy0">:</span> <span class="kw1">blue</span><span class="sy0">;</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">100%</span><span class="sy0">;</span> <span class="br0">}</span>
<syntaxhighlight lang=html4strict>
+
  <span class="re1">.WikiTags</span> a <span class="br0">{</span> <span class="kw1">font-size</span><span class="sy0">:</span> <span class="re3">80%</span><span class="sy0">;</span> <span class="kw1">text-decoration</span><span class="sy0">:</span> sparkle<span class="sy0">;</span> <span class="br0">}</span>
<a class="WikiLogo WikiElement" href="/"><img src="http://www.setda.wikispaces.net/space/showimage/IMAGENAME.gif"/></a>
+
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).<br /> <br />
</syntaxhighlight>
+
==Can I see an example of some of these changes?==
Then, replace the '''<$WikiBackgroundColor$> <$WikiTextColor$> <$WikiHighlightColor$>''' and '''<$WikiLinkColor$>''' tags with the color names or codes, such as "#FFFFFF" or "white".
+
===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). [http://www.wikispaces.com/page/diff/customized+theme+example+1/10883977?mode=code View example #1]</div>
==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). [http://www.wikispaces.com/page/diff/customized+theme+example+1/10883977?mode=code | View example #1]
 

Revision as of 14:28, 14 February 2019

Theme Customizations

Commonly requested customizations to Wikispaces themes.

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:

<ul style="font-size: 120%;" class="WikiActions WikiElement"> <WikiIsEditor><li><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></li></WikiIsEditor> <WikiIsNotSpaceMember><li><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></li></WikiIsNotSpaceMember> <li><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></li> <li><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></li> <WikiIsSuperUser><li><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></li></WikiIsSuperUser> </ul>

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:

<WikiIsSpaceMember><li><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></li></WikiIsSpaceMember>


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

To add 10 pixels to the leftcolumn, change the 4 numbers that size and position the columns. The end code would look like:

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


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:
.WikiPageMenuEntries #discussion { display: none; }

How do I remove the favorite page star () 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:
<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" />

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:
[[1]]


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
<a class="WikiLogo WikiElement" href="/"><img src="http://www.setda.wikispaces.net/space/showimage/IMAGENAME.gif"/></a>

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

You can change the CSS to display all tags by replacing this section with the following:

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

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