10 replies to this topic

[ilonka65]

Hello I have made some customizations to the feature area; it now has less height and fits all the way to the sides of the page, except there is a very fine white border remaining which is not visible on the png file, can anyone help with this? The other customizations I wish to make are: - remove the padding between the main nav bar & feature image (so the nav bar sits directly under the feature image) and bring the main nav bar all the way to the edge of the page - remove the space created by the home page "content area". I want to add a google map here on rhs and 'call to action' contact form on lhs (do I need to remove this empty space to do that or put it in this empty space?) URL:

Please Login or Register to see this Hidden Content

Thanks in advance!

[Jenny]

You should download FireBug (

Please Login or Register to see this Hidden Content

) to help you determine which CSS changes to make on your site. You will find it to be a very useful tool for CSS customizations.

I don't see a white border, not even a faint one. Maybe I'm just missing it?

To make the changes you're wanting, you can add the following CSS to your custom CSS code:

Please Login or Register to see this Hidden Content

[ilonka65]

Hi Jenny Thank you, that helped to get the nav bar snuggled right up against the feature image...now I would like it to go all the way to the left edge of the page... I have been using firebug to do the changes made so far but some things are still way over my head! Maybe its my browser, but there's definitely still a tiny amount of white showing on lhs & rhs of feature image.

[ilonka65]

Hello Jenny One more thing.... every page except for the home page has the feature image misaligned to the left

[catrina]

I only see white space on the right side of the feature image when I view it Firefox. The image needs to be wider to fill the extra white space.

[Jenny]

This should get your nav moved all the way to the left:

Please Login or Register to see this Hidden Content

To make the image fit, you need to make the image bigger. Two things:

1. The reason you're seeing a faint white line is because you're putting a 959px image into a 960px area.
2. The reason your page has a different width depending upon the page is because that's how you have it setup (with custom CSS). To fix it, use this in your custom CSS:

Please Login or Register to see this Hidden Content

Alternatively, instead of fixing your image to make it 960px, you should be able to just change the code above to width: 959px; and that will hopefully solve both issues at once. (Note: if you do this, you will need to remove #feature_slider {margin-left: -10px;} from your custom CSS).

[ilonka65]

Hello simple_mama I'm still having issues with this... I checked the size using pixel grabber and it says it 980 px, so I made the feature image bigger in photoshop. This is my custom code so far: body{} #feature-area, .feature-wrap, #feature_slider .fmedia, #feature_slider .fcontent, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 231px; } #feature-footer {display:none;} #feature_slider{width:980px;} #feature { margin: 0 !important; } #page, #dynamic-content { min-height: 0; } #boxes .dcol-pad { background: none repeat scroll 0 0 #F7F7F7; } The web url is

Please Login or Register to see this Hidden Content

You can see the image is cut off inside this area as its not trimmed that close to the logo and text in photoshop

[ilonka65]

I've got it working better, but its still like a patch-up on what it should be, this is evident by the fact that the actual image is not centered correctly; the logo & text on the jpeg is the same distance from left edge as text is on right edge, but that's not the case once uploaded.... and there's a strip of darker black on rhs of image showing how far out the image is from being centered (I presume). Here is my code so far... body{} #feature-area, .feature-wrap, #feature_slider .fmedia, #feature_slider .fcontent, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 231px; } #feature-footer {display:none;} #feature_slider{width:980px;margin-left: -10px;} #feature { margin: 0 !important; } #page, #dynamic-content { min-height: 0; } #boxes .dcol-pad { background: none repeat scroll 0 0 #F7F7F7; } #primary-nav ul.main-nav { margin-left: -10px; } The page width is 960px and I have remade the image to be 962px, but obviously that's still not quite the right solution

[ilonka65]

Hello simple_mama, In response to your comment below , I tried the code below that and now the pages other than the home page seem ok, but the home page is not: 2. The reason your page has a different width depending upon the page is because that's how you have it setup (with custom CSS). To fix it, use this in your custom CSS: .fixed_width #page, .fixed_width #footer, .canvas #page-canvas { width: 960px; } Alternatively, instead of fixing your image to make it 960px, you should be able to just change the code above to width: 959px; and that will hopefully solve both issues at once. (Note: if you do this, you will need to remove #feature_slider {margin-left: -10px;} from your custom CSS). My Code: body{} #feature-area, .feature-wrap, #feature_slider .fmedia, #feature_slider .fcontent, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 231px; } #feature-footer {display:none;} #feature_slider{width:980px;} #feature { margin: 0 !important; } #page, #dynamic-content { min-height: 0; } #boxes .dcol-pad { background: none repeat scroll 0 0 #F7F7F7; } #primary-nav ul.main-nav { margin-left: -10px; } .fixed_width #page, .fixed_width #footer, .canvas #page-canvas { width: 960px; }

[Jenny]

I'm confused as to what you still need fixed but here are a couple things I noticed.

Your feature image is coded with:

Please Login or Register to see this Hidden Content

But your site width is smaller than that. That's why it is showing larger. You need to correct the width in your PageLines settings.

Remove this:

Please Login or Register to see this Hidden Content

..to fix your navigation bar.

If there's anything else, or if I misread your questions, please let us know what you need.

[ilonka65]

that worked...thank you