06-03

2010

Creating Your WordPress Theme — Part Two

blog-wp

Last week began this series on how to create YOUR OWN WordPress theme!

This week we are going to create the style.css file!

So here is the CSS!

Declare this a THEME!

/*
Theme Name: Your Theme Name
Theme URI: http://yourdomain.com/
Description: A custom design by YOU
Author: YOU
Author URI: http://yourdomain.com
*/

WordPress requires you to put that little chunk of information at the TOP of your style.css so that it can “find” it as a theme.

All Over

/* MAIN*/

body {
      background: #f2f2e8;
      font: 14px Georgia, serif;
      color: #534741;
      text-align: left;
      margin:0;
      padding: 0;
      height: 100%;
      }
#container {
      position:relative;
      background: #f2f2e8;
      margin: 0 auto;
      color: #534741;
      width: 1000px;
      }
a, a:link, a:active {
      color: #e07e0a;
      text-decoration: none;
      }
.clears {clear:both}

.line {
      background: url(/wp-content/themes/tutorial/img/hor-line.png);
      height: 2px;
      width:100%;
      }

This portion of the CSS is “generic”. What I mean by that is all of the code here will affect ALL of the design. It is NOT specific to the blog area, sidebar, header, or footer. We are defining the all over background color, font, font color, and throwing in a height of 100% because that helps the footer after all is said and done.

We are also defining the container div which, as the name suggests, CONTAINS the majority of the markup we will do later.

The class “clears” is to help us keep the content (blog) area and sidebar where they should be. We will go over this a bit more when it comes to the actual markup.

The line class is going to be used in the content (blog) area and the sidebar. You may have noticed it calls for an image file, those will be available to download in a zip file at the end of this post!

The Header

/* HEADER*/

#top {width: 1000px; font-size: 120px;}

#menu {
      position: relative;
      margin:-100px 0 0 625px;
      font-size: 35px;
      color:#036890;
      width: 350px;
      }
#menu a, #menu a:link, #menu a:active {
      text-decoration: none;
      color:#036890;
      margin-right: 1px;
      font-size: 30px;
      }
.menutitle {
      font-size: 40px;
      color: #534741;
      }

Here we are creating the very top part of the design. The header area. This has our blog name in big letters and that navigation menu in the parentheses.

The Content (Blog) Area

/* BLOG*/

#blog {
      float:left;
      margin: 20px 0 0 50px;
      width: 600px;
      }

#blog h1 {
      color:#5f9610;
      font-size: 50px;
      font-weight:normal;
      }
.title {
      color:#5f9610;
      font-size: 60px;
      font-weight:normal;
      float:left;
      width: 400px;
      margin: -5px 0 0 6px;
      }
#blog h1 a, #blog h1 a:link, #blog h1 a:active {
      text-decoration: none;
      color:#8cb206;
      }

.date {
      background: #d8d0a6;
      border-radius:12px;
      -webkit-border-radius:12px;
      -moz-border-radius:12px;
      padding: 3px;
      float: left;
      width: 55px;
      height: 58px;
      font-size: 15px;
      color:#534741;
      text-align:center;
      }

.datetitle {
      font-size: 35px;
      margin-top: -10px;
      color:#534741;
      }

.datemonthday {
      font-size: 20px;
      margin: -10px 0 -6px 0;
      color:#e07e0a;
      }

.commentlink {
      text-align:right;
      font-size: 40px;
      color:#e07e0a;
      }

Here we have a few different classes set up just for the date box alone! That is because we want the date title to have different qualities especially since it will be utilizing the WP-Cufon plugin. We also want the month/day portion to be different, in this case with a larger font size and that lovely orange color.

Because we are creating a two column design, having the content (blog) area and sidebar area next to each other, we introduced the “float” attribute.

The Sidebar

/* SIDEBAR*/

#side {
      float:left;
      margin: 20px 0 0 50px;
      padding: 0 10px;
      width: 253px;
      background:url(/wp-content/themes/tutorial/img/vert-line.png)
             repeat-y top left;
      }

#side a, #side a:link, #side a:active {
      color: #17808d;
      text-decoration: none;
      }

#side h3 {
      text-align:center;
      font-size: 35px;
      margin: -10px 0 10px 0;
      font-weight:normal;
      }
.widget {
      padding: 10px 0;
      }

Nothing fancy here, again we are using the float attribute and styled up the color of the links on the sidebar to be that awesome blue color. We also styled the H3 selector since that will also be using the WP-Cufon plugin.

You will also notice again, another image. Here we are creating that vertical dashed line by telling it to display the image on the Y axis (vertical) and to have it start from the top left corner (if you were to imagine a box).

Lastly, The Footer

/* FOOTER*/

#footer {
      margin: 60px auto;
      background:url(/wp-content/themes/tutorial/img/hor-line.png)
            repeat-x top left;
      height: 2px;
      width:1000px;
      }

#copyright {
      background: #d8d0a6;
      border-radius:4px;
      -webkit-border-radius:4px;
      -moz-border-radius:4px;
      padding: 3px;
      margin: 20px auto;
      width: 1000px;
      text-align:center;
      font-size:11px;
      color:#630460
      height:10px;
      }

.box {
      float:left;
      width: 290px;
      margin: -20px 0 0 40px;
      }

.box h3 {
      text-align:center;
      font-size: 35px;
      margin-bottom: 3px;
      font-weight:normal;
      }

Again another repeating image! Here we are doing a dashed line on the X axis (horizontal). We are also creating the CSS for our 3-column footer. The copyright div is just a little area to put your basic copyright information. We are making it rounded with the same background color as the date box.

Now granted, you can get far more fancy, far more crazy, and far more complicated but you don’t NEED to. I go insane when diving into pre-made themes because people can’t customize them! The css is confusing, messy, and generally VERY bloated. I highly suggest taking a peek at your current theme right now, look at the stylesheet, is it easy to read (for the most part anyway!) or bloated and confusing?

So with me so far? Here is the style.css and images for download! Go over the stylesheet and let me know if you have ANY questions!

Remember, THIS is what we are trying to achieve!

theme image

Next week we are going to tackle header.php!

archived under: Web

{20 comments}

06-01

2010

Wordless Wednesday: Pink

archived under: Photography

{58 comments}

05-30

2010

Basic Shutter Speed

Remember my tutorial on Basic Aperture? Well here we are going to go over Shutter Speed and how it can affect your photos!

Now, as I’ve said before, photography is all about light. The LONGER the shutter is open, the MORE light is let through, the SHORTER amount of time a shutter is open, the LESS light is let through.

Another way to not only control the amount of light but to control the mood, action, movement, and flow of a photo is by using your shutter speed to either slow it way down or speed it way up.

I suggest (if your camera has this option) you shoot in shutter priority (usually SP or S on the dial). You can control the shutter speed and it will automatically select the aperture.

1/4^th sec

1/13^th sec

1/30^th sec

1/100^th sec

1/500^th sec

As you can hopefully see in the progression here, going from a slower shutter speed made the water more smooth, silky, and less defined, by the end of the progression you can see how it caught a lot more of the action, the water was VERY defined and almost “frozen”.

When it comes to shutter speed, it’s defined by time. How many seconds or fractions of a second does it take to shoot that photo. For example having your shutter speed be 1 second would be considered a “slow” shutter speed, while 1/500^th of a second would be considered a “fast” shutter speed.

Here are a few random examples of photographs I’ve shot over the years.

8 seconds

1/1600 sec

1/4^th sec

1/8^th sec

By using a slower shutter speed you really should use a tripod otherwise the photo can be blurry, generally everything BELOW 1/80^th of a sec will need a stable base like a tripod or wall or table.

So to sum it up, if you want to take a photo that you want well defined and crisp, use a fast shutter speed (example: an exploding snowball against a tree). If you want a more moody or silky photo, a photo that shows movement, use a slow shutter speed (example: fireworks).

archived under: Photography

{37 comments}

Page 9 of 410« First...«5 6 7 8910 11 12 13 14 »...Last »

go back to the top! onestarrynight

I'm Sarah, mom of two sweet boys, Daniel & Tristan. I'm passionate about Attachment Parenting & photography. Why don't you learn more about me! Follow me on Twitter, stay up to date using the RSS feed, even subscribe via email, or connect with me on FaceBook and the OSN forum!

Say Hi!

Grab the Button

<a href="http://onestarrynight.com">
<img src="http://onestarrynight.com/osn.png" alt="osn" />
</a>

search
category
tags

AP (18)
BabyWearing (2)
Breastfeeding (1)
Cloth Diapering (1)
Food (40)
Gardening (2)
Guest Post (20)
OSN (98)
Pagan (17)
Photography (244)
Snippets (14)
Thoughts (753)
Web (43)
Blogging (4)
Online Meme (17)
Q&A (4)
Vlog (2)

Personal

Fought for a VBAC and lost
"She proceeded to make the comment “I know the situation, and because of that I’m not feeling sympathetic” in reference to Sarah leaving the hospital AMA and not accepting a repeat c-section previously, and to the massive amounts of pain she was in."
Vent - VBAC Scare Tactics
"He then recanted and said, “well maybe it’s not a law, but I’ll tell you NO hospital will ALLOW you to VBAC without it”. Right ok, so first fear tactic and lie."
I had TWO c-sections
"It’s hard because sometimes I almost feel shame or guilt that BOTH of my c-sections were medically needed."
Who Am I?
"I went from a victim, a weak worthless nothing to a MOTHER. I went from being a punching bag to a protector and then lost myself yet again."

Tweets

@PoorParenting basically homeschooling follows a curriculum and unschooling allows the child to self-learn #

@PoorParenting following her and sent her a ton of DM's lol #

@hearmeoutx public schools place huge emphasis on reading at a specific age. #

@hearmeoutx I really don't hold stock in add or ADHD. He seems to be more of a visual learner, like myself. I'm not worried however #

@hearmeoutx what is IEP and reading wise? He doesn't like to sit still and do it. He would rather be WATCHING a star wars movie than read it #

I would appreciate your feedback on my post about my #unschooling child that wants to try to go back to #publicschool http://bit.ly/d8xdnK #

{follow me on twitter!}

Angel: I am playing devil’s advocate here, because you mentioned, “Then it’s time...
Veronica: I have zero helpful advice to offer but I think you are a bad ass. You have been...
Sue Campbell: I’ve not been in your situation, but I admire the support you are offering...