magazine theme adding background image to title bar and footer bar

[colemanweb]

Is there an easy way to add a background image to the title bar and the footer bar of the Magazine theme?  I'd like to either do that or change the color and add a texture overlay, but I don't want to break the framework and I'm not sure where to put it in the child theme.  Any help would be appreciated.  This is by far my favorite Genesis theme.  Kudos to whoever created it. 🙂

[colemanweb]

I was able to change the background color using the following, but I still would prefer to add a background image to the title bar and the footer bar.

In the child theme style.css I changed from this:

#wrap {
background: url(images/wrap.png) repeat-x;
margin: 0 auto;
}

to this:

#wrap {
background: url(images/dark-periwinkle-wrap.png) repeat-x;
margin: 0 auto;
}

This was after I created the dark-periwinkle-wrap.png file that's 6x115 in the color I wanted (dark periwinkle) as opposed to the existing wrap.png file which is 6x115 in #2b2b2b.  This changed the background color of the title bar.

To change the footer bar background color, I modified the style.css file for the child theme (magazine) from this:

#footer {
background: url(images/footer.png);
clear: both;
overflow: hidden;
}

to this:

/* 445cbd is dark periwinkle */
#footer {
background: #445cbd;
clear: both;
overflow: hidden;
}

Still looking for a way to make this background images instead.  Any help would be appreciated.  😛

It would be even better if the theme had this for an option.

[colemanweb]

Well that worked until I went in to edit a post.  Don't know what I did but now I cannot edit posts with the visual editor.  🙁  Reverted back and still have a problem.  11th commandment: thou shalt not modify colors in Genesis... 😛

[TishaOehmen]

You're on the right track. Try re-installing your child theme then re-edit your style sheet as you articulated above. That should have worked for you.

To make the footer the same image as your header, just modify the style sheet to be:

<code>#footer {
background: url(images/dark-periwinkle-wrap.png) repeat-x;
clear: both;
overflow: hidden;
}</code>

That will cause the image to repeat horizontally. If you want it to repeat vertically an horizontally, change the line to read:

<code>background: url(images/dark-periwinkle-wrap.png);</code>

Let me know if you're still having trouble.

---

Tisha Oehmen, Paradux Media Group
Twitter: @TishaOehmen

[colemanweb]

Hi Tisha,

Thanks for the kind reply.  What I originally tried with the header worked.  I just copied it for the footer as well with a dark periwinkle footer image the same dimensions as the one that comes with the Magazine theme.  Not sure if something went wrong with the initial WordPress installation or I introduced a bug when I was in editing style.css of the child theme.  I had to wipe everything down to the bone and reinstall the backup.  I am meticulous.  Rather than hunt for it, I just wiped the directory clean and started with the fresh backup.

I don't think it would work to tile vertically as well as horizontally.  It would interfere with the other elements, wouldn't it?  Initially, I wanted to set the background color for those portions and use an overlay image, like polkadots or plaster effect.  That is beyond my capability with CSS, however.  If you know how to do that, I'd love to know.  I like the plaster effect at the top here, http://bit.ly/W0seos, that's in turquoise.  Or the polkadot effect in lime green.  That theme, however, is not as easy to read as Genesis or Magazine.  🙁

It's nice to meet someone from Oregon.  I have never been to Eagle Point.  When I read "the pond", I thought England.  lol. 🙂

colemanweb

[TishaOehmen]

Hi Colemanweb,

It's actually not hard to replicate the site you're referencing -- it's just a little....technical.

Let's start with the assumption that you have two graphics files in the /images folder of your child theme. The first is called plaster.png and the second is called dots.png.

All you're going to do is to find the element that has the shape you want, and paint a background on it. There are 3 primary areas that the site you're referencing is using: header, nav, and body. (in Genesis terms). So for the #header, you're going to add/replace the style sheet rule so that it includes:

background: url(images/plaster.png);

For the body (you might have to add this rule completely) it will need to say:

body{
background: url(images/dots.png);
}

for the#nav area, you'd just pick a color (like the one on the quote me nav bar)  and give it the following rules:

background-color: #329DA8;
border-bottom:  solid 2px #69D2E7;
border-top:  solid 2px #69D2E7;

This works because body is the full background area. Header sits on top of the body, and the nav sits directly underneath the header. If you haven't checked it out yet, the Visual Hook Guide might help you to see the parts.

A couple of caveats:

If the color bands don't go clear across the screen, you'll have to add what's called "Structural Wraps".
You will also have to find the elements that have already been defined in the Magazine theme in ways you don't like and change them to match/compliment your new scheme.

Of course, if you need help, check back here -- or if you wanted to hire the job out, I'd be happy to help.

Good luck!!!

---

Tisha Oehmen, Paradux Media Group
Twitter: @TishaOehmen

[colemanweb]

Thank you Tisha.  I will try that.  I have been very busy.  But this is very helpful.  So far I am loving Genesis.  Four sites so far, all beautiful with only a few styles I wanted to change.  But wow, it really loads fast.  🙂

[Author]

Posts