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 sidebar simple topbar

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

Description:

This is a theme that has a simple easy-to-read feel and allows for a logo in the top left corner.

The side bar doesn't like things other than linked bullets and level one headers. Normal text renders, but since the sidebar has no background, the logo may interfere.

You can see this theme in action, with a custom logo, at The Archive of Random Material.

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;
}
/* END OUTER BORDER */
 
/* 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;
}
/* END TOP BAR*/
 
/* HEADER */
#header h1{
    font-family:Edwardian Script ITC;
    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;
}
/* END HEADER */
 
/* 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;
}
/* END MAIN CONTENT */
 
/* 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;
}
/* END SIDE BAR */
 
/* 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{
    font-weight:bold;
}
#main-content h6{
    font-weight:bold;
}
/* END TEXT HEADINGS */
 
/* 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;
}
/* END FOOTER */
 
/* LICENSE AREA */
#license-area a{
    color:#2A2ADD;
    text-decoration:none;
}
#license-area a:hover{
    color:#3030D5;
    text-decoration:underline;
    background:transparent;
}
/* END LICENSE AREA */
 
/* FIX IE */
* 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;
}
/* END FIX IE */
 
/* 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;
}
/* END EDIT BUTTONS */
 
/* 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;
}
/* END FORUM */
 
/* 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 Folder Author: Timothy Foster Rating: 2, Comments: 0 Tags: education folder sidebar topbar Phantom Author: rhombus p Rating: 4, Comments: 6 Tags: black games hover sidebar space topbar

Browse themes by tag articles beige black blog blue brown christmas claus clean colorful company contest corporate dark dashed edu education f1 floral games glass green grey grunge minimalist modern monobook music nature navy no-sidebar notepad no-topbar orange outline rainbow red reflection santa shiny sidebar simple topbar water white wiki wikipedia windows woodcut yellow

Comments

Chase Hamilton 1247673014|%e %b %Y, %H:%M %Z|agohover

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 1247726102|%e %b %Y, %H:%M %Z|agohover

Good work :) Good luck winning the contest.

---

— Shane | Blog | CycloDS Revolution | Compatibility List | Want me to manage your next wiki? | XBL: leiger40

Automatic code replacement — Rate it up!

Re: Excellent theme!

leiger 1249998908|%e %b %Y, %H:%M %Z|agohover

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

---

— Shane | Blog | CycloDS Revolution | Compatibility List | Want me to manage your next wiki? | XBL: leiger40

Automatic code replacement — Rate it up!

last edited on 1249998945|%e %b %Y, %H:%M %Z|agohover by leiger + show more

Re: Excellent theme!

James Kanjo 1249999301|%e %b %Y, %H:%M %Z|agohover

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 | photos | contact

last edited on 1249999336|%e %b %Y, %H:%M %Z|agohover by James Kanjo + show more

Re: Excellent theme!

leiger 1249999648|%e %b %Y, %H:%M %Z|agohover

You'll never know…. :P

---

— Shane | Blog | CycloDS Revolution | Compatibility List | Want me to manage your next wiki? | XBL: leiger40

Automatic code replacement — Rate it up!

troyfus 1248651657|%e %b %Y, %H:%M %Z|agohover

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

graphmastur 1248873303|%e %b %Y, %H:%M %Z|agohover

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

---

"But sanctify the Lord God in your hearts, and always be ready to give a defense to everyone who asks you a reason for the hope that is in you, with meekness and fear;" ~ 1 Peter 3:16

Woo! Yeaaaaah!

Wisp 1249349557|%e %b %Y, %H:%M %Z|agohover

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.

---

"If you watch Jaws backwards, it's a movie about a shark that keeps throwing people up until they have to open a beach."

Hey, guys! I know Timothy Foster in real life, so I'm famous too, right?

How do I upload logo?

ERPooler 1254764138|%e %b %Y, %H:%M %Z|agohover

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 1255305221|%e %b %Y, %H:%M %Z|agohover

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

---

i will be inactive until the winter holidays because of school — Rhombus p.

Re: How do I upload logo?

Timothy Foster 1255311725|%e %b %Y, %H:%M %Z|agohover

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!

---

— Blog ~ Life's Handbook