12 Replies Latest reply on Mar 18, 2010 1:36 PM by Nancy OShea

    Templates and CSS

    Kid Tiger

      So, I've created a template.  And now I'm having problems with the pages I create based off the template.  I've got my editable region which is my Main Content, and now I want to change the css for each Main Content on each new page, but all I can seem to change is the HTML. For instance, I can change the content of the Main Content region but I can't change the width, background image, height, float of the div.. How do I make the css attributes editable? I tried putting an editable region around the css in the upper styles area of the code, but that didn't work. What do I do?

        • 1. Re: Templates and CSS
          Robert Heist II Level 3

          I assume you have some sort of container div that contains the main contain and that there is a shared style from a stylesheet being apply to it in order to fix it's width, etc.  So, in the template, select the contain div and make the attribute "style" editable.  Then you can change the style that is applied in each page.

           

          Modify --> Templates --> Make Attribute Editable

          1 person found this helpful
          • 2. Re: Templates and CSS
            Kid Tiger Level 1

            OK, that got me closer to understanding what's going on, but I haven't gotten it yet. 

             

            Why would I want to make STYLE editable for the #container which holds my #maincontent, when I want to edit the #maincontent on my template on every new page?  Plus, I tried it and it didn't work.  I highlighted the #container and then went to modify> templates> make attribute editable and then changed the attribute from the default ID to STYLE... hit OK, saved the template and made a new page. 

             

            Did I do it right or am I missing something?

            • 3. Re: Templates and CSS
              Robert Heist II Level 3

              Ah, well you don't want to make the style editable...since the style being applied is an ID make the ID attribute editable.  If it were a class, you would make the class attribute editable, if it were an inline style you would make the style attribute editable.  Since yours is an ID (indicated by the # sign) then you need to make the id attribute editable.

              1 person found this helpful
              • 4. Re: Templates and CSS
                Kid Tiger Level 1

                But the #container contains other divs that I don't want to edit on every new page. I only want to edit the #maincontent.  Should I make a div that strictly encompasses the #maincontent, or should I not worry about that?

                 

                What do I fill in these fields?

                 

                Label:

                Type:

                Default:

                 

                So, far nothing has worked.  I make a new page after trying a number of combinations and then when I try to change something simple like the width of the #maincontent in another page it doesn't work.  It tells me it's locked.  I have a feeling the Label, Type, Default are what I need to fill correctly.

                 

                I feel this is easier than I'm making it.

                • 5. Re: Templates and CSS
                  Kid Tiger Level 1

                  Can nobody help me?  This seems like a straight forward problem--

                  • 6. Re: Templates and CSS
                    Robert Heist II Level 3

                    First off, you need to identify which style on which div you want to change.  If the style is the id on the mainContent div, then select that div in the template and make the id attribute editable.

                     

                    The label is what name of the editable attribute as you will see it in the pages based on this template.  Since you might make the id attribute of more than one div editable, they can't just call them both id so you have to give a unique name or label for every editable attribute.  The type is what data type is the value of the attribute, your's would be text.  If the attribute took only numbers, then it would be a number.  The default is the value that will be applied to that attribute by default on all pages based on that template.  It may be editable but it still needs to be set to something to start with.

                     

                    One warning:  When you make a style attribute editable, like making the id of a div editable, in a template, DW will place a variable in place of the actual value for that attribute in the template.  It will look something like this <div id=""@@myLableForThisID@@">.  Now on pages based on this template that variable @@myLabelForThisID@@ will be replaced with the default value but in the template it will still be the variable name which means the CSS style will not be applied while you are viewing the template.

                    • 7. Re: Templates and CSS
                      Kid Tiger Level 1

                      I just don't understand.  I've seen everything you've told me about, the @@ stuff... I've seen that.  But what style are you talking about?  I want to be able to edit ANYTHING AND EVERYTHING in the div.  When I click on the #MainContent and try to make the attributes editable it says that it's already in an editable region and I can't do it.  So, here's what I got, tell me if anything is in the wrong order and what I should highlight and what I should fill in..

                       

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

                       

                      <div id="mainContent">

                      CONTENT I WANT TO BE ABLE TO EDIT VIA CSS

                      </div>

                       

                      <!-- TemplateEndEditable -->

                       

                      Should I put a div around the entire mainContent? or should I put a div around the entire mainContent AND the editableregion?

                       

                      To change the value of this attribute in a page based on this template, choose Modify>Template Properties

                       

                      To change whether it is editable, use the "Make Attribute Editable" command again.

                       

                      What is all this about?  This is the text that's on the window when I make something editable.

                       

                      And once more, I want to be able to put new divs and new classes in the MaintContent div and then create new CSS rules for those divs in pages derived from my the template.

                      • 8. Re: Templates and CSS
                        Nancy OShea Adobe Community Professional & MVP

                        One of the mistakes I often see newbies making is saving what amounts to be a blank page as a DWT before they have put down the required HTML hooks for their CSS code to grab onto.  When your primary page has everything on it, it looks good in all browsers and passes W3C validation checks, then move your CSS rules to an external page.  Link your HTML document to the external stylesheet.

                         

                        See details on linking stylesheets.

                        http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

                         

                        Then Save your primary page as a DWTemplate (main.dwt).

                        Add some editable regions for stuff that will change from page to page.

                         

                        Hope this helps,

                         

                        Nancy O.
                        Alt-Web Design & Publishing
                        Web | Graphics | Print | Media  Specialists
                        http://alt-web.com/
                        http://twitter.com/altweb
                        http://alt-web.blogspot.com

                        • 9. Re: Templates and CSS
                          Kid Tiger Level 1

                          So, am I essentially making a page twice for the purpose of the template to affect each of the subsequent new pages?  And each of these new pages would have a stylesheet attached to them that I created while in the main page file (template) ..... I'm so confused

                          • 10. Re: Templates and CSS
                            Nancy OShea Adobe Community Professional & MVP

                            So, am I essentially making a page twice for the purpose of the template to affect each of the subsequent new pages?

                             

                            Not at all.  You're making a primary web page with everything common to all pages in it (including links to external CSS files).  Then you're saving that primary page as your DW Template, from which all other site pages will be spawned.

                             

                            External CSS will be editable in DW.  And any changes you make to external CSS file will immediately appear on all template spawned pages when you upload the CSS file to server. 

                             

                            Make sense?

                             

                            Nancy O.
                            Alt-Web Design & Publishing
                            Web | Graphics | Print | Media  Specialists
                            http://alt-web.com/
                            http://twitter.com/altweb
                            http://alt-web.blogspot.com

                            • 11. Re: Templates and CSS
                              Kid Tiger Level 1

                              OK... I think I understand...

                               

                              Here's what I gather, and thank you for taking the time to help me out,

                               

                              SO--

                               

                              I'm making a template page and in that template page are editable regions, and in my case, I only have 1 editable region and I would like that region's CSS to be editable as it will be different on every subsequent page I create off of this template I'm making.  But I need to make a css style sheet which will be the styles for my

                               

                              A.) Entire template minus the editable region

                               

                              or

                               

                              B.) My entire template and the styles for the editable region for each new page

                               

                              I'm almost there, I promise.

                              • 12. Re: Templates and CSS
                                Nancy OShea Adobe Community Professional & MVP

                                I'm making a template page and in that template page are editable regions, and in my case, I only have 1 editable region and I would like that region's CSS to be editable as it will be different on every page ...

                                 

                                You can put all your styles into one external stylesheet.  Then put your <body> tag inside an editable region so you can give it an appropriate class name.

                                 

                                Example, CSS rules for 3 different pages -

                                 

                                body.about #mainContent { page specific styles here }

                                body.services #mainContent {page specific styles here }

                                body.products #mainContent {page specific styles here }

                                 

                                HTML:

                                <--Editable Region -->

                                <body class="about">

                                <--end editable region-->

                                 

                                <--Editable Region -->

                                <div id="mainContent">

                                page specific content goes here

                                </div>

                                <--end editable region-->

                                 

                                 

                                Good luck with your project,

                                 

                                Nancy O.
                                Alt-Web Design & Publishing
                                Web | Graphics | Print | Media  Specialists
                                http://alt-web.com/
                                http://twitter.com/altweb
                                http://alt-web.blogspot.com