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 »

Help me achieve this in my header section


  #1  
Old Dec 16, 2010, 11:13 PM
pranzyt
 
21 posts · Jun 2010
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
Attached Thumbnails
Click image for larger version

Name:	Untitled-1.gif
Views:	784
Size:	15.8 KB
ID:	967  

Last edited by pranzyt; Dec 17, 2010 at 04:58 AM.
  #2  
Old Dec 17, 2010, 04:27 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Dec 17, 2010, 05:22 AM
pranzyt
 
21 posts · Jun 2010
Quote:
Originally Posted by juggledad
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
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!!

Last edited by pranzyt; Dec 17, 2010 at 05:30 AM.
  #4  
Old Dec 17, 2010, 06:06 AM
pranzyt
 
21 posts · Jun 2010
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
  #5  
Old Dec 17, 2010, 06:21 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version of atahualpa and wp?
What is the URL?

Export your settings (ato->export/import settings) and attach them to a reply
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Dec 17, 2010, 06:25 AM
pranzyt
 
21 posts · Jun 2010
wp version: 3.0.1
Atahualpa 3.5.3
Url: www.futonsforsale.co.cc
Attached Files
File Type: txt ata-wwwfutonsforsalecocc-20101217.txt (21.5 KB, 834 views)
  #7  
Old Dec 17, 2010, 01:39 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Dec 18, 2010, 10:52 PM
pranzyt
 
21 posts · Jun 2010
Quote:
Originally Posted by juggledad
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Can I achieve this with widgets? Or do I need custom coding - can pay for help. nickcroker Sidebars & Widgets 9 Dec 4, 2010 03:15 AM
can I achieve this with atahualpa tlck9 Page & Category Menu Bars 3 Oct 8, 2010 03:18 AM
how to achieve the effect of the center post scrolling up out of the bottom of screen ameliecafe Center area post/pages 1 Apr 3, 2010 04:26 AM
Where to add HTML META Tag on the Header section GILSAN Header configuration & styling 1 Mar 23, 2010 03:07 PM
Changing the rss and comments icons in the header section barefaced RSS, Feeds & Subscribing 0 Mar 14, 2009 08:52 AM


All times are GMT -6. The time now is 07:09 AM.


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