blogger template building 4

If you manually edit the html of your template from the dashboard you will come across entries like these:

<Group description="Backgrounds" selector=".body-fauxcolumns-outer"> <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#fffaf0"/> <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#fffaf0"/> <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="#fffaf0"/> </Group>

The above are variable declarations which correspond to entries later in the template stylesheet declaration such as these:

.Header h1 { font: $(header.font); color: $(header.text.color); text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2); }

In order to glue all the style changes together I will need to edit various parts of both of the entries. for new values, i.e., a background-image for my heading I can choose to assign a value to the group description then call that using the $ sign or code them directly into the stylesheet portion of the template. I choose the latter option because it seems easier, so, for example:

.Header h1 { font: $(header.font); color: $(header.text.color); text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2); background-position: left top; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj5NtHrBZYcLKm7Y4MALvMh9am3FXPzFij9fVt-Az4lhTYriumLCIqnvTDL8dcKT044VNcSc6-xDsj4dl7QcA64i-27O8ePbwBWwkA3x8OoSSwa0410Mu4CbDwZfX2dm67OuG19Wwjkzc/s1600/light-header-lg.jpg); text-align: left; background-repeat: no-repeat; background-size: cover; }

Just keep repeating like this as you design your template. I will continue to blog here as I make additions to my main blog, this design blog is just a subsidiary of that.