3 Replies Latest reply: Mar 29, 2012 10:49 AM by John Nez RSS

    How to vary background colors on an external template based site?

    John Nez Community Member
    John Nez Mar 28, 2012 7:11 AM

      I have a web portfolio of about 50 pages. It is written with an external CSS and is built from a template using that template.

      Currently it has only one background color.  But I'd like to have each section of 10 pages with a different background color.

       

      I can't figure out if I should try to create a library item?  Will a library item work with an external CSS and template?

       

      Or should I try to figure out if it should be done with an optional editable region or something?

      As it is now, when I try to add a new tag as an individual page with a new background color, the background color changes for the entire CSS based site.

       

      Any clues much appreciated....

       

      Here's a sample of the page...

      http://www.johnnez.com/jonzmainbooks.html

       

       

      jn

      • 473 Views
      • Tags:
        • 1. Re: How to vary background colors on an external template based site?
          osgood_ CommunityMVP
          osgood_ Mar 28, 2012 7:46 AM (in response to John Nez)

          You should already have an 'ediatble' <head> region in your template file which will appear on every page you have made from the template.

           

          Use some embedded css to change the background color of the page/s in the files where you require the background-color to be different.

           

          <style type="text/css">

          body (

          background-color: #whatever;

          }

          </style>

           

          Or if as you say you have quite a few pages to apply this background color to use another linked style sheet. Then if you decide it's not quite the correct background color you want it will be easier to change:

           

          <style type="text/css">

          <link href="color_bg_1.css" rel="stylesheet" type="text/css" />

          </style>

           

          So long as the above is inserted AFTER the link to the main stylesheet the new background color will overide the one in the main css stylesheet.

          • 2. Re: How to vary background colors on an external template based site?
            John Nez Community Member
            John Nez Mar 28, 2012 9:16 AM (in response to osgood_)

            Sounds good... but I still can't get the attached style sheet to supercede the original CSS.

             

            Here's the file: http://www.johnnez.com/AportfolioTEST.html

             

            I attached the new style sheet as a link.  Should I have clicked on 'import'?

            The file I'm trying to change is bodybluplaid.css.

             

            It follows the original CSS... but it doesn't change the background color as the new bodybluplaid.css style sheet details it ought to do.

             

            Thanks...

             

            jn

             

             

             


            		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            		<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="../Documents/Jonz2012site/Templates/index template div content.dwt" codeOutsideHTMLIsLocked="false" -->

            		<head>

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

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

            		<title>John Nez export Index</title>

            		<!-- InstanceEndEditable -->

            		<!--[if lte IE 7]>

            		<style>

            		.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */

            		ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */

            		</style>

            		<![endif]-->



            		<!--[if IE]>

            		<style type="text/css">

            		a { zoom: 1;}

            		</style>

            		<![endif]-->



            		<link href="../../Jonz2012site/CSS/JonzheaderindexCSS.css" rel="stylesheet" type="text/css" media="screen" />



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

            		<link href="../../Jonz2012site/CSS/bodybluplaid.css" rel="stylesheet" type="text/css" media="all" />

            		<!-- InstanceEndEditable -->

            		</head>





            • 3. Re: How to vary background colors on an external template based site?
              John Nez Community Member
              John Nez Mar 29, 2012 10:49 AM (in response to John Nez)

              I finally figured out what I was doing wrong.

               

              The variable style sheet has to be a TAG... then the body selected from that.

              You all probably knew that all along, but it took me all day to figure it out because first I had to try every other thing.

               

              Nested templates, modify template property, etc, etc. 

               

              Too many buttons to choose from with DW!