Use the new Wikidot front theme on your Wiki in 5 easy steps

Blog calendar

RSS feed from Michal Frackowiak's blog

subscribe to the RSS feed

— or —

get my blog posts via email

michal-frackowiakmichal-frackowiak
SquarkSquark
shark797039shark797039
Arotaritei VladArotaritei Vlad
clearekicleareki
RefutnikRefutnik
TRT- Vipul SharmaTRT- Vipul Sharma
Matt GentileMatt Gentile
HirelawyerHirelawyer
Helmut_pdorfHelmut_pdorf
Sven StettnerSven Stettner
michalf23michalf23
leigerleiger
srivercxsrivercx
Joshua DarbyJoshua Darby
lil g easylil g easy
Mr ShaggyMr Shaggy
Chen XXChen XX
Super Dr GreenSuper Dr Green
Co0olCo0ol
Watch: site | category | page

Blog tags

« Back to the Blog

27 Nov 2008 08:55

Yesterday our team introduced a new design for our front page at Wikidot.com. We are getting many positive feedback about it. Thanks!

Many people were also asking us if it is possible to use the new theme on their own pages. Well, we are going to make a regular theme based on the new design, but if you are impatient and want to live on the bleeding-edge (like me) here is how I did it. No CSS knowledge is required and the result is instantaneous with just a few steps to complete.

appleish.png

The general idea is to create a new custom theme for Wiki and in the CSS definition import the CSS file from the front-page design. You will also need to add a few modifications, just copy&paste.

If you are already experienced with creating the custom themes, you might jump directly to steps 2a and 2b.

1. Make a new theme

Go to your Wiki. Enter the Site Manager. Click on Appearance and Custom themes from the left navigation bar.

Now click on "create new theme" button in the main area. You will be presented with a set of options. Choose any name for your theme, e.g. "mysleeknewtheme".

2. Extend the new front-page theme.

Now you need to tell the theme to import the main theme from Wikidot.com. AND make a few modifications to it so that e.g. it does not show the Wikidot logo in the top bar.

Before you proceed make sure that the "Which theme to extend" option is set to Base. We will extend the themes through @import clause in CSS.

Here is how exactly to do this. There are two versions you might want to look at: WITH the left side-bar or without it. Choose one and copy & paste the code below into the CSS area.

2a. Version WITH the left side-bar

@import url(http://static.wikidot.com/common--theme/frontspecial/newtheme_sidebar.css);
 
#header h1 a {
color: #474747;
height: auto; width: auto;
background-image: none;
position: relative;
top: 13px;
left: -2px;
}
 
#header h1 a span {
 display: block;
}

Options "Use top menu bar" and "Use side menu bar" should be checked.

2b. Version WITHOUT the left side-bar

@import url(http://static.wikidot.com/common--theme/frontspecial/newtheme_nosidebar.css);
 
#header h1 a {
color: #474747;
height: auto; width: auto;
background-image: none;
position: relative;
top: 13px;
left: -2px;
}
 
#header h1 a span {
 display: block;
}

Options "Use top menu bar" can be checked, but "Use side menu bar" should be unchecked.

3. Save new theme

Obviously now you should Save your new theme.

4. Apply the theme to your Wiki.

Now you need to tell your wiki to actually use the new theme(s).

Within the Site Manager go to Appearance and Themes section. Choose the categories you would like to have the new theme. Once you click on the category, choose the new theme from the right-hand list. It should be at the bottom of the list.

Save you changes and open your front-page.

5. Enjoy your new design!


I hope this helps. If you have any questions, please leave a comment here or send me a message!


rating: 6, tags: design howto tip wikidot

rating: +6+x

del.icio.usdiggRedditYahooMyWebFurl

Add a New Comment
asdad