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)
-   -   Trying to stretch logo area background color across the entire screen (http://forum.bytesforall.com/showthread.php?t=10441)

ssoszka Oct 17, 2010 10:55 PM

Trying to stretch logo area background color across the entire screen
 
Hello all,

I'm trying to expand the logo area background color across the entire screen while keeping the current width of the page itself.

Also trying to do the same for the page menu image and also with the footer color.

juggledad Oct 18, 2010 04:54 AM

The logo and menus are part of the container on the page. You could experiment with making the body the full width of the page, and use the left, left inner, right inner and right sidebars and don't put any widget in the left and right sidebars, just use the inner ones.

This way the left and right sidebars would be empty giving you an indent look on both sides

ssoszka Oct 18, 2010 12:23 PM

Interesting I'll play with this, my concern is that the page menu will expand the width of the screen. Is there a way to keep it inline with the center column?

Also how do I get get the logo flush with top of the screen?

Thanks, JD!

UPDATE: I've played with this but I can't seem to get the page to span the the screen width. Which command is it?

juggledad Oct 18, 2010 02:05 PM

Style & configure LAYOUT
If you use %pages or %pages-right it will go to the edge of the page, but you could use %pages-center

ssoszka Oct 21, 2010 11:41 AM

I tried playing with the idea. It didn't work for me tell me more about %pages-center. Where would I use that and what other coding do I need?

Thanks

juggledad Oct 21, 2010 12:09 PM

%pages-center - see 'Configure Header Area'

ssoszka Oct 21, 2010 03:20 PM

Quote:

Originally Posted by juggledad (Post 46912)
%pages-center - see 'Configure Header Area'

Thanks for the reply. Tried that but the page menu is centered but it doesn't stretch across the screen. Check my site out to see what I mean. I have done some custom menu work it...

ALSO a few other issues... How do you get rid of the "default" widgets in the left and right sidebars which I'm using as padding for my site. I don't want anything to show up in the L & R sidebars, I'm using the inner side bars for the side bar function.

Finally, I want to get rid of the white padding around the edge of the page. I can't figure out how to get that done.

Thanks, again.

juggledad Oct 21, 2010 07:36 PM

Quote:

ALSO a few other issues... How do you get rid of the "default" widgets in the left and right sidebars
add a widget there - you can add a text widget and enter ' ' and you will get one space so it won't show

ssoszka Oct 21, 2010 09:14 PM

That works a bit, but still leaves the formatting in the widget present. I'm still dealing with the page menu bar only showing up in the center and then nothing. Also the logo is way off in the left corner.

boulderwrecka Oct 23, 2010 10:30 AM

is there no way to do width and height adjustments to fix this problem? or simply just resize your image and turn off the automatic resize?

lmilesw Oct 23, 2010 03:47 PM

Just my $.02 worth. How about using an image like this screenshot repeated horizontally as a background image, use just the outer sidebars, and a fixed width site? That would give you the blue and brown across the whole screen but your logo and menu would be in the center as it appears you want them. You will have to tweak the positioning of the header and menu to line up properly.

The Boat Galley Oct 26, 2010 10:17 AM

I think I'm trying to do something similar. My site is http://theboatgalley.com and the problem occurs when looking at the site in Firefox or Chrome (haven't checked with other browsers) with a wide-screen monitor and no bookmarks or anything taking up width.

I'm using fluid width at 100%, with a max-width of 1200 to limit resizing. BUT I'd like to eliminate the max-width restriction on just the header, so that the orange bar will go all the way to the left and right sides of the screen, with the content then in the center. A good example of what I want to achieve is to look at Facebook, where their dark blue strip goes across the whole width, with the real content in the center at what I assume are their max-width settings.

I'm attaching screen shots to show what I'm talking about (I cropped them just to show the upper left corner to keep the size reasonable). It's a little hard to see the problem here, because the background for this reply is white and so is the problem area, but just know that there's a white area to the left of the orange bar if you look at my site on a wide-screen monitor over 1200 pixels.

Is there any way to do this?

http://theboatgalley.com/wp-content/...creen-Shot.jpg
http://theboatgalley.com/wp-content/...creen-shot.jpg

lmilesw Oct 26, 2010 01:05 PM

As mentioned in my last post you need to create a background image that matches up with your header colors. Yours would be similar to this screenshot.

The Boat Galley Oct 26, 2010 01:57 PM

But then if I have a fixed width site, won't it show just the left side on smaller screens? Or is there some way to get it to load the center? Or like this site, where the light blue shows all around on a wide screen, but just the white gets re-sized on smaller screens (or a wide screen with bookmarks on the side)?

Thanks for your help, I'm really confused on this and want to have a decent-looking site for large monitors.

lmilesw Oct 26, 2010 02:52 PM

The site by default is centered whether you have a fixed or fluid width. The image I am talking about will just show as much on the left and right of the content area as there is room for it. Here is an Atahualpa site that uses a background image. If you right click on the background and select view image you will see what I mean. The image is repeated horizontally and looks like it is part of the header image but it just matches up with it.


All times are GMT -6. The time now is 03:47 AM.

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