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 »

Fluid, Rotating Headers - yet another thread


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 Aug 30, 2010, 09:08 AM
thetravelchronicle
 
65 posts · May 2009
Having given up on Themeframe for the foreseeable future, I downloaded the latest version of Atahualpa. Within a day of retracing steps I was reminded of that enduring frustration: Not having a fluid header that would rotate images.

The most amazing new developments seem to be in the simple solutions discussed in the thread:

[SOLVED] Header Image & Fluid Width Question

In which Tammy showed us how to add the following to the "configure header area":

<img src="http://yourdomain.com/wp-content/themes/atahualpa349/images/header/yourimage.gif" width="100%">

Any chance that this bit of info, one line for each image, could be incorporated into the rotate function? If so, where?

Coming at it from another direction, it seemed like lmilesw had it solved when he wrote:

div.header-image-container img {
width:100%;
height:100%;
}

"If you leave the height blank the image will re-size and retain the aspect ratio instead of squeezing and stretching the image."

This works perfectly other than the full height static image that is displayed behind the rotating images (which you can see on my test site, assuming you don't have your monitor set to a width of 2048 or more):

http://www.kenyatravelchronicle.com/

(If I remove %image from the Configure Header Area there is no image at all, but if there could be some way to avoid having it retrieve "The rotating (or static) header image," but just one or the other... OK, I'm rambling.)

Any further ideas on this illusive item?
  #2  
Old Aug 30, 2010, 02:24 PM
lmilesw's Avatar
lmilesw
 
10,082 posts · Jul 2009
Central New York State USA
If you add the following to ATO>Add HTML/CSS Inserts>CSS Inserts it will get rid of the background image.
HTML Code:
div.header-image-container {background-image:none !important;}
So what you will have in ATO>Add HTML/CSS Inserts>CSS Inserts is
HTML Code:
div.header-image-container img {
width:100%;
}
AND
HTML Code:
div.header-image-container {background-image:none !important;}
__________________
~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 Aug 30, 2010, 05:36 PM
thetravelchronicle
 
65 posts · May 2009
It's so close to perfect, and I'm so thrilled to get past this lingering loose end, that I almost can't bring myself to mention that one last thing.
But here goes.
Although there is no background image, the height of the area remains the same, creating a lot of white space between the image and the text on narrower screens, or partially minimized screens.
The "Header Image: Height" setting seems to require an absolute value, but if anything else ever occurs to you, please pass it along.
Meanwhile, thanks for getting it plenty close enough, it's my favorite solution so far.
  #4  
Old Aug 31, 2010, 04:00 PM
thetravelchronicle
 
65 posts · May 2009
I spoke too soon. With all the white space below the images, my in-house site tester didn't realize there was any text below the header on her smaller monitor, and just clicked on the menu buttons rather than scroll down. Of course, the next screen accessed by the menu button didn't have any apparent text either, etc.

Unless there is a way to get rid of the white space where the background image used to be, I guess the next step would be to give up on the rotating header and see if there is a way to put rotating images in the top of the fluid center container.
I guess I'm off to see if that has ever been discussed on the forum.
  #5  
Old Sep 2, 2010, 12:09 PM
thetravelchronicle
 
65 posts · May 2009
In my quixotic quest to solve the fluid rotating header quandary I have arrived at a solution to the excessive white space on narrow screens problem which is either a bold new graphic statement or a blatant kluge.

So unique is this approach that anyone with a vertical monitor dimension of 768px or less will only know there is a website below the header by the presence of a scroll bar.

Since we can't clog up the forum with aesthetic critiques, if anyone would care to both observe the "mondo header" phenomenon and perhaps provide some feedback, here's the link: http://www.kenyatravelchronicle.com/contact-page
  #6  
Old Sep 2, 2010, 12:27 PM
lmilesw's Avatar
lmilesw
 
10,082 posts · Jul 2009
Central New York State USA
One thing I would suggest is taking out the background image (the gray bars) in ATO>Body, Text & Links.
__________________
~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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Cache and rotating images headers! Ponics Header configuration & styling 8 Dec 31, 2010 02:30 AM
3.5.1: Header images always aligning left when rotating headers are on hlietz Header configuration & styling 1 Jul 14, 2010 01:49 PM
[SOLVED] Ordering the rotating headers reklaw Header configuration & styling 13 Jun 14, 2010 10:51 AM
Fixing center column and sidebar in FLUID Layout thriftyal Center area post/pages 2 Jun 13, 2010 05:22 AM
[SOLVED] Using fluid layout..min setting does not seem to take ksmith101 Header configuration & styling 2 Mar 7, 2010 08:36 AM


All times are GMT -6. The time now is 02:11 AM.


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