4 Replies Latest reply on Jan 26, 2012 5:55 AM by ziggler_10

    Help please using templates with css files

    ziggler_10

      Hi, Can somebody help me with this conundrum?

       

      I have a 5 page website based on a common template with the BODY tag as an editable region for other pages. However these pages require a different CSS file but I cannot find a way of changing the files for the differing pages.

       

      The template I've created (Home.dwt) contains it's own CSS file but how can I then change that file to suit other pages?

       

      Any help would be appreciated

        • 1. Re: Help please using templates with css files
          osgood_ Level 8

          ziggler_10 wrote:

           

          Hi, Can somebody help me with this conundrum?

           

          I have a 5 page website based on a common template with the BODY tag as an editable region for other pages. However these pages require a different CSS file but I cannot find a way of changing the files for the differing pages.

           

          The template I've created (Home.dwt) contains it's own CSS file but how can I then change that file to suit other pages?

           

          Any help would be appreciated

          Have a look in your Home.dwt file near the top, between the <head></head> section. I believe when a template is saved/created by Dreamweaver it inserts an editable 'head' region <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->

           

          If its in the Home.dwt file then it should be in all the other pages created from the template. Just insert your css as below: 

           

          <!-- InstanceBeginEditable name="head" -->Css goes here<!-- InstanceEndEditable -->

           

          If its not in your Home.dwt file already create an editable region for the page specific css:

          <!-- InstanceBeginEditable name="css" -->

           

          <!-- InstanceEndEditable -->

           

          Save the Home.dwt file and that region should propogate to all the pages made from the template

           

          Also please take into consideration that any new css styles for a particular page should go into the code AFTER the link to your existing css file. This ensures that the new css styles will over-ride any css styles in your linked css file.

          • 2. Re: Help please using templates with css files
            MurraySummers Level 8

            I have a 5 page website based on a common template with the BODY tag as an editable region for other pages.

             

            You mean with an editable region within the body of the page, right?  You cannot put the <body> tag into an editable region.

             

            Osgood's suggestion is a good one, although I'd take it a step further.  Make sure that the link to the stylesheet that you use in the Template is also in the editable region.  Then you will be able to completely remove it from the child pages and replace it with your alternative stylesheet.

            • 3. Re: Help please using templates with css files
              osgood_ Level 8

              Murray *ACP* wrote:

               

               

              Then you will be able to completely remove it from the child pages and replace it with your alternative stylesheet.

               

              I guess it depends on the extent of the changes. If its just a body background or a wrapper background I'd always leave the 'global' style sheet intact on all pages otherwise you may end up having to amend two, three, four, five style sheets if you have the necessity to update other styles of the website.

               

              This needs careful planning.

              • 4. Re: Help please using templates with css files
                ziggler_10 Level 1

                Thanks you so much for all your help.

                 

                The answer from osgood seems to work and in bold below is what I've added manually:-

                 

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <title>Home</title>

                <!-- InstanceBeginEditable name="css_file" --><link href="css_files/home.css" rel="stylesheet" type="text/css" /><!-- InstanceEndEditable -->

                <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

                </head>

                 

                This has given every other page derived from the template an editable area that requires a different style sheet.

                 

                Many thanks and I'll report back with my findings to help others.

                 

                Bob