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)
-   -   Header image keeps center as page shrinks, but logo does not (http://forum.bytesforall.com/showthread.php?t=12636)

eleanorb Feb 4, 2011 05:04 PM

Header image keeps center as page shrinks, but logo does not
 
I have set my header image to align top center, so if I resize the page to be smaller (in my browser), the image shifts with the page so I always see the center-most section. However, the logo being displayed above it does not behave this way. It seems to be tied to the upper left, so as the window shrinks, we see less and less of the right-hand part of the logo.

Any way to make the logo also hang in the center?

juggledad Feb 4, 2011 05:21 PM

Versions? URL?

eleanorb Feb 4, 2011 05:35 PM

WordPress 3.0.4. Atahualpa 3.5.3
Still in development, olderwomensnetwork.org/ownwp

lmilesw Feb 4, 2011 10:29 PM

You have a full width logo so it will "stick" its left side to the container it's in. I would suggest setting the layout width to 1120px.

eleanorb Feb 5, 2011 06:45 AM

I don't understand why you suggest this, but I tried changing the Layout Max Width from 1100 px to 1120 px, and I can't see that it makes any difference. See what you think (I've left the setting at 1120). Eleanor

lmilesw Feb 5, 2011 06:54 AM

Sorry... I meant to say set the layout to a fixed width of 1120px instead of a %. That way when you resize your window the layout will stay as you intend. My personal preference is to always use a static width so the page will look the same no matter what size the window is set at. That does mean I set my width to no more that about 1000px. In your case I said 1120px as your image is 1100px wide and you have 10px padding on each side. You could reduce the size of you logo image to say 980px and set the static width to 1000px.

eleanorb Feb 5, 2011 07:04 AM

Yes, but then anyone with available screen space of less than 1120px will get the right-hand side of the entire site chopped off, and will have to be continually scrolling to read the posts! The previous method just restricts the visibility of the logo, with all other elements scaling as necessary. For instance, with fluid setting, on a small screen the center portion of the header image shows, so why isn't it possible to get the center portion of the logo to show, also? Thanks, Eleanor

juggledad Feb 5, 2011 07:19 AM

why don't you use the logo image as your header image, then it will be cut off from both sides when the page is resized. Then make the minimum width of the page the width of the texe in the image.

If you want header images, you can add a new widget area and use something like teh dynamic headers plugin

eleanorb Feb 5, 2011 07:31 AM

That sounds pretty complicated, and likely to develop other problems. Is the consensus then, that there is no direct way to get the logo to behave like the image header?

lmilesw Feb 5, 2011 07:34 AM

The logo area and image area are produced in different ways which is why the images act as thay do.

One way to accomplish what you want is to create a background image of just the blue pattern that is behind your title and put that in ATO>Style & edit Header Area>Logo Area Styling as the background with code like below.
HTML Code:

background: url("http://path to image") no-repeat top left;
Then put an image of just your text in the logo box and style it in Logo Image Styling by giving it a width and an auto left and right margins like below.
HTML Code:

width: 780px;
margin-left: auto;
margint-right: auto;

You may want to use other CSS for spacing above and below.


All times are GMT -6. The time now is 04:23 PM.

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