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

Web Design Changing photo in Beauty Salon template

Discussion in 'Web Design' started by pmcqueen7627, Jul 20, 2008.

  1. pmcqueen7627

    pmcqueen7627 New Member

    I've downloaded and am using the Beauty Shop template. I want to have multiple pages, and have done a save-as, so I have an index.html, with several more pages.

    I want to change the photos on the page. I can edit the main photo (pc_1.jpg) in photoshop to produce what I want, and so if I replace that in the Images folder that works fine for the index.html page. Then I can create new .jpg files for the other html pages. So far so good. But when I try linking to those new images using dreamweaver, the CSS style is changed for everything since it's defined in style.css (which means the photo in index.html gets replaced, too) and that's where I get lost.

    How do I link to different/new .jpg files on those new .html pages, and do so without changing the CSS for everything? I know I could define a new CSS tag, but I'm having trouble interpreting exactly what tag is doing the layout.
     
    pmcqueen7627, Jul 20, 2008
    #1
  2. urbngypsy

    urbngypsy New Member

    Beauty Salon

    Hi,

    I read your post but unfortunately i cant help you. However Im also using the same template and want to know what you did to change the main photo. Ive tried in photoshop but so far im not able to do it. Id appreciate ur help. thanx.
     
    urbngypsy, Jul 24, 2008
    #2
  3. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Ok, two things you will have to do.
    1.) the "style.css file"
    you will have to add more code like below #nav, #nav2, #nav3, etc.(change to your files) do this for each new page/pic you want.
    save the file. make sure your new pics are in the image directory.

    (orig file)
    /** Body **/
    #body {
    position: relative;
    width: 100%;
    }
    #nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 252px;
    padding-top: 292px;
    background: url(images/pic_1.jpg) no-repeat;


    (added to, below above code in style.css)
    #nav2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 252px;
    padding-top: 292px;
    background: url(images/your_new_pic.jpg) no-repeat;
    }

    2.) For each HTML page you want you have to make this change.

    (example below for index.html)

    <div id="body">

    <div id="nav">
    <div id="nav-bot">

    (example below for say the about.html)

    <div id="body">

    <div id="nav2">
    <div id="nav-bot">

    What you have done is placed different selections in the css file.
    Now if you want to use one of those selections in your html file they are ready for use in the template. This works well if you have say a two column display in the main body and need a page with one column, just place extra code in the css file and call it up for that page. The beauty of style sheets.
    let us know how it works!
     
    ishkey, Jul 25, 2008
    #3
  4. urbngypsy

    urbngypsy New Member

    thanks ishkey and sorry for hi-jacking your post queen. i owe ya one!
     
    urbngypsy, Jul 25, 2008
    #4
  5. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Your welcome
    Post a link so we can check out the site. Put it in the review section.
     
    ishkey, Jul 26, 2008
    #5
  6. pmcqueen7627

    pmcqueen7627 New Member

    Thanks so much for the reply. I think I follow the CSS code and can make it work with some trial and error (usually more error than trial). Having this kind of help is just wonderful!
    For urbngypsy, In Photoshop, I clipped out the inside part of the photo, leaving the frame piece. I made the inside of the frame empty - deleted all content so it was transparent. Did most of this with the marquee tool, but had to clean up some of the bottom corners with the lasso tool. I made that all one layer.
    Then I used another photo approximately the right size and proportions, and copied it into a second layer. Stacked that layer underneath the first, frame layer, and adjusted the positioning.
    Trimmed/cropped the final version, made sure all the dimensions were exactly the same as the original. Saved this (first as a photoshop file so I could re-edit) then as pc_1.jpg. Used that new file to over-write the original pc_1.jpg, and everything looks fine in the final layout.
     
    pmcqueen7627, Jul 27, 2008
    #6