Skip navigation
fourwhitesocks
fourwhitesocks
Currently Being Moderated

Different background image (div) on each page of site complicated by template

Nov 21, 2012 5:48 AM

Hope I can explain this:  Below are specifics

 

 

- Using Dreamweaver cs5.5

- Making the pages from a template.

- Each page will have a different backround image; but the image is contained in a div tag (div name is .mainbackground) which runs behind the main core of the site, the image is not in the <body>
- The div .mainbackground is EDITABLE
- I have already made a specific css class to assign to that div on each page so that the image is different on each page.
- On the template page the div .mainbackground has no image class assigned to it (thus no background image)

- Since that div is editable I can then go into each page and assign the desired image class to it - works great.  EXCEPT...... & here's my main question:

 

-  In the code all of the other regions are contained IN that above mentioned div of .mainbackground SO that means that:

 

- if I need to update the structure of the pages I will have to remove the Editable region that controls the background image which would be -  removing the .mainbackround editable region.  Then go back to my template, make changes and save everything - thus all the changes will carry through to my other pages.  This is good and bad because I would get all the structural changes but I would also loose all of the text specific to those pages.

 

-Then when I'm finished I would have to go back and first add an editable region back to the .mainbackground class and then re-apply the background classes back to the .mainbackground to fix the images on the pages again...

 

The site is very small site so I can deal with it but am I going about this all wrong?


Is there some template feature I'm not getting?  I would like to keep using the template feature, and i do want a different pic on each page.....

 

 

I have attached a picture showing one page so you can see the background image - which will be different on each page.screen shot for adobe forum.JPG

1330 Views   10 Replies   Latest reply: fourwhitesocks, Nov 22, 2012 8:48 AM
 
Replies
  • David_Powers
    Currently Being Moderated
    1. David_Powers,
    Nov 21, 2012 10:17 AM   in reply to fourwhitesocks
    Report

    I'm not sure I follow all the details of your description, but the simple answer to your situation would be to give the body tag an ID, and make the ID attribute editable. That way you could use the following styles for your background images:

     

    #image1 .mainbackground {

        background-image: url(images/image1.jpg);

    }

    #image2 .mainbackground {

        background-image: url(images/image2.jpg);

    }

     

    and so on.

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    2. Nancy O.,
    Nov 21, 2012 10:27 AM   in reply to David_Powers
    Report

    I don't think you need a body ID for this. Embedded CSS code trumps external style sheets.  So if your Template has an editable region in the <head> tag, you should have no trouble adding unique backgrounds to individual pages.

     

    <style type="text/css">

     

    .mainbackground {

    background-image: url(page2-BG.jpg);

    }

     

    </style>

     

     

     

    Nancy O.

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    3. fourwhitesocks,
    Nov 21, 2012 1:49 PM   in reply to Nancy O.
    Report

    Thank you AGAIN for helping me!

     

    Ok, so do you mean put an internal style for this in the <head>  tag?

     

    There IS an editable region in the head tag of the TEMPLATE, but not the pages made from it...

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Nov 21, 2012 2:00 PM   in reply to fourwhitesocks
    Report

    If your Template has embedded CSS within the <head> tags, and the <head> has an editable region defined, you should be able to change styles in child pages.

     

    TEMPLATE CODE:

     

    <head>

     

    <style type="text/css">

    .mainbackground { }

    </style>

     

    </head>

    <!-- TemplateBeginEditable name="head" -->

    <!-- TemplateEndEditable -->

     

     

    CHILD PAGE CODE:

     

    <head>

     

    <style type="text/css">

    .mainbackground {

    background-image:url(page2-BG.jpg)

    }

    </style>

     

    </head>

     

     

    Give it a try.

     

    Nancy O.

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    5. fourwhitesocks,
    Nov 21, 2012 6:05 PM   in reply to Nancy O.
    Report

    Ok NANCY,

     

    I moved my .mainbackround rules into the internal style sheet.  (see attached picture) It looks normal to me in the template but when I look at one of the pages - the styles for are 'greyed out' and if I try to add a different background style it won't let me because it's being controled by the template.  I've attached a pic so you can see what the code in one of the PAGES CREATED BY THE TEMPLATE looks like in the <head> section.  I must have my 'editable / noneditable' tags in the wrong place?  See what you think!..  I'm tryin' LOLscreen shot for adobe head code.JPG

     
    |
    Mark as:
  • Web Magi
    Currently Being Moderated
    6. Web Magi,
    Nov 21, 2012 6:25 PM   in reply to fourwhitesocks
    Report

    Add your style between the editable region:

     

    <!-- TemplateBeginEditable name="head" -->

    <!-- TemplateEndEditable -->

     

    Not below it.

     

    Message was edited by: Web Magi

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    7. fourwhitesocks,
    Nov 21, 2012 8:29 PM   in reply to Web Magi
    Report

    I tried that already, it didn't work :-(

     
    |
    Mark as:
  • Web Magi
    Currently Being Moderated
    8. Web Magi,
    Nov 21, 2012 9:05 PM   in reply to fourwhitesocks
    Report

    So the following solution does not allow you to edit the CSS as needed?:

    Editable-Head-Region.jpg

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    9. fourwhitesocks,
    Nov 22, 2012 5:44 AM   in reply to Web Magi
    Report

    Ok, so THANK YOU BOTH, I did solve getting the styles to become editable in the <head> region so that is a big step.  I was attempting to move the styles between the editable regions but I was FORGETTING to also grab the <style type opening and closing tags....duh seems to obvious now but for some reason it was escaping me.

     

    Ok so that part is solved now so NEXT I will tackle adding the background images to my child pages.... I will keep u posted!  Ahhh the fun of learning dreamweaver and css totally by trial and error... 

     
    |
    Mark as:
  • fourwhitesocks
    Currently Being Moderated
    10. fourwhitesocks,
    Nov 22, 2012 8:48 AM   in reply to fourwhitesocks
    Report

    I GOT it!!  LOL Thank you both, Magi and Nancy!!!  Whew what an easy fix that was driving me nuts!  Did I ever mention how much I love these forums and ALL of the helpful people!!

     

    HAPPY THANKSGIVING TO ALL!!!!

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points