Wordpress Themes - WP Forum at BFA - [SOLVED] How can I add additional div's to header?

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] How can I add additional div's to header? (http://forum.bytesforall.com/showthread.php?t=10977)

[SOLVED] How can I add additional div's to header?

THIS PROBLEM IS NOW SOLVED -- SEE FOURTH POST

My website is horanda.com. I am using WP 3.0.1 and Atahualpa 3.4.9

What I want to do is to have two images flanking the central (rotating) image in my header. I figured out that I could modify div.titleoverlay by using either

ATO > Add HTML/CSS Inserts

or, more easily, in ATO > Header Area > Header Image

and, specifically, put my desired additional image. (The one currently up is strictly a test image, not the one I will be using in the end.) So far so good.

Clearly (at least to me) what I want to do is create (and include in the header region) something on the order of div.titleoverlay2, style it with align: right; and put my other overlay image into it.

I can create the div in ATO > Add HTML/CSS Inserts
How do I include that new div in the header region in Atahualpa?

Thank you for your attention on this. If it has already been covered (I couldn't find it in the forums or the FAQ's but that could have been just my lack of imagination in search terms), please just reference.

-- Flieg

Why don't you just make header images with these elements and have them rotate?

One site I did I made a PSD, put all the images and elements in it I wanted, and just hid the ones I didn't need before I "saved for web". I ended up with my Text holding fast in the same spot through the 3 header images, and had 3 different pics on each. I also had borders between the pics that held fast through all three header images too.

Loaded those up, turned the fade on, and it looked really cool!

Just thinking you may be complicating things more than they need to be. :) And then again, I may not understand entirely what it is you are trying to achieve.

Warmly,

Velma

You're right, Velma, I guess I didn't fully explain.

If I understand what you said (I'm suspecting that PSD is something involving PhotoShop) you spliced together the side images and the center image and then uploaded those pictures to your images directory to be rotated in. This would work fine as long as no one shrank the browser. (It would also mean that I had to splice the side pictures onto a lot of different center pictures, but that's not totally relevant -- that's just me being lazy.)

I want the side images to remain in place no matter what happens to the resizing of the browser window, and to have the center image flow underneath them if the browser window is shrunk. (They will serve as matched images above the two side columns in the final setup.) I know this works with my current setup of the one picture in div.titleoverlay, so if I can just get another div on the other side, I will have what I want.

-- F.

A chance remark in another thread led me to the knowledge that div.opacityleft and div.opacityright already exist as a part of the header inclusions (if you turn them on). Some experimentation showed me that they did exactly what I wanted them to after I modified them using
ATO > Add HTML/CSS Inserts..

Code:

div.opacityleft {

background-image: url(http://horanda.com/wp-content/themes/atahualpa/images/flankpic.jpg);

background-position: center top;

background-repeat: norepeat;

background-color:#1A00EC;

filter: alpha(opacity=100);

-moz-opacity:1.0;

opacity:1.0;

height:200px;

width:250px;

position:absolute;

left:0;

top:0;

z-index:2;

}

The instructions given in ATO > Header Area > Header Image have no mention of the names of the divs, (or even that there are divs) nor give any indication of what opacity left or opacity right do. The modification instructions were mysterious boxes that I just plain left alone, mostly because I thought they would do something weird to my image.

So, the bottom line is that three different divs already live inside the header container, div.opacityleft, div.opacityright and div.titleoverlay. They can be configured using the additional code section of the interface as given above, and my current problem is solved.

I'd still like to find out how to add custom divs to the header, but it's not a priority now.

-- Flieg

P.S. For those of you who have looked at horanda.com please be aware that it is basically an UglySite for experimentation.