I suggest you read the how-tos on this at http://community.wikidot.com/howto:design-your-own-css-theme as doing it yourself is very satisfying and much better for long-term management of your site.
[[advert]] Alternatively contact me through my site here and I'll be happy to design something for you for a mutually agreeable price [[/advert]]
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
*Reaches through wallet*…..I think i'll make it myself….
that theme actually isn't that had to make. if you are using firefox i recommend you get firebug, and if you happen to be on a mac, i recommend the app, CSSedit. its a very nice, easy to use CSS editor. (note: just search google for them,they shouldn't be to hard to find, im just to lazy to do it my self.)
ask the questions and there are loads willing and able to help.
but first you have to go and buy the toilet paper :-)
Sorry, I should have provided more assistance with my earlier post.
For dealing with CSS I find a useful thing you can do is to create a page in your wiki to hold it. This is particularly useful on making a lot of changes to your CSS. You could call it for example css:theme1. You can then have alternatives and call them css:theme2, css:theme3 and so on.
Once you have created that page you should wrap your CSS inside a [[code]]..[[/code]] codeblock like this:
[[code type="CSS"]]
Your CSS goes here
[[/code]]
You can have other things on that page, just make sure that the CSS is inside the first code block on the page.
Don't forget that the C of CSS stands for cascading, so you don't need to add every single CSS selector into your custom CSS. Just the ones that need to overide the CSS from the base CSS and the CSS from the theme you are basing yours on.
I would recommend that you don't put a mass of CSS into your page the first time you are trying this. It will make it hard to see what has caused the problem if something goes wrong. Just start with one or two selectors, see the effect and build up from there. For example,
[[code type="CSS"]]
#page-title {
color:red;
}
[[/code]]
will turn your page titles red.
Now save the page and go to site manager (the admin:manage page). Select Appearance. If you haven't already created a custom theme go to Custom Themes and click on the Create A New Theme button. Give it a name and then select the wikidot theme that you want to extend (that is, the the theme that you will use as the basis for yours). Then click the Import button further down the page and type the name of the page holding your CSS, for example css:theme1. Then click Save theme.
Then go back to the Appearance menu in the site manager and choose Themes. You will see a list of your categories. Make sure thatm _default is highlighted and then next to the list is a box for you to "Choose A Theme". Click on this box and scroll down to the bottom of the list where you should find your theme name. Select it.
I recommend that you then click on the admin category in the list on the left and uncheck "Inherit from default" and choose a basic wikidot theme, like Basic or Clean. for this category. The reason is that some themes can cause problems with the admin category.
Then click the save changes button. When you go back to your start page you should see your new theme. If you don#t then refresh the page using ctrl+R of by clearing the cache in the browser options menu.
To make further changes, all you need to do is to change the CSS on your css:theme1 page, go to site manager ->Appearance->Custom Themes and you'll see your theme listed there. Click on edit and then the import button (the css:theme1 name name should still be displayed) and save changes.
Of course one of the things that is necessary in all of this is to learn CSS. Many books have been written about this but the basic concepts are not that hard: you are telling wikidot to apply the same style to every instance in your site of a particular selector, like h1 for example which stands for header 1. I won't turn this into a lesson on CSS though, so if you do have any questions on what the different selectors do or when/where to use them do ask again in the forum as there are plenty of people here willing to help.
I find that much of the work in CSS is trial and error, particularly if you are trying to design for Firefox, IE and Safari. This is why holding your CSS in its own page is a good idea; it's quick to change something and see the effect.
As rhombus indicated above, if you are a Firefox user, get hold of Firebug from http://getfirebug.com. It shows you the CSS that is being applied to any element or area of your page. You can try different things and see the effect without actually committing to it or breaking anything. it is a very good tool for gaining a better knowledge of CSS and reduces the trial and error.
I hope that helps.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.