whitespace WordPress
- SOLVED
HI
How can I adjust the container space so that the whitespace area of the site does not allow the blue strips to extend to the edge of the window? Client would now like to have a fixed width with a separate colour for the white space area.
the site is
translationdoctor.co.uk/wp
it is a wordpress theme 'Stirling' which can use a css overwrite.
Answers (7)
Francisco Javier Carazo Gil answers:
Try to change this:
.top-aside, header, .banner, .banner-slider, .small_banner, #content-container, .footer-callout, footer {
min-width:960px;
}
To:
.top-aside, header, .banner, .small_banner, #content-container, .footer-callout, footer {
min-width:960px;
}
.banner-slider{
width:960px;
}
Francisco Javier Carazo Gil comments:
Overwrite this: http://translationdoctor.co.uk/wp/wp-content/themes/Sterling/style.css
Francisco Javier Carazo Gil comments:
Send me login details via PM and I can do it directly.
Michael Caputo answers:
To primary-royal-blue.css
add this:
.top-aside,
.banner,
.small_banner,
.banner-slider,
footer{margin:0 auto; width: 1010px;}
mariobarba comments:
Hi
this kin-of worked but there are some subtle grey grads which continue into the white space aswell. they are showing up now
And the
see http://translationdoctor.co.uk/wp/
Michael Caputo comments:
To get rid of the gradients, you'll need to add a container div inside of the body tag.
so in your header where it says <body> add <div class="sitecontainer">
and just before the closing </body> tag in your footer, add </div>.
then add this to your css:
.sitecontainer{margin:0 auto; width: 1010px;}
mariobarba comments:
which file do I add <div class="sitecontainer">
Michael Caputo comments:
probably your header.php,
the closing div would go in the footer.php.
I dont know for sure because i'm not familiar with your theme, but this is general practice. Make sure to make a backup of the files before making any changes in case you loose data.
Sabby Sam answers:
Hi,
add this code in your theme style.css file
.top-aside, .banner, .small_banner, .banner-slider, footer {
margin: auto !important;
width: 1024px !important;;
padding: 10px !important;;
}
header {
width: 970px !important;
}
and you are done.
If you think if you want the footer to be in middle then here is the code.
footer {
width: 964px;
margin:auto;
padding-left:12px;
}
.tt-overlay {
background-image:none !important;
}
mariobarba comments:
this kind-of worked but there are some subtle grey grads which continue into the white space aswell. they are showing up now
See http://translationdoctor.co.uk/wp/
Sabby Sam comments:
Add this code in style.css
.shadow.top,.shadow.bottom, .top-aside-shadow {
background-image: none !important;
}
mariobarba comments:
the coding for the shadow problem does not seem to work. Can you check it?
Sabby Sam comments:
Hi,
add this code as well in your style.css
#content-container {
width: 970px !important;
margin: auto !important;;
}
Pali Madra answers:
Hi,
Please change this code in style.css (line 148)
.top-aside, header, .banner, .banner-slider, .small_banner, #content-container, .footer-callout, footer {
min-width:960px;
}
to
.top-aside, header, .banner, .banner-slider, .small_banner, #content-container, .footer-callout, footer {
width:960px;
margin: 0 auto;
padding: 10px;
}
Also in line 5023 of style.css the following needs to be changed.
footer {
clear:both;
font-size:13px;
overflow:visible;
padding-top:30px;
position:relative;
width:100%;
z-index:1;
}
footer {
clear:both;
font-size:13px;
overflow:visible;
padding-top:30px;
position:relative;
width:960px;
z-index:1;
}
Doing this might not fix the issue fully but you should get the design as per the screenshot attached.
This is so because there is an image (http://translationdoctor.co.uk/wp/wp-content/themes/Sterling/images/banner-overlays/banner-noise.png) which is 1178x56px and it is being used as a background for the main content and since it is wider that the width that is being set some parts of the image (though white but with some grey and it does not look professional) would be visible.
To solve this the image in question would have to be edited. This image also affects the footer part of the page.
If you need help in this please let me know.
mariobarba comments:
it has almost worked but created a bit of a glitch in the RHS of the blue areas. Also the blue areas are not wide enough
harry hor answers:
please add below code to "http://translationdoctor.co.uk/wp/wp-content/themes/Sterling/style.css"
.top-aside,
.banner,
.small_banner,
.banner-slider,
footer{margin:0 auto; width: 999px;}
mariobarba comments:
Hi
this kind-of worked but there are some subtle grey grads which continue into the white space aswell. they are showing up now
see http://translationdoctor.co.uk/wp/
harry hor comments:
<blockquote>Add this code in style.css
.shadow.top,.shadow.bottom {
width: 99% !important;
}
</blockquote>
harry hor comments:
or you can do like this, please add below code to style.css
.shadow.bottom, .top-aside-shadow{left: 0;}
mariobarba comments:
HI the coding for fixing the shadow does not seem to work. Can you double check it?
Merne Asplund answers:
I would add a site-wrapper that contains everything within the width you wish it to be, however, due to the rest of the CSS and markup it will be a costly change. It would be the correct change.