Welcome

Search Center

Official Documentation

Discuss:

Support Forum (Recent)

Other Resources:

Getting Help

Community HowTo's

Code Snippets

Wikidot Applications

Glossary of Terms

Index of Sites

What is Hot

Time in Toruń, Poland

[フレーム]

Users who watch this page:

...

Posted by RobElliott on 03 Oct 2008 09:50, last edited by GoVegan on 09 May 2010 05:39

: 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.

Creating Your Custom CSS

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.

CSS Code

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.

Title

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;
}

Main Text Entry Panel

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;
}

Summary Panel

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;
}

Pop Up Messages

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;
}

Hover Text and Background

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

The result of the above changes is shown below:

Links

http://community.wikidot.com/howto:design-your-own-css-theme

Authors

RobElliott RobElliott . Please visit his/her userPage.

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

.wd-editor-toolbar-panel {
 display: none;
}

#np-editor-panel{display:none;}

#lock-info{background-color:#999999 !important;
}

.button-bara{background-color:#999999 !important;
}

Related articles

Comments

.wd-editor-toolbar-panel {
 display: none;
}

#np-editor-panel{display:none;}

#lock-info{background-color:#999999 !important;
}

.button-bara{background-color:#999999 !important;
}