Customize Agency Theme Below Header

[carnelldesign]

I need to add a yellow bar below the header that has scrolling text in it. What is the easiest way to accomplish this?

[Riavon]

Please provide us with a link to your site as well as which Genesis theme you're working with. This enables us to help you a little better. Thanks!

---

Twitter: @riavonentprises

[carnelldesign]

I am working with the Agency Theme. Here is a link to the website http://apmarkings.com/

Thanks:)

[Riavon]

Nice looking site, but there is a lot going on here. Are you sure you want to add even more to it? Especially more movement? I would caution you on that, simply due to the fact that you run the risk of overwhelming your visitors with a lot of visual activity that may take the focus off your primary objective, rather than enhance it.

That being said, with a quick glance at your site using Firebug, I can see that that your header area is structured in a way that you are using a background image in the body tag to style the top portion of the pages. This doesn't leave much room for flexibility in the design. I assume you want your yellow-background marquee area to be the full width of the browser window? Do you want the marquee to appear on all pages or just the home page?

If you want the yellow strip to appear the full width of the browser window, you would have to change the existing background image you're using now to incorporate a yellow strip where you want it to appear, then adjust your other settings, such as your #inner div so that it has a bigger top margin to allow for the additional height of the yellow marquee area.

If the theme's design was configured differently, you could add another div and everything would naturally move down as needed with the existing margins set. Also, the way your site is configured, the scrolling text will only go as wide as 960px which is the width of the #wrap div which contains all of your actual page content.

All that being said and done, if you have the Genesis Simple Hooks plugin, you can add your HTML for the scrolling marquee in the genesis_after_header Hook

Something similar to this:
<div class="marquee"><marquee behavior="slide" direction="left">Your slide-in text goes here</marquee></div>

The above code presumes that you add your .marquee to your style.css something like

.marquee {
width:100%;
height:40px; (whatever height you want it to be according to the height of the strip you create in the bg image)
text-align:center;
background-color:transparent;
padding:0
margin: 0 auto;
color:#000
font-size:14px
}

This is my best guess, and hopefully a place for you to start.

---

Twitter: @riavonentprises

[Author]

Posts