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 Super side Author: yu22c Rating: 0, Comments: 1 Tags: sidebar topbar 云站V2.0(Cloud-Blog V2.0) Author: Floating_cloud08 Rating: 1, Comments: 0 Tags: dark 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 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 deposit

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

diplomaxs 28 Apr 2020 08:18

How to make a fake diploma?

Skype:adolph.863
QQ/WeChat: 648998850
WhatsApp:[phone]
Email:moc.liamg|1tnemucodyub#moc.liamg|1tnemucodyub

Need a diploma certificate for job promotions? Don’t have time to attend regular academic classes? Well, you don’t need to drop your job and go back to school for a diploma certification. Simply design fake diplomas on own and fulfill your needs. Fake diploma, fake degree, fake transcript, MRCP certificate, Nebosh Certificate, VISA, Birth certificate, UK driving license, Hong kong Driving license, IELTS, ACCA certificate, CPA certificate, PMP certificate, AICPA Certificate,
Making a fake diploma is not an easy task, but many individuals have experienced success with this. No matter whether you are stuck with a promotion or salary hike, a fake diploma could be a doorway to a new life. Just make sure that fake diplomas are accurately designed with proper layout and information.
Consider the below-mentioned guide and make fake diplomas without anyone’s help.

Excellent theme!

leiger 16 Jul 2009 06:35

Good work :) Good luck winning the contest.

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

Re: Excellent theme!

leiger 11 Aug 2009 13:55

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

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

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

Re: Excellent theme!

GoVegan 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 GoVegan Show more

Re: Excellent theme!

leiger 11 Aug 2009 14:07

You'll never know…. :P

---

~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server

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