Conquering the CSS Upgrade

May 13, 2007 at 12:52 am (CSS - Getting Started) (, , , , , , , , , , )

Graphics-maniac that I am, I couldn’t resist the allure of the CSS upgrade feature. I slapped down the ol’ Visa and bought myself a year’s worth of limitless experimentation, an open frontier of CSS possibilities. After the initial euphoria, when I dived in to try this new feature, I hit a solid brick wall. I spent hours reading through threads in the CSS Help Forum and became convinced that I must be a high calibre nitwit. The explanations made no sense at all.  But determination is my middle name.  For the next few days I clicked on the Forum, searched Google, visited the Forum again, delved into CSS manuals, then back to the Forum. I saw posts from others who were feeling the same frustration as me. I could relate to comments like: “Help!! I’m about to pull out all my hair !” and other frantic requests for help.

Well people, I’ve finally figured out how the bugger works and I’m here to provide a little Step by Step so that others can bypass the wasted hours of dire frustration that I went through.

    Step 1
  • Purchase the CSS Upgrade by going to the Upgrade tab.
  • Step 2
  • Go to your Presentation. You will see a Tab called “Edit CSS”.
  • Once there, you have 2 options. You can either add changes to the existing Template OR you can start from scratch and enter a brand new CSS stylesheet.
  • This is Where I initially got Lost :-) What I saw before me was a list of instructions plus the two Options with a button on, button off. I clicked on View Stylesheet and the code for the Template came up on my screen in a separate window. Voila, I thought naiively. I began making changes to the Template and when I pressed save, nothing happened.
  • Step 3
  • The secret is that you delete all the instructional text from the center of the WordPress page, not try to insert code into the actual CSS template page !! It seems obvious now, but believe me, for the past 3 days I was looking everywhere, and I mean everywhere for the place to insert my CSS, and because I hadn’t noticed the instructional box had a scroll bar on the right side (which was almost invisible in the Browser I was using), I wasn’t able to scroll down to the very bottom to see that it mentioned to input your CSS here. Aggggghhhh !!! Now admit it, the same thing happened to you, that’s why you’re here reading this entry, no?

The important thing to note is if you choose the Option “Add to Existing CSS”, whatever you input into the text box will override your CSS template. Your instructions are given precedence over the same instructions from the Template, so you can actually change any template (this was something that also seemed confusing at first, and judging by help requests in the CSS Forum, I’m not the only one who was confused about this). For example, so far, I’ve just done a small experiment with the Dusk Theme and have changed the header image to an image that I uploaded to WordPress, using the same image dimensions as the original header image from the Template. I copied the CSS code from the template:

#header {
width: 760px;
height: 170px;
background: url(images/header.gif) no-repeat;
}

I replaced it by typing this code into the CSS Editor Window:

#header {
width:760px;
height:170px;
background:url(‘http://galefraney.files.wordpress.com/2007/05/headerantname6.jpg’) no-repeat;
}

You’ll notice I added an ant (a crawly insect) to the header and a bit of foliage, something subtle just to get the feel of how things work. I did the graphics of the ant and foliage in Photoshop, plus added a more playful header text because I prefer elements to have a free-flowing feel to them. I then saved my new image as a jpg at the same dimensions as the original header image, as not to mess up the way it would display on the Blog page.

In order to make the template’s header text box disappear, so that my playful header text would not be covered up by the original header container box, I copied the template’s header box CSS code into my CSS edit window and changed all of the settings to zero “0″ … clever, no? … which in essence makes the original header box invisible … I realized that I couldn’t actually delete the original template text box instructions. Where there’s a will, there’s always a way, although you sometimes have to resort to obscure back door routes.

Now that I’ve figured out how to get started, I can take my time to experiment and examine the CSS code, section by section until I fully understand how each element works. While I was researching on the internet for instruction in CSS coding, I found this tutorial at www.html.net which provides all the fundamentals of CSS coding.

I wish you the very best of luck in getting started with your adventures in CSS. If you’re anything like me, you’ll be playing and tweaking your CSS all night long until the birds begin chirping the next morning, then have to dash out the door with socks that don’t match and one earring in and the other one left at home on the bathroom cabinet. ;-)

Visit my website: The Graphic Groove
Or my gallery on Flickr

Return To Gale’s Home Page

7 Comments

  1. tt said,

    You will find css resources here http://faq.wordpress.com/2006/08/15/where-can-i-find-css-customization-help/ and in the 3 sticky posts at the top of the css customization forum here http://en.forums.wordpress.com/forum.php?id=3&page
    Happy blogging :)

  2. adam said,

    that’s a great header!

    once you put any CSS in the editor, it’ll wipe out that instructional text. (all comments get stripped)

  3. G Suryanto said,

    So confusiiiiiing!!!!!!!! I feel hopeless. I need some sleep..

  4. Molli Fire said,

    wow! your site looks fantastic! i can’t wait to personalize mine with the CSS upgrade… i am gathering all my info and ideas before slapping down the 15$. i only hope it will look this wonderful!
    one very important thing that i noticed about your site here (i am a usability nerd) – when i was directed to this individual post page, i couldn’t find anywhere to click to get to your front page. as far as i can tell, you do not have a “home” button at the top of each page. it would be a very good idea to add one. that way when people find one page of your blog, they can easy click to the front page to see what is new. (many wp themes make your blog title in the header image the home button. perhaps you changed this with CSS, but it would be so easy to add back in…)
    Thanks for the beautiful inspiration!! Keep up the lovely blog…

  5. Hemali Tanna said,

    Gale, don’t know much about CSS, it is for website design isn it? Now can we integrate photoshop with is?? As in, it is easy to make a creative wbpage, with actual working links? :)

  6. galefraney said,

    Hi Hemai,

    I’m just beginning to learn CSS. Although it seems like simple code, knowing exactly how to align each element is a challenge. On this particular CSS for my WordPress Blog, I don’t have access to the page’s HTML, so I can’t change certain div tags, in order to really play with the layout. However I am now able to change quite a few things in look. CSS is the “presentation” level of web pages. It is a type of code that tells the webpage what kind of fonts you want to use, what colors, what images you want to appear in the background, or in the header, etc. It’s a lot of fun to experiment with. :-)

  7. al3qd said,

    hi
    you have a Nice work here friend
    While awaiting your news
    come visite me on my site and forums
    http://www.al3qd.com/vb

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 32 other followers

%d bloggers like this: