Difference between revisions of "Theme Customizations"

From www.wmwikis.net
Jump to navigation Jump to search
(Imported from Wikispaces)
 
(Imported from Wikispaces)
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
−
Commonly requested customizations to Wikispaces themes.
+
−
[[#actions]]
+
====== Theme Customizations ======
−
==How do I change/add to/take away from the Actions menu on the left?==  
+
Commonly requested customizations to Wikispaces themes.\\ \\
−
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:
+
===== 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:\\ \\
−
<syntaxhighlight lang=html4strict>
+
  <!-- <$WikiActions$> -->
−
<!-- <$WikiActions$> -->
+
  <ul style="font-size: 120%;" class="WikiActions WikiElement">
−
<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>
−
<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>
−
<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>
−
<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>
−
<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>
−
<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>
−
<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>
−
<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>
−
<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>
−
<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>
−
<a href="<$WikiSpaceUrl$>/space/dashboard">Site Administration</a></li></WikiIsSuperUser>
+
  </ul>
−
</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:\\
−
</syntaxhighlight>
+
  <WikiIsSpaceMember><li><a href="<$WikiSpaceUrl$>/space/about"><img width="16" height="16" alt="" src="/i/icon_16_gear.gif"/></a>
−
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:
+
  <a href="<$WikiSpaceUrl$>/space/about">Manage Space</a></li></WikiIsSpaceMember>
−
<syntaxhighlight lang=html4strict>
+
\\
−
<WikiIsSpaceMember><li><a href="<$WikiSpaceUrl$>/space/about"><img width="16" height="16" alt="" src="/i/icon_16_gear.gif"/></a>
+
===== How do I change the size of the left column in my theme? =====
−
<a href="<$WikiSpaceUrl$>/space/about">Manage Space</a></li></WikiIsSpaceMember>
+
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>
+
    #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; }
−
==How do I change the size of the left column in my theme?==  
+
    html>body #rightcolumn { margin-left: 161px; margin-right: 8px; }
−
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:
+
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; }
−
  #leftcolumn { position: absolute; left: 0; top: 0; width: 160px; }
+
    #rightcolumn { max-width: 70em; margin-left: 179px; margin-right: 8px; voice-family: "\"}\""; voice-family: inherit; margin-left: 171px; }
−
  #rightcolumn { max-width: 70em; margin-left: 169px; margin-right: 8px; voice-family: "\"}\""; voice-family: inherit; margin-left: 161px; }
+
    html>body #rightcolumn { margin-left: 171px; margin-right: 8px; }
−
  html>body #rightcolumn { margin-left: 161px; margin-right: 8px; }
+
\\
−
</syntaxhighlight>
+
===== How do I remove certain tabs at the top of the page? =====
−
To add 10 pixels to the '''leftcolumn''', change the 4 numbers that size and position the columns. The end code would look like:
+
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; }
−
  #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; }
+
===== How do I remove the favorite page star (<span style="font-family:monospace">http://www.wikispaces.com/i/star_n.gif|external image star_n.gif</span>) from the page menu? =====
−
  html>body #rightcolumn { margin-left: 171px; margin-right: 8px; }
+
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.\\ \\
−
</syntaxhighlight>
+
===== How do I change the URL bar icon (favicon) for my space? =====
−
[[#removetabs]]
+
The short answer is to look for the following code in your theme, and change it:\\
−
==How do I remove certain tabs at the top of the page?==  
+
  <link rel="shortcut icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
−
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:
+
  <link rel="icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
−
<syntaxhighlight lang=css>
+
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\\ \\ \\
−
.WikiPageMenuEntries #discussion { display: none; }
+
===== 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>
+
  <a class="WikiLogo WikiElement" href="/"><img src="http://www.setda.wikispaces.net/space/showimage/IMAGENAME.gif"/></a>
−
==How do I remove the favorite page star ([[image:http://www.wikispaces.com/i/star_n.gif]]) from the page menu?==  
+
Then, replace the **<$WikiBackgroundColor$> <$WikiTextColor$> <$WikiHighlightColor$>** and **<$WikiLinkColor$>** tags with the color names or codes, such as "#FFFFFF" or "white".\\ \\ \\
−
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 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:\\
−
==How do I change the URL bar icon (favicon) for my space?==  
+
    .WikiTags { clear: both; }
−
The short answer is to look for the following code in your theme, and change it:
+
    .WikiTags ul { list-style-type: none; display: inline; margin: 0; padding: 0; }
−
<syntaxhighlight lang=html4strict>
+
    .WikiTags ul li { display: inline; margin-left: 5px; }
−
<link rel="shortcut icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
+
    .WikiTagsTitle { color: pink; font-size: 80%; display: none; }
−
<link rel="icon" href="/space/showimage/my_favicon.ico" type="image/x-icon" />
+
    .WikiMyTagsTitle { display: inline !important; }
−
</syntaxhighlight>
+
    .WikiTags a { font-size: 80%; text-decoration: none; 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:
+
    .WikiMyTag a { display: inline !important; }
−
http://www.wikispaces.com/message/view/home/45811
+
You can change the CSS to display all tags by replacing this section with the following:\\
−
 
+
    .WikiTags { clear: both; }
−
==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?==  
+
    .WikiTags ul { list-style-type: none; display: inline; margin: 0; padding: 0; }
−
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.
+
    .WikiTags ul li { display: inline; margin-left: 5px; }
−
 
+
    .WikiTagsTitle { color: blue; font-size: 100%; }
−
When customizing the themes, replace the '''<$WikiLogoOrSpaceName$>''' tag with the following HTML, replacing IMAGENAME with your logo
+
    .WikiTags a { font-size: 80%; text-decoration: sparkle; }
−
<syntaxhighlight lang=html4strict>
+
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).\\ \\
−
<a class="WikiLogo WikiElement" href="/"><img src="http://www.setda.wikispaces.net/space/showimage/IMAGENAME.gif"/></a>
+
===== Can I see an example of some of these changes? =====
−
</syntaxhighlight>
+
==== Example #1 ====
−
Then, replace the '''<$WikiBackgroundColor$> <$WikiTextColor$> <$WikiHighlightColor$>''' and '''<$WikiLinkColor$>''' tags with the color names or codes, such as "#FFFFFF" or "white".
+
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]
−
 
 
−
==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]
 

Latest revision as of 14:29, 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:\\ \\
    <WikiIsEditor>
  • <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>
    • </WikiIsEditor> <WikiIsNotSpaceMember>
  • <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>
    • </WikiIsNotSpaceMember>
  • <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>
    • <WikiIsSuperUser>
  • <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>
    • </WikiIsSuperUser>

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>

  • <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> \\

    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 (http://www.wikispaces.com/i/star_n.gif%7Cexternal image 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:\\ 
 <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:\\ 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\\ 
 <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
    Retrieved from "https://www.wmwikis.net/index.php?title=Theme_Customizations&oldid=321"