The Way WordPress and HTML5 Should Work Together

January 31, 2010

WordPress

(Comments)

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

Duh! Wordpress Themes…Defaults!

January 9, 2010

WordPress

Comments

buy this book on Wprdpress theme design in 2.8 from AmazonI was working out in theory and on paper my first complete Wordpress theme. I modify and edit and add to and subtract from themes. But this one would be completely from scratch. I wanted my own customizable features, header images, logos, placement and functions. All in one theme that I could also change the theme of this theme for holidays. So this would be the be all end all theme.


And I started to over analyze (it’s better that way) about this whole process in general.



I always tend to jump ahead sometimes it just takes a leap of a faith that tells me that it is able and available to be done, but people just don’t do it. I know that I have seen defaults in themes. Where do they come from? How do they link in to a theme? Can I create my own default? Why not. Someone out ther had done this before me. I just have to find out what the steps are and do it also.



I began to wonder why I had to create entire pages of code. CSS can place and format any item on a web page. Why do themes contain pages at all?



It seems to me there should be an id for each part of what can display on a Wordpress site and that #id should have #names and each name could be assigned lower classes also. So, again what is with the pages of any kind of HTML whatsoever. I always said that I would not use CSS until I was ready to give up almost completely on using any kind of HTML at all. If my data is dynamic, and I can completely format with CSS why would I need anything else.



Well, Wordpress may just be the push I need. I would like to say that theme designers around the world need to agree on some standard #ids for components. We know that we use #container, #content, #post, #comments, #sidebar etc. so why not take these basics and develop themes that consist only of style-sheets and a theme settings page the active file being set up by Wordpress itself?



example:


If you have a #comment tag your theme settings can say show comments or not. the <#id> would then be hidden or not. With CSS and the settings of the theme that would be it. no need for the extra files to even exist.



Wordpress itself lets you borrow from other themes with their CSS setting Template: option. So why is it not used more often. Why are there not more strong bases to use as default templates. Kubrick is ok but I want more…lot’s more…



The template option is there for a reason.


Anyway, I just had to get that off my back. Redundancy really bugs me.


Related Posts On Other Sites:



Thinking in Code

November 29, 2009

Code Programming Scripts

Comments

I was at the store with my hubby when all of a sudden it came to me. I was having a problem with some CSS on a site I was working on. What could be the problem? I knew it had something to do with my nested DIVs but which one and where?

pguicheteauwpUsing separate files for each part of the site and each part of each page on each site can be confusing sometimes. I customize any applications and websites that I code and this was no exception. I was changing things to spec on the fly and lost track of one stray tag.

I had designed my own theme to match an old design that was completely in ASP. I had to migrate it to WordPress and convert the database to fit into the WPbase MySQL and rewrite all the ASP to PHP. And also make it function the same. That meant hacking about 20 plugins, modifying and creating my own functions and really getting into the deep end of CSS because I was using a multi-column design and did not want to resort to tables within WordPress.

So I am going over each line of code in my head while shopping (What better time to do that?) then about 60 lines of code in I screamed out loud. “OhMyGaad! I put that DIV in the wrong file, I have it in two places!” I could not wait to get home. I had put a div in the main file and in the head by mistake.

I somehow think that my nerdy/geek husband was not too happy with my revelation. Or maybe it was the public outburst? It was a eureka moment what can I say. When inspiration hit – it hits.

Anyway — Fixed. I slept well that night.

Yes, I am geekgrrl and proud of it :-)   I was a nerd before nerds were multi-billionaires.

Now about that website job you need done. give me a call.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes