Skip navigation
MaleneDK
Currently Being Moderated

Making template background an editable region

Aug 31, 2012 6:49 PM

Tags: #cs5 #background #image #template

Oh my goodness, I'm about to cry.  I've literally and without hyperbole spent days trying to figure this out on my own.  I have also contacted Adobe Tech help and was willing to pay for help ... all to no avail.  I am SO hoping there is someone out there who is able to help me.  My deadline to have this website finished is Monday, Sept. 03 and I am stuck.  Now down to the question:

 

I have created a webpage which I have saved as template and which I want to use as my master from which all the other templates and pages on my site will be derived.  I would like to be able to change the background in different sections of the site.  The page I have created has an image, but other pages may just have a colour.  Is it possible to make the background colour and image, as set in the page properties, into an editable region?  And, if so, how is it done?  If it is not possible, are there any suggestions for work arounds that will allow me at least some flexibility in this matter?

 

Any help on this will be gratefully accepted and enormously appreciated.

 

Thank you,

 

Malene

 
Replies
  • Currently Being Moderated
    Aug 31, 2012 7:36 PM   in reply to MaleneDK

    Is it just the background you want to change on some pages?  If so then you need to identify which background you want to change on a page.  Once you have identified it then it is a question of entering a simple css to make the necessary change.  For example, if you want to change the background of the entire body of the page then something like this entered at the top of your page (after other main styles) would take care of the necessary change:

     

     

    body {

        background-color: yellow;

        background-image: url('blue.png');

    }

     

    Another method is to make the relevant section editable but it is up to you to decide what exactly you want to do.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 31, 2012 8:55 PM   in reply to MaleneDK

    Ok it is pretty simple to do.

     

    1) Enter your header css at the top of your page;

    2) Select it to make it editable;

    3) Go to Insert >. Template Objects > Editable Region

    4) done

     

    It should look like this:

     

     

    <!-- TemplateBeginEditable name="EditRegion-body-css" -->

    <style type="text/css" media="all">

    body {

        background-color: #e5dfd3;

        background-image: url(../Images/Global/Toronto_Osgoode_Hall_1856.jpg);

        margin-left: 0px;

        margin-top: 0px;

    </style>

    <!-- TemplateEndEditable -->

     

    Hope this helps.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 1, 2012 5:21 AM   in reply to mytaxsite.co.uk

    This CSS should go in the HEAD of the page, and you cannot use the DW UI to insert editable regions in the HEAD of a page!  However, you can insert this editable region IMMEDIATELY above the </head> tag by doing it manually, i.e., change this -

     

    </head>

     

    to this -

     

    <!-- TemplateBeginEditable name="EditRegion-body-css" -->

    <style type="text/css" media="all">

    body {

        background-color: #e5dfd3;

        background-image: url(../Images/Global/Toronto_Osgoode_Hall_1856.jpg);

        margin-left: 0;

        margin-top: 0;

    /* a zero is really zero regardless of its units!  The units are not required in this case */

    </style>

    <!-- TemplateEndEditable -->

    </head>

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 1, 2012 10:59 AM   in reply to MaleneDK

    You're welcome!  Good luck.

     
    |
    Mark as:

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