Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

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

Old Nov 4, 2010, 05:31 PM
21 posts · Aug 2010

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

Last edited by flieg; Nov 5, 2010 at 08:35 PM. Reason: Problem Solved.
Old Nov 4, 2010, 07:50 PM
272 posts · Feb 2009
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.


What I REALLY love to do.
Old Nov 4, 2010, 08:30 PM
21 posts · Aug 2010
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.
Old Nov 5, 2010, 08:32 PM
21 posts · Aug 2010
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..
div.opacityleft {
background-image: url(http://horanda.com/wp-content/themes/atahualpa/images/flankpic.jpg);
background-position: center top;
background-repeat: norepeat;
filter: alpha(opacity=100);
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.


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] need help floating div over header image berkleegrad Header configuration & styling 5 Sep 2, 2010 05:51 AM
Can't figure out how to add code to display in <div class="opacityright"> schabadoo Header configuration & styling 3 May 24, 2010 05:40 AM
Add additional filters to Archive Page JournalStone Atahualpa 3 Wordpress theme 2 Aug 7, 2009 09:02 AM

All times are GMT -6. The time now is 03:24 PM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.