Advanced Customizations for Your Wiki

For those of you who know some HTML and CSS and have moved beyond the basics of customizing your wiki, here are some ways to really get creative with your wiki’s look. You can remove the history or discussions tabs from your wiki, hide the “Manage Wiki” link from members, add your wiki name next to your logo, and more. And if you’d like to customize your theme but don’t know HTML and CSS, feel free to pass these instructions on to your web designer or IT administrator.

The Basics of Customizing Your Theme

As these customizations involve changing your HTML and CSS, let’s begin with a quick introduction to creating a custom theme. To edit your theme:

  1. Go to your wiki, “Manage Wiki” and then “Look and Feel.”
  2. Click on the option to “change or make a new theme.”
  3. Scroll to the bottom of that page. In the “Make a New Theme” section, give your new theme a name and select one of the pre-made themes to start from. Click “Edit” to be taken into the HTML and CSS code that you will be changing.
  4. Make the desired changes to your theme, preview the changes, and save your theme. To use the theme for the wiki, return to the Themes page under “Look and Feel,” go to the theme, and click Apply.

Removing the page, discussion, history, or notify me tab on your wiki

By making some quick changes to your theme, you can hide the Page, Discussion, History, or Notify Me tab at the top of your wiki. You might do this as an educator who wants to hide the history tab from students or as an organizer who would like to make the wiki even simpler for your community by removing all the tabs. To do this you can edit your theme and change the CSS for the <$WikiPageMenuEntries$> theme component:

  1. The top section of the theme’s code is CSS, or code which formats the HTML components in your theme. The CSS will be in the head of the theme between the <style type=”text/css”> and </style> tags. This is the section where we’ll be changing the code for this customization.
  2. To remove the discussion tab from your page, paste the following CSS on a new line in the section between the two <style> tags:
    .WikiPageMenuEntries #discussion { display: none; }
  3. To remove the history tab, you can instead add in this code:
    .WikiPageMenuEntries #history { display: none; }
  4. To remove the notify me tab, add the following CSS:
    .WikiPageMenuEntries #notify { display: none; }
  5. Finally, if you would like to remove the page tab, you can paste in this CSS:
    .WikiPageMenuEntries #page { display: none; }
  6. Once you have removed the components from the theme, preview your changes, save your theme and apply the theme to your wiki.

Hiding options in the Actions menu

You can also change the options your users see in your wiki’s sidebar. If you are a teacher who wants to prevent students from creating a new page on your wiki, you could hide the “New Page” link from them. If you are a non-profit, you might want to hide the “Manage Wiki” link from the visitors to your community site. To do this, you will need to edit your theme. To change your Actions menu:

  1. Edit your theme and go to the bottom half of the theme. Look for the <$WikiActions$> component in your theme. This will be in the body of the theme between the <body> and </body> tags.
  2. Replace <$WikiActions$> with the following code:<!-- <$WikiActions$> -->
    <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 Wiki</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="16" height="16" alt="" src="/i/icon_16_gear.gif"/></a>
    <a href="<$WikiSpaceUrl$>/space/about">Manage Wiki</a></li>
    <WikiIsSuperUser><li><a href="<$WikiSpaceUrl$>/admin/dashboard"><img width="16" height="16" alt="" src="/i/icon_16_bricks.gif"/></a>
    <a href="<$WikiSpaceUrl$>/admin/dashboard">Site Administration</a></li></WikiIsSuperUser>
    </ul>

    The <$WikiActions$> code hides the different components in the Actions menu of your sidebar. This replacement code makes those different options explicit so you can edit them individually.

  3. Once you have pasted this code into your theme, you can customize it and specify which users can see the links on your wiki.For instance, if you only want members of your wiki to see the Manage Wiki link, you can add the conditional tag <WikiIsSpaceMember> and </WikiIsSpaceMember> around the Manage Wiki section. In this case,

    <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 Wiki</a></li>

    gets changed 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 Wiki</a></li></WikiIsSpaceMember>

  4. Some of our more popular conditional tags are:
    <WikiIsLoggedIn></WikiIsLoggedIn>: This applies to someone who is logged in to their account.
    <WikiIsSpaceMember></WikiIsSpaceMember>: This applies to a user that is logged in and is a member of your wiki.
    <WikiIsSpaceOrganizer></WikiIsSpaceOrganizer>: This applies to a user that is logged in and is an organizer of the wiki.

    You can find more conditional tags at http://www.wikispaces.com/Themes#toc31.

  5. Once you have changed your theme, you can preview it, and save your changes. Choose the custom theme for your wiki to see the changes.

Place your wiki name next to your logo

This is for those individuals who would like to add their logo and wiki name to the top of their wiki. When you add a logo, the wiki name is hidden. To add it back in:

  1. Edit your custom theme and look for the line:
    <$WikiLogoOrSpaceName$>
  2. Replace that theme component with:
    <table class="WikiLogoTable WikiElement">
    <td><$WikiLogo$></td>
    <td class="WikiLogoName">YOUR WIKI NAME</td>
    </table>

    where “YOUR WIKI NAME” is the text you would like to appear next to your logo.

  3. Preview your changes and save your theme.

Some resources for further customization

Here are several resources that you might find useful as you continue to customize your wiki.

http://www.wikispaces.com/Theme+Customizations
Find several other popular theme customizations, including how to change the favicon for your wiki or the size of your sidebar.

http://www.wikispaces.com/Themes
If you’re looking to brand your wiki for your company, organization, or community, this page will be a great resource for you. Our themes use HTML mixed with some pieces of Wikispaces functionality. You can find all of our theme components, conditional tags, modifiers, and text and data elements here.

http://sealwyf.wikispaces.com/Sandbox019
Sealwyf, one of our longest active members, has a lot of great tricks for customizing your wiki with CSS, HTML, and Javascript. You can learn to create two-column layouts on your pages, change the background color of a wiki page, add buttons to your navigation bar, and more. It’s a great resource to check out.

http://www.wikispacetutorials.com
Wikispace Tutorials is a new site created by the designer of the WarnerWolves wiki, Spencer Barfuss. He has created some tutorials for Wikispaces, including how to remove borders from a table, create boxes with rounded corners, and more.

This entry was posted in Tips and Tricks. Bookmark the permalink. Both comments and trackbacks are currently closed.

3 Comments

  1. Jess
    Posted November 6, 2009 at 1:42 pm | Permalink

    How do I make it so that only the admin can extend invitations to be a member of the page?

  2. Posted November 13, 2009 at 3:06 pm | Permalink

    I’ve been trying to hide “History” and “Notify me” pages and I wasn’t able to do it. Where exactly do I have to paste the code?
    I cannot find the and tags.
    Can you help me, please?

  3. Posted November 17, 2009 at 10:25 pm | Permalink

    Carmen,

    Send us an e-mail at help@wikispaces.com and we’ll send you more instructions.

    Best,
    Sarah

One Trackback

  • Wikispaces Private Label

    Our flexible, scalable wiki environments deliver unlimited wikis, simple editing tools, and powerful central administration for organizations of all sizes.
    Find out more.
    Start your free, 30-day trial.

  • About Us

    Welcome to our blog! This is where we share updates about events and new releases, tips and tricks for using wikis, profiles of a few of our favorite wikis, and more. We're proud to serve a large community of educators, as well as individuals, groups, and organizations of all stripes and sizes.

    Contact us.
    Call us: 415-863-8919
    Site status · We're hiring!

  • Join Us for a Webinar

    Our monthly webinars are a great way to check out examples, learn from experts, and get real-time answers to your questions. Our webinars are always fun, and always free.
    Sign up today.

  • Wikispaces for Educators

    If your wiki is used exclusively for education, you might be eligible for a free upgrade to one of our K–12 plan or Higher Education plan wikis.
    Learn more about our K–12 plan.
    Learn more about our Higher Education plan.