Tag cloud: (all tags)
Posted by RobElliott on 03 Oct 2008 09:50, last edited by GoVegan on 09 May 2010 05:39
Tags: css custom customise editor
The default wikidot editor is black text on a white background. But by using custom CSS you can change the title, main editor panel and short description panel to different colours, fonts, borders and other elements. You can also change the dialog box that comes up when you save a page and even the animation during the save process.
You will need to know how to alter the CSS (custom style sheets) on your wiki. Wikidot recommends that you create a page, perhaps called css:theme, where you enter your CSS. Then in the admin:manage page go to Appearance -> Custom Theme and create your custom theme. If you have already created one you can select edit. Select the default theme you are extending then scroll down and press Import. Enter the name of your css file, e.g css:theme, and then save changes. Then go back to Appearance -> Themes, click on _default and from the dropdown menu select your custom theme then click on the Save Changes button. When you go back to another page in your wiki it will now be using your custom theme.
That was only a brief introduction to creating your custom CSS page. In the links below there is a more detailed description.
In the editor you have a title, main text entry panel and a smaller panel to give an optional short summary of the changes you have made.
To change the CSS elements that control the font, background and border for the title, in your custom CSS page enter the first line input.text#edit page title { and on the following lines you can enter a number of different elements for background-color, color, border style and color and many other elements. These are always followed bya semi-colon ; and at the end of the code you enter }. If you delete any element it will inherit the atttribute from the default wikidot one. So for this example the code to go into your custom CSS page looks like this:
input.text#edit-page-title {
background-color: #FDEABC;
border: 1px solid #468259;
color: #659860;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 90%;
padding: 5px;
}The first line of the CSS code is different for the main text entry panel and is textarea#edit-page-textarea. The elements for background-color, color etc are the same as for the title box. So for the main data entry panel the custom CSS would look like this:
textarea#edit-page-textarea {
background-color: #FDEABC;
}The background-color, color and other elements are again the same but the first line of the CSS code should read textarea#edit-page-comments which means your custom CSS code will look like this:
textarea#edit-page-comments {
background-color: #FDEABC;
}To change the background colour of the "Saving Page" dialog box that comes up when you save a page, the text in that box and the wait animation, add the following to your custom CSS code:
.owindow.owait .content {
background-image:url(http://strathviewconsultants.wikidot.com/local--files/css:theme/wait22trans.gif);
background-color:#FDEABC;
}
.owindow {
background-color:#FDEABC;
color:#468259;
border: 2px solid #FDEABC;
}
.owindow .title {
background-color:#FDEABC;
}To change the background colour and text colour of the tooltips that come up when you hover over one of the editor buttons, add the following to your custom CSS:
.hovertip {
background-color:#FDEABC;
color:#468259;
}The result of the above changes is shown below:
http://community.wikidot.com/howto:design-your-own-css-theme
RobElliott. Please visit his/her userPage.
If you think this solution is useful — rate it up! Or dump it otherwise.
The "close window" button when I click on my account icon:
Is there any way to remove the buttons? i.e. only show the Post title and main text entry area?
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Yes, in your custom CSS add the following:
Rob
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
We're designing a new comment user interface that has no buttons and is simpler to use. In the meantime, RobElliott's solution is a nice one.
Portfolio
To disable (well, "hide") buttons in in-page comment form:
I have search everywhere but still couldn't figure out how to change the background color of the following areas:
In the editor page:Thank you very much in advance.
It's a bit hard to test without seeing your site in my browser - I had a look but they're both private.
I'll see if I can figure it out using one of my own sites. Will reply back here if I have any suggestions.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Okay, the first one just needs you to add !important to the CSS, to override the existing definition:
And the second one (the button) needs the same thing (for the same reason):
The !important modifier prevents any definitions from further down in the CSS from modifying it (unless they have !important as well).
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Yay! It works ^_^
Thank you very much!!!