My first crack at a wordpress theme

[cjk]

When I decided to redo my site a year and a half ago, I decided to use wordpress and the Kubrick theme which quickly became boring! It had been years since I designed a website and css did not exist back then, and I really liked the typography and clean feel of Kubrick, I just wanted to customize it some. So! I needed to learn css, php, and xhtml. (Since I like to get my hands dirty, and my mind active). Until I found css-tricks I found it really quite overwhelming and couldn’t figure out how or where to start and hence, procrastinated!

With the great video tutorials here, and a great tip from Ikthius! (thanks brother!) I am proud to unveil my new theme based heavily on Kubrick but reskinned to reflect my tastes.

Comments, suggestions etc. invited!

http://www.krowchukdressage.com

Best regards,
Chris

[ikthius]

cjk,

I like it it is clean, but a few things……

It is a bit narrow, I beleive 800×600 resolution is dying out.
I am not a fan of the background, what about having a picture of a horse doing dressarge in competition???
Your clinics link is a 404.
Do you need the same sidebar in all pages? wordpress gives you the ability to make other templates.
I don’t think the blue & brown goes!!! two totally seperate colours that do not compliment each other

it is a clean site. well done

[Rob MacKay]

Well done! Its tidy, which is excellent!

Graphically, I would save your head-line.jpg as an 8bit transparent PNG, then you wouldn’t have the background lining up issues. The background itself I feel is a little overwhelming…

Code wise, its pretty solid, if a little untidy :) Here are some extra pointers…

Your nav ul is wrapped in a navbar div, you don’t need to wrap your UL in a DIV for that, because the UL will do exactly the same thing as the div. They are both block elements and can be styled the same way – so your DIV is a little redundant.

Add

ul#nav li a {
outline:none;
}

to your CSS to get rid of the strange dotted outline when your link is active, coz you are using text-indent, it stretches off the page.

you head elements are obviously using padding and margin for positioning… use "position" its much better.

and one last small thing, your page wrap doesn’t wrap around your page, this can cause some issues else where… add:

overflow:hidden;
height:auto;

to your wrap div style, and it will stretch out nicely.

Other than that well done! Its a hard job doing your first theme, congratulations!

[cjk]

"ikthius" wrote:

cjk,

I like it it is clean, but a few things……

It is a bit narrow, I beleive 800×600 resolution is dying out.
I am not a fan of the background, what about having a picture of a horse doing dressarge in competition???
Your clinics link is a 404.
Do you need the same sidebar in all pages? wordpress gives you the ability to make other templates.
I don’t think the blue & brown goes!!! two totally seperate colours that do not compliment each other

it is a clean site. well done

Hi Ikthius! and thanks again for your tips and help.

I agree with you about the 800 x 600. This first crack is based on Kubrick and as I develop more skills I will attempt a wider resolution. I really like the typography and generous use of white space in the Kubrick theme.

I thought the background was a dark red… it was on my mac and really old monitor! I was really hoping to find a dark red satin pattern… You know, like prize ribbons. Red Blue and White ribbons are excellent accomplishments and my barn colours are dark blue, dark red and a silver gray. I am not sure how a picture of a horse would fit in there. Do you mean a repeated picture? Not sure I like that, tried it and it looked way tacky.

Thanks for the 404 find, clinics as it turns out is still in draft. I need to get to that today.

I am trying to figure out how to use custom templates with custom headers and sidebars. You are right, showing the same info in the sidebar on every page lacks imagination and the reader begins to ignore it quickly.

Good points! Good feedback!

With best regards,
Chris

[cjk]

"Robskiwarrior" wrote:

Well done! Its tidy, which is excellent!

Graphically, I would save your head-line.jpg as an 8bit transparent PNG, then you wouldn’t have the background lining up issues. The background itself I feel is a little overwhelming…

Thanks Rob!

Well that is two votes to toss the background! :)

Are 8bit transparent PNGs going to display all right on older browsers? I recall some issues with PNGs in IE?

Quote:

Code wise, its pretty solid, if a little untidy :) Here are some extra pointers…

Your nav ul is wrapped in a navbar div, you don’t need to wrap your UL in a DIV for that, because the UL will do exactly the same thing as the div. They are both block elements and can be styled the same way – so your DIV is a little redundant.

Good point!

Quote:

Add

ul#nav li a {
outline:none;
}

to your CSS to get rid of the strange dotted outline when your link is active, coz you are using text-indent, it stretches off the page.

Interesting, I see this "effect" in Firefox but not on my iPhone or in Safari on my Mac, nor in IE. Excellent suggestion though, I will update that!

Quote:

you head elements are obviously using padding and margin for positioning… use "position" its much better.

Not sure how to use "position" as the CSS Tricks screencasts that I learned from used padding and margin. ;)

Quote:

and one last small thing, your page wrap doesn’t wrap around your page, this can cause some issues else where… add:

overflow:hidden;
height:auto;

to your wrap div style, and it will stretch out nicely.

That sounds important! I will make that update right away as well.

Quote:

Other than that well done! Its a hard job doing your first theme, congratulations!

Hey thanks! And thanks for the feedback, tips and help. Much appreciated.

With best regards,
Chris

[tomwalters5678]

Ok, it’s a nice site, however I would recommend changing the boarder round the navigation and main content box – to me, it looks dated.

That’s it!

[cjk]

"ikthius" wrote:

cjk,
Do you need the same sidebar in all pages? wordpress gives you the ability to make other templates.

Hey Ikthius,

I did add custom sidebars and quickly found out that not all widgets can be used on more than one sidebar which frustrated me! FWIW and as an aside… Widgets make so much more sense to me than hand coding php, but that is just me! I am not a programmer, I train horses and teach riding and generally work long hours. :)

So, I wanted to stick with widgets, have more dynamic content in the sidebar so that it changes as you suggested. Finally I found the solution… TS Custom Widgets (Tom Slayer). So now I have 1 widgeted sidebar.php and a nice and easy point and click way to manage which widgets and content appears beside any page or post on my site. Really cool and worth a look if you need this functionality but don’t want to mess with code.

A few other changes have been made.

A few more in the plans, first off a wider content area as suggested, thank you!

Chris

[cjk]

"tomwalters5678" wrote:

Ok, it’s a nice site, however I would recommend changing the boarder round the navigation and main content box – to me, it looks dated.

That’s it!

Hey Tom,

Thanks for the reply and suggestion.

I am not as happy with the colour of the background anymore, and plan to change the width so I likely will do something with the border too. "Dated" isn’t so bad though, considering the content I deal with is 1,000 years old! ;)

Cheers!
Chris

[kevsyers]

Just wanted to say that for your first time that’s a good job. I’ll have to agree with the background issue. it’s a bit busy and takes away from the content in your site. As far as the code and all I would listen to the advice given already, it all seems solid.

[Author]

Posts