Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

non-scrolling header area in foreground not background


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Oct 28, 2010, 10:23 PM
striped aardvark
 
45 posts · Mar 2010
dundas, ontario, canada
i've been having the best time re-creating a clunky old non-WP site i designed a couple of years back, but now using atahualpa instead. LOVE THIS THEME! i never use any other theme, you just DON'T HAVE TO

i have a feeling what i'm asking may not be possible.. can't hurt to ask if anyone has any thoughts. i have a thin bar across the top of the page, which needs to stretch across the entire screen. i've put it into the background, and it looks perfect. i only wonder if there is a way to have a non-scrolling version of it in the top foreground instead of the background? (when i set it to non-scrolling in the background, of course the rest of the page scrolls all over it, which isn't the idea!)

anyway : here's the page : http://blove.ca/2011

any thoughts, please do let me know!
  #2  
Old Oct 28, 2010, 11:02 PM
lmilesw's Avatar
lmilesw
 
10,054 posts · Jul 2009
Central New York State USA
I'm not sure how this will work in all browsers but here is some VERY QUICK code that I hacked together to show concept. Here are the steps.
  • In ATO>Body, Text & Links put padding-top to the width you want your top bar plus any space you want between it an the text below.
  • In ATO>Style & edit Header Area put the following with the text you want.
    HTML Code:
    <div id="topbanner">This is the top banner</div>
  • Put the following in ATO>Add HTML/CSS Inserts>CSS Inserts changing the colors and margins etc. as needed. I chose very large widths and negative margins to cover all screen sizes.
    HTML Code:
    div#topbanner {
    height:50px;
    background-color:#000;
    width:5000px;
    margin-left:-800px;
    padding-left:1000px;
    position:fixed;
    z-index:99;
    margin-top:-50px;}
    The padding right is just so the text would be seen.
I thought that perhaps this could get you thinking. You could of course use an image instead.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Oct 29, 2010, 07:23 AM
striped aardvark
 
45 posts · Mar 2010
dundas, ontario, canada
oh thank-you, that makes perfect sense! i can't wait to start fiddling with it

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
HowTo: Main area scrolling Tamas Center area post/pages 16 Dec 27, 2012 11:19 PM
[SOLVED] Header Area Background Jurgen Estanislao Header configuration & styling 21 Aug 17, 2010 10:22 PM
[SOLVED] Removing White Background in Header Area Netforest Header configuration & styling 2 Oct 23, 2009 01:15 PM
Background Images in Header Area dwbaylor Header configuration & styling 3 May 3, 2009 04:48 PM
Putting a image background in the header's logo area kirinafa Header configuration & styling 2 Feb 18, 2009 04:08 PM


All times are GMT -6. The time now is 09:20 PM.


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