Wikidot offers different ways to write and manage custom themes. The simplest way is to open your site manager and create a custom theme, then apply that to your default category. But as part of the Iron Giant project to build template sites, we've developed an easier, better way. In this blog posting I'll explain how that works.
First, our requirements. While the site manager has a theme editor, we want to avoid using this because it has no history, it is clumsy, and it does not understand Ctrl-S. We want to hold the CSS in a wiki page where we can add comments and explanation. We want the theme to be active immediately, so we have a fast edit-improve-edit-improve cycle. And we want to use external themes but with easy customization.
Here is the design, them, inspired by a howto by meagain1
In your site manager, create a custom theme called "My theme" that inherits from Base and contains this code:
/*
We do not use this custom theme editor.
Custom themes are in the admin:themes page.
See that page for examples and instructions.
*/
@import url(/admin:themes/code/1);
Now in Appearance / Themes, select the _default category and Choose a built-in theme, then choose My theme (custom).
When have done this, click on the site name (top left) to return to your start page. The site will have lost its theme and look like the Base theme. This is normal, don't panic.
Next, create a page called admin:themes with the custom CSS you need. Here, for example, we just ask to use the Silent Silver theme:
[[code type="css"]]
@import url(http://themes.wikidot.com/silent-silver/code/1);
[[/code]]
To customize the theme, we add CSS code after the @import. Here, for example, we take Fereal's Monobook theme and add some customizations:
[[code type="css"]]
@import url(http://themes.wikidot.com/monobook/code/1);
/* Show a logo for the wiki */
#header h1 a, #header h1 a:hover{
background-image:url(/local--files/start/wiki-logo-150.png);
}
#container{
background-image:url(http://monobook.wikidot.com/local--files/index/monobook-header.gif);
}
[[/code]]
Finally, most themes will work well for the admin pages as well as the rest of the site, and it is nice to have a consistent look and feel. In Appearance / Themes, select the admin category and choose Inherit from _default.
Then in Appearance / Navigation elements, choose the admin category, uncheck the No individual nav elements option, and delete the side-bar setting. Now the admin pages do not show a side bar. Some themes may force the main content margin, in which case you need to create a second custom theme ("My admin theme") with this additional CSS:
#main-content {
margin-left: 0;
}
So, to conclude, I've explained a simple way of managing custom CSS themes as wiki pages on your site, with all the advantages that gives you. Revisions, history, notifications, comments. All the Iron Giant sites use this technique but it's easy to retrofit to your existing sites.
Here's an example of this technique in action, in the Iron Giant blog template.
Why did I not think of this earlier?
I've been managing my CSS on a Wikidot page; albeit whenever I change things to that page, I go to admin:manage and press the “import” button on my custom CSS.
You're brilliant!
james.
since the new "import external theme" feature has been about i have been doing some experiments.
you might find using it even easier than the above,
http://community.wikidot.com/howto:fiddle-with-css-the-easy-way
Your Howto is brilliant and I did read it, like I read all the traffic on the community site. We'll maybe change the Iron Giant templates to use your approach, it is simpler.
Portfolio
please note: after spending all day messing with this (well actually… it took less than and hour. the other 12 hrs i have spent trying to get my head round ie effing 6 problem.) i have updated the how to.
http://community.wikidot.com/howto:fiddle-with-css-the-easy-way
Who knows meagain ? (I do)
Well, meagain's profile claims to be "AKA phil chett", but anyone can claim that!
Portfolio
AH!, but would they want to ????:-)
High-five to meagain, who was first to propose this and explain why it was so useful.
I hope we can continue to move functionality from the site manager into normal wiki pages.
Portfolio
if i might make a minor suggestion
@ peiter
all your pretty coloured themes are based on green fresh.
on all your coloured themes i note that you have added lots of additional bits to each and every one.
a lot these could of been added to the one theme (fresh) , to be carried over automatically to those themes that import green fresh
Then the only thing you would need in each color , would be the color changes.
i got the idea from the "themes Site"
I generate the rainbow themes automatically - the entire page in fact - using some random code generator; I'll publish that sometime. Don't need to create a 'fresh' theme.
Portfolio
when i said
i meant the green fresh theme. my apologies for the confusion.
Ah, sure. I preferred to leave the green-fresh theme alone, since each theme has an author and there are differences of taste (e.g. green fresh uses CAPITALS for its menus but I don't like that). In fact I like your idea of putting all the non-color CSS into a single parent theme, and may do that.
Portfolio
I noticed the changes you were making to the templates peiter and thought it was a really useful way of doing it… looking at meagain's tutorial it's even better and much simpler.
Using the "import external theme" to import an internal (same wiki) theme… brilliant!
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I don't think that it is a good idea. A tiny mistake in the CSS could make that the admin:manage would not work anymore.
Moreover, there is no need for a consistent look and feel for the admin:page because it's not part of the site, it's the backoffice.
@pieterh, I tried to add a 10th theme block in http://babel-template.wikidot.com/admin:themes and also added a new "My theme - default" but the theme failed to render. I don't see where the mistake is. Is there a limit to 9 ?
EDIT: classical mistake: I took basic not base. Fixed.
I disagree. In the interests of making things as easy to understand as possible for new users, having a consistent theme site-wide just makes the whole experience much simpler.
If experienced users want to change their admin theme, that's up to them to do if they wish.
Can you give an example of a mistake that would result in such a problem? The CSS alters the appearance of a site. As far as I know there is no way to cause any permanent damage just by editing the CSS.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
@ leiger
a few have found that some custom themes can indeed completely screw up the admin:manage page.
worst offender is the "bloo" theme.
don't try it :-) take our word for it.
of course there is a fix, but for newbies they will be a screaming and a shouting.
i NEVER have my admin manage theme the same as the rest of a site. it makes it crystal clear where the hell you are and what you are doing. i would highly recommend that everyone employs this procedure.
No comment !
Wow, you two are really against this! =)
@meagain: I've heard of that problem actually… just earlier today. Didn't think about that.
@gerdami: I can't argue with Squark! =)
However, if a custom theme is proven to work I can't see any reason not to use it in admin:manage… I use custom themes in there myself because I dislike the default themes so much!
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
us old un's might not be quick off the mark, but we have wisdom.
the down side is that when we have been bitten, we take a lot of persuading that the dog don't bite no more.:-)
I tend to change my admin:manage to reflect the theme of the rest of the site, mainly because I don't like any of the default themes with the possible exception of Localize, but also because for me it keeps things across the site consistent. If a CSS change causes a problem - and occasionally I have made a typo so the import button is 8000px off to the right! - you can normally just change it back. I agree that new users probably shouldn't change it so the warning needs to remain, but those who are comfortable with themes and CSS shouldn't experience any particular problem.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
..but then none of my sites use Bloo which I still can't work out the CSS for.
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Pieterh will speak on this matter:
Anyone who can propose better solutions, speak up. Perhaps a standard admin theme that looks like a console?
Oh, last thing: we fixed the custom theme 'Inherit from' selector so that Base is at the top where it should be. Gerdami, when people make a "classic mistake" it's because the tool is badly designed. Sorry about that.
Portfolio
I like meagain's proposal of a bright red warning theme for the admin category and will try this on the Iron Giant templates later on.
Portfolio
Indeed I think that all xyz-template.wikidot.com should have the theme for the admin: category linked to the external http://themes.wdfiles.com/local--code/silent-silver/3 which is close in color to official wikidot sites while the _default and other categories have their themes linked to the internal page admin:themes.
@gerdami: OK, done on all template sites except monobook-template and monodot, and project-template because I don't have admin access to that.
Portfolio