Wordpress Themes - WP Forum at BFA - Help me achieve this in my header section

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

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

- - Help me achieve this in my header section (http://forum.bytesforall.com/showthread.php?t=11768)

Help me achieve this in my header section

Hey there,

first thanks for taking your time to visit this thread. atahualpa theme and this forum has been a great learning platform for a beginner like me. Before, I knew absolutely nothing about php, css but then since i ever installed atahualpa and started learning from forum i've been able achieve many things to give professional touch to my website. And now i cant imagine my life without atahualpa..yeah its true!! thats the power of atahualpa especially if you are a beginner.

Unfortunately, I'm now stuck on trying to configure the header section of my desire. I've searched in the forums but the threads were limited and the answers as well.

Having said so, I hope someone can help me with the following i want to do in my header segment. I'm expecting instructions in very simple terms. :)

1. I would like to have two header images. one static on left with blog title overlay and another on right with fade in fadeout effect. (If two header image isnt applicable i would be happy with only one header image.

2. I'd like to overlay search box on top of the header image changing the height and the width of the box

3. I'd like to overlay page linkslike about, contact, privacy on top of the header image with custom built background image.

3. I'd like to overlay page menu bar at the bottom of the header image (not below) and each menu item having custom seperation bar.

Thats it.

I guess this is achievable. If anyone can guide me through, it would be a massive help.

For visual convenience I have attached the image of the header segment i'd like to achieve.

30 page views and no reply yet?? :( is this really a big thing am asking for??? I read somewhere in this thread the trick to float button over header image is available only in gold forums. Unfortunately, I dont have funds to donate right now because i'm still toddler in e-marketing and my earning is limited to webhosting at the moment. In all honesty Im sure i will donate as my little business grows bigger than this. But i need help. Trust me.

Thanks in advance,
and Happy Holidays

While I think what you want to achieve is possible, you are going to have to do a lot of work.

having two images - a easy way to do this is have one image where the left part is the same in all images - it gives the illusion of a two part image

The fade in/out is an issue if you want to overlay other things over the images. Atahualpa has the ability to fade in/out but the code overlays the image on top of everything. it's a jQuery plugin called CrossSlide but it seems to have some issues.

using CSS position you can add CSS Selectors and rules to the 'CSS Inserts' option to position most of the rest you want. You should read up on the CSS position syntax and then take a look at the source of a page so you can get get the ID/classes to make up the CSS Selectors

Quote:

Originally Posted by juggledad (Post 52333)

Thank you sir for your concern. I had intuition if anyone be replying my thread it would be you. I've took many advantages from ur guide in the forum. You're the man . And i respect you for whatever you've given to us.

Even though i'm not a donor i personally would like to ask a favour from your side.It sounds awkward when you ask for more and you arent able to give anything in return, that sucks. i just started amazon affiliate program and havent been paid much to donate at this time :( but i'm improving and i know someday i'd be able to donate. and sure will do thats a promise sir!!

At this time i need your help to configure the header area. I installed CrossSide plugin but couldnt figure out what its for. They havent given instructions or a php code to put.

I'm familiar with CSS inserts segment and i have done many things recently using that option in my sample website www.futonsforsale.co.cc . So if u guide me more I'm sure i could position menu bar, search box and add custom buttons on header image. I want to know the rules for positioning and customizing menu bar and search box. Can you give me little time for me doing this?? what you'd have done to achieve fade in fadeout header image without overlaying other items. please!!

I set show search box to yes and disabled the image rotation and fade in fade out but the search box stays behind the image :(

What version of atahualpa and wp?
What is the URL?

Export your settings (ato->export/import settings) and attach them to a reply

wp version: 3.0.1
Atahualpa 3.5.3
Url: www.futonsforsale.co.cc

change teh 'relative' to 'absolute ' and add a 'z-index' to your CSS Insert so you have

HTML Code:

div.searchbox {

    position: absolute;

    right: 25px;

    top: 130px;

    z-index: 99;

}

www.fu...e.co.cc (line 21)

Quote:

Originally Posted by juggledad (Post 52350)

change teh 'relative' to 'absolute ' and add a 'z-index' to your CSS Insert so you have

HTML Code:

div.searchbox {

    position: absolute;

    right: 25px;

    top: 130px;

    z-index: 99;

}

www.fu...e.co.cc (line 21)

Thank you so much teacher. Now I'm able to place searchbox above header image in the custom place. Now my site kinda smells like amazon :). I applied fade in fade out effect with multiple images and search box still on top of the header image :) Thanks a lot.

now i want to make sure if the same trick works with the page menu bar? I want to place one menu on top of the image and another at bottom. Ok i'll try it out and share what i'll come with.