MonoDot

Click to preview

Name: MonoDot

Author: wstone
License: Creative Commons Attribution-ShareAlike 3.0 License

Tags: coke mediawiki monobook sidebar wikicoke wikipedia

Supports top bar menu *: no
Supports side bar menu *: yes
* depends on tags: topbar and sidebar

Description:

This is a take on fereal's Monobook.
I think this pulls off the Wikipedia look whilst keeping Wikidot's uniqueness.

Please see here for a better preview: monodot-template.wikidot.com

How to install

• go to: your wiki admin panel » appearance » themes
• choose External CSS theme
• supply the following URL as the CSS location

http://themes.wdfiles.com/local--code/monodot

Code

+ show the code

/***** Adapted version of Fereal's "Monobook" *****/
 
/* PUT FILES ON HOME PAGE AND CHANGE "MONODOT" TO "YOUR-SITE-NAME"!!! */
 
/***** GLOBAL HYPERLINKS *****/
a{
   color: #002bb8;
   text-decoration:none;
}
a:hover{
   background-color:transparent;
   text-decoration:underline;
}
a:visited {
   color: #5a3696;
}
a .newpage{
   color: #772233;
}
#page-content .linkout a[href^="http:"], #page-content .linkout a[href^="https:"]{
   display:inline-block;
    padding-right:14px;
    background:transparent url(http://themes.wdfiles.com/local--files/monodot/external-link-icon.png) center right no-repeat;
}
/***** END SECTION *****/
 
/***** CONTAINER & HEADER*****/
#container{
   background-color: #F2F2F2;
   background-image: url(http://themes.wdfiles.com/local--files/monodot/monodot-background.png);
   background-repeat: repeat-x;
}
#header{
   height: 20px;
}
#header h2, #header h1 a span{
   display: none;
}
#header h1 a,#header h1 a:hover{
   background-color:transparent;
   background-image: url(http://themes.wdfiles.com/local--files/monodot/logo.png);
   height: 100px;   /* Change this according to logo height */
   width: 130px;
   background-repeat: no-repeat;
   margin: 0px;
   padding: 0px;
   position: absolute;
   top: 2px;
   left: 4px;
}
#login-status{
   top: 2px;
}
/***** END SECTION *****/
 
/***** OPTIONS, SEARCH, NAVI-BAR *****/
#page-options-bottom.page-options-bottom{
   position:absolute;
   top:5px;
   left:145px;
   height:20px;
   margin:0px;
   z-index:1000;
   border: 1px solid #aaa;
   border-bottom:none;
   background-color:white;
}
#page-options-bottom-2.page-options-bottom{
   position:absolute;
   top:24px;
   left:145px;
   margin:0px;
   height:20px;
   z-index:1000;
}
#search-top-box{
   visibility:hidden;
}
#navi-bar {
   background-image: url(http://themes.wdfiles.com/local--files/monodot/navi-background.png);
   border:0;
}
#navi-bar-shadow {
    height: 24px;
}
/***** END SECTION *****/
 
/***** SIDE BAR *****/
#side-bar h1,#side-bar h2,#side-bar h3,#side-bar p,#side-bar h4,#side-bar h5,#side-bar h6{
   margin: 0px 0px 0px 5px;
   font-size: 90%;
}
#side-bar{
   padding: 0 0 0 0;
   margin-top: 80px;   /* Change this according to logo height */
   width:130px;
   border-style:none;
   font-family: sans-serif;
}
#side-bar ul{
   margin: 0 0 5px 0;
   padding: 0px 0px 0px 5px;
   list-style-type: none;
   border:1px solid #aaa;
   background-color:white;
}
#side-bar ul li{
   margin: 0 0 0 0;
   padding: 3px 0 3px 10px;
   text-decoration: none;
   font-size: 80%;
   background-image: url(http://themes.wdfiles.com/local--files/monodot/monodot-dot.png);
   background-repeat: no-repeat;
   background-position: center left;
}
/***** END SECTION *****/
 
/***** MAIN CONTENT *****/
#main-content{
   margin:5px 0px 0 137px;
   border: 1px solid #aaa;
   font-family: sans-serif;
   background-color:white;
 
}
 
#page-content h1{
   border-bottom:1px solid gray;
}
/***** END SECTION *****/
 
/***** END *****/

Notes

Please remember to take the relevant files from this page and put them into your start page.
There is also some notes about the logo size and site-name change within the CSS code.

Similar themes fake-wikidot-standard Author: Liurd Rating: 1, Comments: 0 Tags: sidebar topbar Gnl 109557431160 Author: Mukapogx Rating: 0, Comments: 0 Tags: sidebar topbar

Browse themes by tag 2.0 3d 3d-buttons 610nm and and/or ardeol articles band base beige black blog bloo blue bmc border boring brown business camo cat chocholate christian christmas city clan claret claus clay clean coffe coke colorful company contest contest-win corperate corporate corporation creative crimson cross css3 css3-buttons curved d14 dark dashed deep

Comments

pieterh 22 Jul 2009 14:31

It is really nice. If you have a link to the wiki syntax, it might be fun to copy the quick reference from the doc site: users then get the help inside the same site look & feel, and it has links to the actual doc where needed.

---

Portfolio

Re:

(account deleted) 22 Jul 2009 14:40

Thanks! I have implemented this on both of my sites but I think the "external link logo" kind of ruins it.

pieterh 22 Jul 2009 14:45

I meant, copy the contents of this page http://www.wikidot.com/doc:quick-reference and paste into a page on your own sites. (Just realized the permissions on www.wikidot.com did not allow that, fixed them.)

---

Portfolio

Re:

(account deleted) 22 Jul 2009 18:04

Yeah I did, check it out: http://monodot.wikidot.com/syntax

The external link logo that I'm currently using makes it look a bit messy :-(

Fereal 23 Jul 2009 06:18

OoOoOoohhh… External link icon. So that's one of the things that's missing in my lifelong mission to spoof, I mean, to be "inspired by", Wikipedia.

Anyway, you should contain the external links to prevent it from spilling outside, like

#page-content a[href^="http:"], #page-content a[href^="https:"]{
    display:inline-block;
    padding-right:14px;
    background:transparent url(http://monodot.wdfiles.com/local--files/start/external-link-icon.png) center right no-repeat;
}

You can disable certain things from being affected (like the table in http://monodot.wikidot.com/syntax) by wrapping it in a [[div]] class and negating the declarations.

Re:

(account deleted) 24 Jul 2009 19:32

I put this into the custom theme:

.noexternalicon[href^="http:"], .noexternalicon[href^="https:"]{
   background:none;
}

And wrapped the table in

[[div class="noexternalicon"]]
...
[[/div]]

But it doesn't want to work with the table. It's fine if I put it around a link that isn't in a table.
Is there something I'm missing here?

Re:

(account deleted) 25 Jul 2009 00:35

Nope, was wrong; doesn't seem to work at all :-(

Re:

(account deleted) 25 Jul 2009 01:17

Got it working: If there are custom classes then you can't use #page-content to narrow down where the external link icon goes.

ie use #page-content a[href^="http:"], #page-content a[href^="https:"]{…

then .noexternalicon doesn't work

simply use a[href^="http:"], a[href^="https:"]{

then .noexternalicon DOES work.

It would be nice to limit the icon to just the main content so if you can think of a way to do this, please let me know.

Re:

Fereal 25 Jul 2009 02:02

Yer doin' it wrong.

It should be

#page-content .noexternalicon a[href^="http:"], #page-content .noexternalicon a[href^="https:"]{
   background:none;
   ...other negations...
}

Or just

#page-content .noexternalicon a{
   background:none;
   ...other negations...
}

Re:

(account deleted) 25 Jul 2009 09:26

Ok, cheers :-)