Wordless Wednesday: Pink

Creating Your WordPress Theme — Part Two

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!

Next week we are going to tackle header.php!

Recently…

Any excuse for me to post my photos right!

We’ve been working on the house lately. The kitchen is painted although the color is WAY too pale so I’m not exactly pleased with it although it is far superior to what was there. Keith cut down all the bushes (some had large bushes of poison ivy!) that have been here since his father built the house. Slowly but surely we are fixing the yard of doom!

Family wise things are of course, awesome. Tristan is teething like mad crazy but you wouldn’t know it because he is SO HAPPY almost all of the time. He actually just got his eye teeth (vampire teeth lol) so he has 4 teeth on top, 2 on the bottom. Baby teeth are SO adorable! He also pulls himself to standing quite a bit, makes me wonder if he is going to walk earlier than his big brother did.

Daniel is growing like my tomato plant (as in quickly and very tall!). His vocabulary has improved SO much in the past year, I get such a kick out of it! He and I redid the bookcase in the bedroom so he was able (with the help of dad) to organize his book collection by type (coloring books, history books, star wars books, reading books, etc).

Keith and I are doing very well, I still marvel at how lucky I am! I have to admit too, it’s AWESOME having a handy boyfriend. If I need something built, repaired, heavy duty yard work, car stuff… anything really, he is able to do it. Plus he changes 99% of all the diapers and does 100% of the diaper laundry! A sensitive man’s man if you will!

It is so weird sometimes to be in a healthy relationship. I was reading my old journals, as I have them going back to February of 1999, and the physical abuse from my ex-fiance is insane. I had documented EVERYTHING apparently. I was even a bit psychic too, in one entry I mentioned (mind you this is two YEARS before Dan was even conceived!) how I just had a feeling that he would be a deadbeat father, that if he couldn’t be responsible for himself, there was no way he would be there for his child, sadly, I was right.

The other night I went through and unfollowed a ton of people from twitter. Nothing personal. REALLY! I was just so overwhelmed at following close to 400 people, most of whom I never sent a tweet to OR ever got a tweet from. I was starting to worry that people were only following me in hopes that I would follow them back to boost their numbers and I was sadly correct in that assumption. After getting to under 200 people to follow, I immediately lost 15 followers. Makes me a bit sad actually. I did it so that I can try and form a connection with those I follow instead of hoping to make my “follower” number appear to be impressive.

Anyway, to brighten things up a bit…

Here’s some awesome blog posts I’ve been reading lately!

From KitchenWitch: A Fat Post
Really, just go read her post and comment. Not only is SHE amazing but it’s like she took the words out of my head.

I’ve been reading a lot of tweets and blogs about fat acceptance. Blogs about how we should love our bodies, how this is who we are and we shouldn’t be ashamed and hide. And I’m all for that. I think that if you are “fat” you should be treated with the same respect as anyone else. No one should be made fun of for how they look. I think it is disgusting how fat people are treated.

From Photo.Tutsplus: Capturing a Perfect Rainbow Photograph
Seriously, a post about pretty rainbows and how/where to find them to photograph them… what could be better!

So, what exactly are we looking for? Rainbows occur when sunlight intersects with water droplets – whether that’s rain, mist, waves, or a waterfall. Anywhere that you can see bright sunlight and moisture will be a good candidate for rainbow spotting.

From TasteStopping : You blog too much. Here’s one big idea that can help.
Ahh isn’t this always the case with blogging! A really refreshing post!

Notice that I didn’t say “You post too much.” That’s really none of my business. No, I’m talking about the craft of blogging. You know: writing posts, editing posts, adding photos, tweaking your site’s layout, moderating comments, checking stats, composing emails, reading other blogs, commenting on other blogs, checking stats, updating your FaceBook status, researching recipes, perusing the Daring Kitchen forum for tips on this month’s challenges, checking stats, stumbling a post, submitting photos, tweeting, tweeting and more tweeting. And breathe.

So lay it on me, have you blogged recently? Link me up! Any suggestions for an OSN tutorial? Let me know! Have an overwhelming desire to ask me a burning question? Do it! Or you can check out my wee tiny yet awesome forum.

Wordless Wednesday: Strawberry and Baby

WordPress Theme Download and Tidbits

First, we set up a plan on how we want our theme to look then we went ahead and created the style.css, this week I realized that it would take forever to get through this and decided to offer up the theme in it’s entirety as well as some code tidbits and such!

I can not guarantee that it will work perfectly or display perfectly for YOU on YOUR server, however it works fine for me, worked fine for a friend… so hopefully that’s good enough! Feel free to leave any questions you have on this entry pertaining to the theme. The Cufon javascript and font are all hardcoded into the theme and the files are included as well so you should be able to just upload, install, and activate the theme and be good to go.

Both the sidebar and footer are widgetized. The footer is 3-column so I suggest using only 3 widgets in that area.

Onto the Tidbits

Asked by BabyDickey:

For the personalized headings on the sidebar, I highly suggest the WP-Cufon plugin. Install it and activate it. You take the font, (check out DaFont for a ton of free fonts!), you want to use, pop on over to the Cufon Generator which creates a javascript file out of the font to be processed by the plugin. You will upload the font file to wp-content/plugins/fonts (you may need to create the fonts folder). Then in your WP dashboard go to appearance -> cufon. Once there it has directions on how to use it! If you have any further issues or it doesn’t work properly for you, just let me know and I will try to help anyone with issues!

For a new widget area, and I do this ALL the time when I do a 3-column footer, is edit your functions.php file in the theme you are using and add the following to it:

if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'footer sidebar',
'before_widget' => '<div class="floatleft">', // Removes <li>
'after_widget' => '</div>', // Removes </li>
'before_title' => '<h3>', // Replaces <h2>
'after_title' => '</h3>', // Replaces </h2>
));

Bam! Go to your widgets page in the dashboard and you will now see a new “sidebar” area! Now in your footer.php or sidebar.php file, add this bit of code to where you want the widgets to appear:

<?php if ( !function_exists('dynamic_sidebar') ||
 !dynamic_sidebar('footer sidebar') ) : ?>
<?php endif; ?>

Again, if you have any errors, questions, etc, just let me know!

Hopefully everyone enjoys the theme or at the very least learns something from it (by going over all the files and such) and the wee code bits!

Broken Nature

Embracing My Fatness

No one is perfect. Everyone dislikes some part of themselves.

For me I could probably narrow it down to a specific few:

• weight
• addictive personality
• sticking in troubled relationships for far too long
• too unorganized

I’ve managed to get out of all the bad relationships in my life so that’s a plus.

Lately I’ve put a lot of my self-worth into how much I weigh. Since having the baby, I’ve gained 60lbs. I didn’t gain much if anything during the pregnancy itself (in fact I lost weight the first 7 months) due to having severe hyperemesis.

It makes me seclude myself because I am not happy WITH MYSELF at this weight.

I am at a loss on “what to do” because I know WHAT to do, but I have such a mental block I suppose. I’ve tried WeightWatchers, calorie counting, etc, and I do VERY poorly because I go to the extreme and eat hardly anything and the foods I WOULD eat (all fat-free, sugar-free, artificial, etc) were very bad for me.

I could tell you how it happened too. A LOT of fast food and apple pies. I didn’t care about what I ate. I was so depressed about having a failed VBAC, lack of interest from my parents and siblings, that I ate my feelings, my rage.

I’m also sedentary. I am so uncomfortable walking in our neighborhood simply because we have no sidewalks and due to the never ending construction, cars just barrel down our street like it’s an action movie.

It doesn’t help that I developed quite the soda habit when I lived with Daniel’s bio-father. All he and his family drank was pop and I’ve never been able to fully kick it since then. Granted I drink “diet” pop but still, it’s bad for me and I know this.

If I’m stressed, Gods help us if there is apple pie, peach cobbler, or vanilla ice cream in the house. If all else fails, something super cheesy will get me through. Naturally I don’t ENJOY what I’m eating because I eat it SO QUICKLY that my mouth, my brain, my body, doesn’t have time to register what the heck is happening. Doesn’t matter if I feel “full” because you know, the food does TASTE good so I keep eating.

I’ve had issues with my weight starting in highschool but it really didn’t kick into high gear until my pregnancy with my oldest son. His bio-father was never into fresh healthy food so I had to learn how to cook with a LOT of ground meat, potatoes, and limited vegetables. My last trimester with him (once the hyperemsis eased a bit) was full of pancakes and bacon.

I’ve lost and gained 100lbs more times than I would like to think about and usually by really unhealthy means.

I suppose at the core of it, I don’t trust myself to eat normally. After years of diets and WeightWatchers, I associate so many foods as being “bad”.

I wish I was able to embrace my weight, who I am NOW rather than a future thinner self.

So lovely readers, I would appreciate your stories, your suggestions. I know I’m not alone! What is the solution? How does one “fix” their mindset? I don’t think I can handle another “it’s not a diet, it’s a lifestyle!” tagline thrown at me.