The Way WordPress and HTML5 Should Work Together

By Juanita, on January 31, 2010

WordPress

Tags: , , ,


I was tired of making all kinds of edits to my theme files when I changed themes. I thought why do we even have to have new files to change themes. Themes are only styles and formats. You can do placement also but all this is done with the CSS. So I created my new themeset. It is one set of main files that you can change the style sheet to.

Simple enough. I also figured why not use HTML5 and CSS3 for the new theme. If you are going to do something be innovative. So in order to play with the theme you need to login to my WP theme site wpthemes.jack-in.com

If you would like to contribute a theme here is the CSS. Edit it and send it to me. I will add it to the vault so you can see it in action.

/* == BASICS == */
*
{
border-width: 2px ! important;
}

header, footer, section, article, aside, nav
{
display: block;
}

body
{
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: 150px;
width: 1000px;
background-color: silver;
}

nav+section
{
overflow: hidden;
width: 600px;
float: left;
clear: none;
}

/* == LINKS == */
a:link, a:visited
{
text-decoration: none;
color: #3F3F3F;
}

a:hover, a:active
{
text-decoration: none;
color: #3F3F3F;
}

/* == HEADER == */
body>header
{
background-color: #818181;
border-style: double;
padding: 5px;
color: #0D0D0D;
font-size: 175%;
text-shadow: 0.02em 0.04em #333;
}

body>header h1
{
margin: 0;
color: #ccc;
}

body>header h2
{
margin: 0;
padding-left: 30px;
color: #333;
font-size: 110%;
}

body>header h1 a:link, body>header h1 a:visited
{
text-decoration: none;
color: #4F4F4F;
}

body>header h1 a:hover, body>header h1 a:active
{
text-decoration: none;
color: #fff;
}

/* == POSTS == */
article[id*=post-]
{
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}

article>header p, article>footer p
{
font-style: italic;
}

article+nav
{
font-weight: bold;
}

section>h1
{
padding-top: 10px;
}

/* == NAVIGATION == */
nav
{
text-align: center;
clear: both;
}

body>nav
{
background-color: #999;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}

body>nav ul
{
text-align: left;
margin: 0;
}

body>nav li
{
margin-right: 20px;
font-weight: bold;
display: inline;
}

/* == COMMENTS == */
article[id*=comment-]
{
margin-top: 15px;
margin-right: 0;
margin-bottom: 15px;
margin-left: 0;
padding: 10px;
}

article[id*=comment-] h4
{
margin: 0;
}

.alt
{
border-color: #ddd;
border-width: 1px;
border-style: solid;
background-color: #eee;
}

form[method=post] label
{
display: block;
}

form[method=post] input
{
margin-top: 2px;
margin-right: 0;
margin-bottom: 12px;
margin-left: 0;
display: block;
}

/* == SIDEBAR == */
aside
{
margin-top: 30px;
overflow: hidden;
width: 250px;
float: right;
clear: none;
}

aside li
{
list-style: none;
}

aside li ul li
{
: ;
list-style-position: inside;
list-style-type: disc;
}

/* == FOOTER == */
body>footer
{
padding-top: 100px;
text-align: center;
overflow: hidden;
width: 100%;
clear: both;
}

/* == SEARCH == */
label[for=s]
{
display: none;
}

/* == ELEMENTS == */
/* a place for misc. styles */
/* == ALL YOUR CODE IS POETRY == */

click image to view larger



←
→

Leave a Reply

←
→
Get Adobe Flash playerPlugin by wpburn.com wordpress themes

  • Advertisements