6 Replies Latest reply: Sep 1, 2012 10:59 AM by MurraySummers RSS

    Making template background an editable region

    MaleneDK

      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

        • 1. Re: Making template background an editable region
          mytaxsite.co.uk CommunityMVP

          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.

          • 2. Re: Making template background an editable region
            MaleneDK Community Member

            Thank you so much for the reply.  I will be using the Master template I have created to make about another 6 templates.  These templates I will use to create about another 200 pages.  So, my thinking is that the best way is to make the relevant section editable and that is where I am at a loss. I am a novice designer and not at all versed in HTML, so I rely heavily on Dreamweaver's menus to perform various actions.  I know how to make regions editable in general, but I can't find a way to use the "insert editable region" to make the actual background, as set in the "page properties" CSS, editable.  I am guessing doing so requires some sort of HTML knowledge that I don't have. 

             

            In the code, this is the region I need to make editable (copied and pasted from my template's code):

             

            body {

            background-color: #e5dfd3;

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

            ;      margin-left: 0px;

            margin-top: 0px;

            }

            • 3. Re: Making template background an editable region
              mytaxsite.co.uk CommunityMVP

              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.

              • 4. Re: Making template background an editable region
                MurraySummers CommunityMVP

                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>

                • 5. Re: Making template background an editable region
                  MaleneDK Community Member

                  Murray,

                   

                  Thank you SO much.  It worked like a charm.  You're awesome!

                  • 6. Re: Making template background an editable region
                    MurraySummers CommunityMVP

                    You're welcome!  Good luck.