1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS Template/css/class help please!

Discussion in 'Web Development' started by nikkiraqs, Nov 23, 2008.

  1. nikkiraqs

    nikkiraqs New Member

    Hi all,

    I'm using one of the lovely free templates to create myself a bellydance website.

    I'm modifying the "musiciansagency" template. Now I've managed to modify it to create an index page with no problem. And I've added my own button design to go to whatever page I want it to go on.

    What I want to happen, is when I click on a button link, obviously for the template design to stay the same, but for the "main image" and "company name" image to change to the images I've created for each individual page. I also want to change the colour of the button when you hover over it on each individual page (the index page is OK, I just want a different hover colour on each page).

    I'm a complete newbie at modifying templates. I've tried googling css and I know I have to create a class in both the html page and the css page which I've tried but can't get working. I just end up cocking up the template. To be honest I haven't got much of a clue as to where I'm going wrong.

    I'd really appreciate it if someone has the time to help a newbie!

    The template/site I'm working on is here : http://www.robinemery.pwp.blueyonder.co.uk/readmyhips/index.htm

    Basically, when I click on the shows page, I'd like these images to come up

    http://www.robinemery.pwp.blueyonder.co.uk/readmyhips/images/shows.jpg
    http://www.robinemery.pwp.blueyonder.co.uk/readmyhips/images/showslogo.jpg
    and on the bio page these ones...

    http://www.robinemery.pwp.blueyonder.co.uk/readmyhips/images/bio.jpg
    http://www.robinemery.pwp.blueyonder.co.uk/readmyhips/images/biologo.jpg


    Thanks!

    Nikki
     
    nikkiraqs, Nov 23, 2008
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    All the things you are asking for are coded in the style.css file.
    This is the fle which is designed to give your web it's look and feel through-out each page.
    The code for this is
    HTML:
    #page_title h1 {
 width: 362px;
 height: 126px;
 background: url('images/company_name.gif') #292829 no-repeat 50% 50%;
 color: #cf7235;
}
 
/* Page Image */
#page_image {
 width: 414px;
 height: 534px;
 background: url('images/main_image.gif') #09070a no-repeat 0px 100%;
 color: inherit;
 overflow: hidden;
}
    The way it is written both pics will show up on every page.
    You would have to create additional lines of code for each pic you want, with a different name (#page_image_shows, #page_image_bio, etc) and the call them in the particular web page. An easy way is to copy the code and paste it in, then change the name and the picture like above.

    The index.html page
    HTML:
     <div id="page_image">&nbsp;</div>
    The code on the shows page would be
    HTML:
    <div id="page_image_shows">&nbsp;</div>
    Too much for a newbe. Start slow, tweak it later when your understanding of code improves.
     
    ishkey, Nov 24, 2008
    #2
  3. nikkiraqs

    nikkiraqs New Member

    Hi Ishkey,

    I'm really indebted to you for your help! Many, many thanks, I've followed your advice and I've got the pages working.

    Your help is very much appreciated as you have taught me something very useful.

    All the best to you and thanks again,

    Nikki
     
    nikkiraqs, Nov 24, 2008
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Your welcome -
    Just remember it is best to build the site first and then go back to deal with all the esthetic of minimalism items you wish to change.
     
    ishkey, Nov 24, 2008
    #4