Articles n' More

Click to preview

Name: Articles n' More

Author: Timothy Foster
License: Creative Commons Attribution-ShareAlike 3.0 License
Tags: articles blue contest-win education logo obsolete sidebar simple topbar

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

Description:

This theme is no longer supported!

Instead, take a look at the new and improved version, The Art in Articles.

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/articles-n-more

Code

+ show the code

/* Outer Border
========================= */
body{    background-color: #DDD; }
#container-wrap{
    margin-top:2em;
    margin-left:2em;
    background-color:#FFF;
    -moz-border-radius-topleft: 3em;
    -webkit-border-top-left-radius: 3em;
    background-repeat:no-repeat;
}
a{
    text-decoration:none;
    color:#00A;
}
a:hover{
    text-decoration:underline;
    color:#0000A5;
    background:transparent;
}
 
/* Top Bar
========================= */
#top-bar{
    background-color:#DDD;
    width:100%;
    margin:auto;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
}
#top-bar a{    color: #222; }
#top-bar ul{    padding: 0 20% 0 20%; }
#top-bar a:hover{
    background:transparent;
    text-decoration:underline;
    color:#252525;
}
#top-bar li ul li a, #top-bar ul li{
    background:#DDD;
    border-top: 1px solid #DDD;
    color:#222;
}
#top-bar ul li ul{    margin-left: 2em; }
#top-bar li ul li a:hover{
    background:#DDD;
    color:#252525;
}
 
/* Header
========================= */
#header h1{
    font-family:'Edwardian Script ITC','Lucida Sans Unicode','Lucida Grande',sans-serif;
    font-size:300%;
    font-weight:bold;
}
#header h1 a, #header h2{
    color:#000;
    margin-left:2em;
}
#header h1 a:hover{
    background:transparent;
    color:#000;
    text-decoration:none;
}
#header h2{
    padding-left:7em;
    font-size:120%;
    font-weight:bold;
    font-style:italic;
}
 
/* Main Content
========================= */
#main-content{
    margin-top:2em;
    border-top:1px solid #777;
    border-left:1px solid #777;
    border-bottom:1px solid #777;
    margin-left:16em;
    background:#FFF;
    font-size:90%;
}
#main-content a.newpage{    color: #900; }
#main-content a.newpage:hover{
    color:#950000;
    background:transparent;
}
#toc{
    border:1px solid #777;
    background:#F8F8F8;
}
#page-info{    border-top: 1px dotted #777; }
#page-options-bottom a, #page-options-bottom-2 a{
    background:#DDD;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    color:#222;
}
#page-options-bottom a:hover, #page-options-bottom-2 a:hover{
    background:#CACACA;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    text-decoration:none;
    color:#252525;
}
#breadcrumbs, .forum-breadcrumbs{    margin-top: 1em; }
 
/* Side Bar
========================= */
#side-bar{
    width: 15em;
    font-size:80%;
}
#side-bar ul{    list-style: none; }
#side-bar li a{
    text-decoration:none;
    border-top:1px solid #DDD;
    border-bottom:1px solid #BBB;
    border-right:1px solid #CCC;
    border-left:1px solid #CCC;
    padding: 2px 0 2px 1em;
    display:block;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    background:#FFF;
}
#side-bar li a:hover{
    text-decoration:none;
    padding: 2px 0 2px 1.2em;
    display:block;
    border-left:none;
}
#side-bar h1{
    font-size:120%;
    background:#DDD;
    padding:5px 0 2px 1em;
    margin-left:-1em;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
}
.side-collapsible .collapsible-block-link{
    text-decoration:none;
    border-top:1px solid #DDD;
    border-bottom:1px solid #BBB;
    border-right:1px solid #CCC;
    border-left:1px solid #CCC;
    margin-left:2em;
    padding: 2px 0 2px 1em;
    display:block;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    background:#FFF;
}
.side-collapsible .collapsible-block-link:hover{
    text-decoration:none;
    margin-left:2em;
    padding: 2px 0 2px 1.2em;
    display:block;
    border-left:none;
}
 
/* Text Headings
========================= */
#page-title{
    background:#DFE5FF;
    border-top:none;
    border-left:1px solid #77797F;
    border-right:2px solid #77797F;
    border-bottom:3px solid #77797F;
    padding: .5em 0 .5em 1em;
    margin:6px 0 0 0;
    -moz-border-radius-topright:2em;
    -webkit-border-top-right-radius:2em;
    -moz-border-radius-bottomright:2em;
    -webkit-border-bottom-right-radius:2em;
    -moz-border-radius-topleft:2em;
    -webkit-border-top-left-radius:2em;
    -moz-border-radius-bottomleft:2em;
    -webkit-border-bottom-left-radius:2em;
}
#main-content h1{    border-bottom: 1px solid #777; }
#main-content h5,
#main-content h6{    font-weight: bold;}
 
/* Footer
========================= */
#footer{
    background:#DDD;
    margin-right:1em;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;}
#footer a{
    text-decoration:none;
    color:#222;
}
#footer a:hover{
    background:transparent;
    color:#252525;
    text-decoration:underline;
}
#license-area a{
    color:#2A2ADD;
    text-decoration:none;
}
#license-area a:hover{
    color:#3030D5;
    text-decoration:underline;
    background:transparent;
}
 
/* Fix IE 6 and 7
========================= */
* html #page-title{
    background:none;
    border-bottom:1px solid #777;
    padding: 1em 0 2px 0;
    margin:0;
    border-left:none;
    border-right:none;
}
* + html #page-title{
    background:none;
    border-bottom:1px solid #777;
    padding: 1em 0 2px 0;
    margin:0;
    border-left:none;
    border-right:none;
}
 
/* Edit Buttons
========================= */
.button a{
    background:#DDD;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    text-decoration:none;
    color:#222;
    margin:0 3px 0 3px;
    padding: 0 3px 0 3px;
}
.button a:hover{
    background:#CACACA;
    -moz-border-radius-topright:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    -webkit-border-bottom-left-radius:5px;
    text-decoration:none;
    color:#252525;
}
 
/* Forum
========================= */
#side-bar .forum-mini-stat .info{    font-size: 100%; }
blockquote{
    background-image: url(http://themes.wikidot.com/local--files/articles-n-more/quote.jpg);
    background-repeat:no-repeat;
    background-color:#FFF;
    border:1px solid #706D87;
    padding:1em;
    margin: 1em 2em 1em 2em;
}
 
/* Insert Logo Image Here
========================= */
#container-wrap{
    background-image: url(http://themes.wikidot.com/local--files/articles-n-more/logodefault.png);
}

Notes

You can change the logo in the top left corner by changing the image location in the #container-wrap at the bottom of the CSS.

The curves and roundness only render in Firefox and Safari. In IE, the CSS attempts to make the fancy page title into a regular header so that the theme is not too squarish. On Opera, however, this cannot be avoided.

Similar themes Matalex Orange Black Author: alexandra bond Rating: 0, Comments: 1 Tags: black responsive sidebar smartphone topbar Noise Author: Battlesquid Rating: 1, Comments: 5 Tags: clean dark flexible grey minimalist modern no-sidebar topbar

Browse themes by tag ardeol black blog blue bmc brown business clean colorful company corperate corporate css3 curved dark dashed developer education educational flexible floral flower freshly-squeezed glass green grey grunge hello minimalist modern nature navy no-sidebar no-topbar orange outline professional purple rainbow red responsive series sidebar simple smartphone super topbar white wiki yellow

Comments

Chase Hamilton 15 Jul 2009 15:50

Very well done, Tim.

I like the idea of a personal logo at the top; it makes the feel of the website professional and comfortable.

Good luck!

---

Chase Hamilton

Excellent theme!

leiger 16 Jul 2009 06:35

Good work :) Good luck winning the contest.

---

~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: My Blog, Wikidot Editor, Official Docs
Work: ZoomPlanner (built for freelancers/small business)
Other: YouTube (gaming channel)

Re: Excellent theme!

leiger 11 Aug 2009 13:55

And it seems you have won - Congratulations! Hope you enjoy your new iPod!

---

~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: My Blog, Wikidot Editor, Official Docs
Work: ZoomPlanner (built for freelancers/small business)
Other: YouTube (gaming channel)

Last edited on 11 Aug 2009 13:55 by leiger Show more

Re: Excellent theme!

James Kanjo 11 Aug 2009 14:01

Shane, you didn't use your SA voodoo to rig the contest did you?

Nah, well done Timothy! 'Twas a great theme!

---

λ James Kanjo
_{Blog | Wikidot Expert | λ and Proud
Web Developer | HTML | CSS | JavaScript}

Last edited on 11 Aug 2009 14:02 by James Kanjo Show more

Re: Excellent theme!

leiger 11 Aug 2009 14:07

You'll never know…. :P

---

~ Shane (Wikidot Community Admin - Volunteer)
Wikidot: My Blog, Wikidot Editor, Official Docs
Work: ZoomPlanner (built for freelancers/small business)
Other: YouTube (gaming channel)

troyfus 26 Jul 2009 23:40

I really like this theme! It's really organized and easy on the eyes. Sites that have lots of sharp contrasting colors wear on the eyes quicker. I hope your theme wins!!

Awesome

jnesselr 29 Jul 2009 13:15

I really like this theme. The archive of Random Material is an awesomely done css site, as is LifesHandbook.

Woo! Yeaaaaah!

Wisp 04 Aug 2009 01:32

I for one think this is an awesome theme, Mr. Foster person who I have never before met and who has not paid me a large sum of cash in U.S. dollars to vote for this.

How do I upload logo?

ERPooler 05 Oct 2009 17:35

New to wikidot…like your theme but would like to insert my own logo. Where/how do I upload?
Thanks so much,
Eileen

Re: How do I upload logo?

rhombus p 11 Oct 2009 23:53

upload you logo to what ever page you want by clicking files at the bottom of the page. then get the url to it by clicking the info button. copy the url and then edit the part of the theme that looks like this

#container-wrap{
    margin-top:2em;
    margin-left:2em;
    background-color:#FFF;
    -moz-border-radius-topleft: 3em;
    -webkit-border-top-left-radius: 3em;
    background-image: url(http://themes.wikidot.com/local--files/articles-n-more/logodefault.png);
    background-repeat:no-repeat;
}

in the part where it says background-image:url(http://themes.wikidot.com/local--files/articles-n-more/logodefault.png); change the url to your own copied url.

hope this helps

---

Re: How do I upload logo?

Timothy Foster 12 Oct 2009 01:42

I made it easier to upload the image. On the bottom, there is this:

/* Insert Logo Image Here
========================= */
#container-wrap{
        background-image: url(http://themes.wikidot.com/local--files/articles-n-more/logodefault.png);
}

Change the URL to the image URL of your logo.

Hope this helps, and thanks!

---

Timothy Foster - @tfAuroratide
Auroratide.com - Go here if you're nerdy like me

WIKI Site Name Font

Shir Hadash R S 18 Dec 2009 07:46

How would I change the site name font? Where would I find a list of CSS font names? I am looking for something close to an ARIEL BLACK. Thanks

Re: WIKI Site Name Font

pieterh 18 Dec 2009 13:05

Please ask this question at http://community.wikidot.com.

---

Portfolio