In need of staff over at roodesigns.net! ...Would you like to help?

How to use a CSS template on Rooeh.net

I thought that some of you might like this tutorial on how to use the css templates on the site to their full potential. For this tutorial, I will be using template #4. Let’s begin!

  1. stylesheetDownload the layout, unzip it, and open your style sheet. Here is where you will be changing the logo, header, or any other images needed in the layout.


  2. First, go to this chunk of coding.

    #header{
    width:750px;
    height:150px;
    margin:0 auto;
    background-color:#e1e1e1;}

    Replace background-color:#e1e1e1; with this

    background:transparent url('images/x.gif')no-repeat;

    This would also work if you wanted to use a seamless tile, just change the no-repeat to repeat, repeat-x, repeat-y, etc. But if you wanted a nice banner type graphic, which is what I will be doing, let us discuss the dimensions to use. The width and height of the header image are not set in stone, but if you do not wish to spend extra time adjusting the stylesheet, I suggest you follow the dimensions I list on the template download page. Although if you really cannot stand the default settings of the template, simply fiddle with the height and width of the container, header, navigation, sidebar, content, and footer divs.

  3. If you wanted to change your background color or image, go to this chunk of coding

    body {
    background-color: #eaeaea;
    color:#000000;
    text-align:justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:.7em;
    }

    And replace background-color: #eaeaea; with

    background: #eaeaea url('images/y.gif') repeat;

    Of course, you can change repeat to repeat-x, repeat-y, etc. Remember to change your background color to fit the layout!

  4. Edit all the different hex codes in the layout. Although since I created the template in shades of grey - which matches anything and everything- you could just skip this step if you are extremely lazy, like myself. :idea:
  5. index Open index.htm and edit the links and meta up there in the <head> section. Also, you might want to delete the text in the header section.

    <h1>Top header image</h1>
    <h2>750px by 150px</h2>

    However there are some plus sides in keeping these few lines of coding. But since the header image I created for this template tutorial already contains text, I’m just going to go ahead and hit the delete key.

  6. And that’s about it! :-P Why, were you expecting more? Here is the layout I came up with, it features Peebs, the awesome yet sometimes demonic cat. Why yes, she is fierce.