Blog calendar
— or —
Blog tags
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.
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
I read your blog.interested blog such as great information shared by you.Thanks.
Thanks for sharing this nice article. I read it completely and get some interesting knowledge from this. I again thanks for sharing such a nice blog.