Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Header Image & Fluid Width Question (http://forum.bytesforall.com/showthread.php?t=7296)

Tammy May 26, 2010 02:15 PM

[SOLVED] Header Image & Fluid Width Question
 
I'm having trouble with my header image. I want a fluid width and am having trouble with my header image cooperating. If I set my width for 99%, it all looks great on my new wide monitor, but when I go to check it out on our older monitor, it cuts it off and does not show the whole banner (width wise). Any suggestions on what I am doing wrong?

lmilesw May 26, 2010 07:35 PM

Viewing on a smaller monitor would cut off the image. The image does not resize to fit the size of your monitor you just won't see it all. The only way you can be assured of how much of the banner is visible is the set a fixed width.

Tammy May 27, 2010 01:00 PM

I don't understand the point of a theme being fluid if the images do not resize. It's not really fluid then.

lmilesw May 27, 2010 01:15 PM

That's why I don't use fluid themes. It throws off your image alignments, layout etc. unless you carefully design with that in mind.

Tammy May 27, 2010 02:42 PM

Well, to me, the true definition of a fluid them would be one that is fluid from top to bottom including any images. If not, you're right, you should go with fixed. I have a website, not wordpress, and it is a true fluid site. That is what threw me off with this. I searched high and low and could not find any tips for this at all. I'm not sure if this is standard with all wordpress themes or not. I did figure out a workaround for it, though, so now I seem to have my header (not the rotating header) resizing properly.

lmilesw May 27, 2010 03:29 PM

I would love to see your fluid width site to see it in action.

Tammy May 27, 2010 05:41 PM

Extraordinary in the Ordinary

juggledad May 27, 2010 06:58 PM

clever idea replacing the %image with
HTML Code:

<img src="http://yourdomain.com/wp-content/themes/atahualpa351/images/header/IMG_1496.jpg" width="100%" />

lmilesw May 27, 2010 07:14 PM

Thanks Tammy... That opens up new ideas. This just show we should ALWAYS be learning.

lmilesw May 27, 2010 07:23 PM

I just tried something and it re-sizes header images even with fading turned on. Add the following to CSS Inserts
HTML Code:

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.

juggledad May 28, 2010 04:54 AM

Larry,
were you doing this with the %image or had you replaced that?? When using the %image, there is no <img.. > built, the image is part of the <div...> as a background style
HTML Code:

<div id="imagecontainer" class="header-image-container" style="background: url('http://mydomain.com/wp-content/themes/atahualpa346/images/header/100_4173.jpg') top center no-repeat;">

lmilesw May 28, 2010 05:13 AM

I just left the %image as is and added the CSS. See at my test site.

juggledad May 28, 2010 05:23 AM

Ok, I see now what is happening. It works because of the JAVA script, you are actually resizing the java images, not the original background image. If you set 'Rotate header images with Javascript?' to 0 this does not work.

lmilesw May 28, 2010 05:53 AM

And it was still problematic because of the aspect ratio. You either had to live with "stretchy" image or have the height get shorter. I think designing the header image to allow for being cut off works the best for fluid width.

AaronD May 29, 2010 07:10 PM

Quote:

Originally Posted by Tammy (Post 32977)

Tammy, can you explain how you did that with the header? I'm impressed. The header re-sizes itself depending on the window size.

I'm working on GHSNC.org and trying to figure out how to do that with my header.

Using Atahualpa 3.5.1, WP 2.9.2

Tammy May 29, 2010 09:32 PM

Thanks, everyone. I'm glad it's something that others will find useful, too.

Aaron, I went to the theme options and put this in the configure header area:

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

instead of %image.

AaronD May 29, 2010 10:23 PM

Quote:

Originally Posted by Tammy (Post 33159)
Thanks, everyone. I'm glad it's something that others will find useful, too.

Aaron, I went to the theme options and put this in the configure header area:

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

instead of %image.

Thanks for the reply, Tammy.

I am not quite sure what you did though. I went to my Configure Header Area, and the code I have at the moment is (emphasis added) :

Code:

%logo %pages %cats
<!-- To remove the ad OR HEADER PHOTO altogether, start removing here... -->
<div style="position:absolute;top:30px;right:0px;width:100%;">
<!-- Put the ad code BELOW this (and remove the sample text if there is any) -->
%image
<!-- Put the ad code ABOVE this -->
</div>
<!-- End removing the ad here -->

If I replace the part in red with your code snippet, the header image disappears entirely. :confused:

Tammy May 29, 2010 11:11 PM

Aaron, are you changing the code to reflect your domain name and the location of your header image?

lmilesw May 30, 2010 06:14 AM

AaronD... The theme settings you are using includeds a background image for the gray stripes that gives the illusion the menu bar spans the whole page. Because of that you can't use a dynamically resizing image in the header. You would need to use and of the other three themes settings.

AaronD May 30, 2010 09:53 AM

Thank you for the replies. I really appreciate the help and direction.


All times are GMT -6. The time now is 01:28 AM.

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