Changing background colour of columns
-
Using CSS, would it be possible to change the background colour of just the column space on both sides of the main body??
The blog I need help with is: (visible only to logged in users)
-
-
CSS is a styling document, nothing else. You cannot include javascript, flash, HTML or any other sort of scripting in it. All it is is instructions to the browser for positioning and styling the elements of the HTML (markup).
Secondly, direct embedding of flash, javascript, and other forms of scripting is not allowed here for security concerns.
In most cases you can use the gigya shortcode to display flash in posts, pages and in text widgets, but you cannot upload the flash here. It would have to be hosted an online hosting service that allows flash and then that information put into the gigya shortcode.
-
Changing the background color outside the bounds of the content area is a little tricky with Bueno since the “container” goes full width to allow the black bar at the top to extend to the edges of the browser window. A couple options:
1. limit the width of the container to the width of the main content area and then assign a background color to it.
2. Assign a background color to the body selector and let everything else sort of float above it. Preview the following to see how this would look.
body { background-color: #DDDDDD; } -
Thankyou for the flash info, very helpful.
In terms of the background of columns, this is what I’m trying to achieve: http://www.mtvcareers.co.uk/home.asp
where there are two blank columns either side of the body and then have the body split into a left and right column and then a main body. Would this be possible with bueno? Or would I have to start from scratch?
-
See how far this gets you. I just tossed in a color so you could see what it would look like. It’s time to visit the dreamtime, so I won’t be around for a while.
#container { background: none repeat scroll 0 0 #EEDDBB; margin-left: auto; margin-right: auto; width: 990px; } #description { padding-left: 10px; width: 600px; } #topsearch { padding-right: 10px; } -
Thanks TSP, that works a treat. Instead of changing the background colour of body is there a way of changing the background colour of the gaps either side. It’s just because I want the body background to be white so I need a different colour on the outer columns so you can see the outline of the page. If that’s not possible, is it possible to put a border around the body just to separate it from the outer columns?
Thanks again,
J -
Just apply whatever background color you want to the body selector. The container is white right now so the color in the body selector will only show on the sides outside of the container area.
body { background-color: #CC0000; }You might also want to change the font color on the date since it is currently white.
.post .date { color: #CC0000; } -
Brilliant! Thanks so much for the help. I’ve run into one more problem as I’ve set the an opacity value in the css of the #container which is working perfectly in firefox but no in Internet Explorer. I set the filter alpha code so it will work in both browsers however in IE it doesn’t include the header and the body of text in the opacity. I did then try and then post the filter alpha code in the specific parts as in #header but it didn’t work. Any advice?
-
Firefox and Safari are sort of creating your “intent” while IE is taking things literally.
Your header image is done as a JPG with a white background. You need to redo it and have a transparent background and save it as a PNG. That will also make it much sharper since JPG is really aimed at photographic images not graphic images.
On the post background, do the following.
.post { background-color: none; }After the above changes, IE should have no issues (famous last words).
-
Hey, I’ve had to change the name of the blog as we were having some trademark issues. I followed your advice by uploading an image with a transparent background but when I did, wordpress filled it in black automatically. Is there something I am doing wrong?
J
-
You have to create a PNG image that is the exact size that is needed otherwise when wordpress “crops” it, they turn it into a standard JPG and it goes black since JPGs do not support transparency.
-
I followed your instructions and made it the exact size of the header and saved as a PNG. It works perfectly on Moz but IE still wont recognise it.
This is all my CSS code so far:
#topsearch {
padding-right:10px;
display:none;
}#logo {
display:none;
}#pagenav {
position:relative;
top:65px;
left:-250px;
}#header {
position:relative;
top:-100px;
}#header-image img {
border:medium none;
}#container {
position:relative;
background:none repeat scroll 0 0 #ffffff;
filter:alpha(opacity=80);
opacity:0.8;
margin-left:auto;
margin-right:auto;
width:990px;
}#text-4 {
position:absolute;
top:5px;
right:5px;
}#description {
padding-left:10px;
width:600px;
}body {
background-image:url(‘http://stampthewax.files.wordpress.com/2011/04/getting9.jpg’);
background-attachment:fixed;
}.post .date {
background:none repeat scroll 0 0 transparent;
color:#000000;
}.post {
background-color:none;
} -
-
-
Was the header image the exact size required for the theme before you uploaded it?
When I download your header image, it does not show as having a transparent background. It shows as having a solid white background.
-
Also when creating the image, you have to choose to have the transparent background before saving it. I’m not sure what program you are using for image editing, but PNG’s can either have solid backgrounds or transparent.
-
Ahh completely my fault, just hadn’t unchecked background in photoshop (lack of sleep haa)
I check on IE and it’s see through, thankyou so much sacred.
Can I get the body to appear transparent in IE like it is in Mozilla?
Also is there anyway I can hyperlink the header to the homepage, or even better could i create a menu on the pag nav to go to the home page?
-
The interesting thing is, Opera, Safari and Firefox “intuit” what you wanted to do and will make the background of the header image transparent, but IE (strange beast that it is) will not.
For IE (which irritates the heck out of web designers) it does not recognize or understand transparency in CSS, so you have to do an alpha channel transparency thing. You have to put the following into the CSS where you have declared the transparency and then change the “60” value to match the transparency you have set.
filter:alpha(opacity=60); -
That’s really strange, surely enough web designers could convince IE programmers to just adapt that. Must be so frustrating.
Hmm I’ve done that in the #container:
#container {
position:relative;
background:none repeat scroll 0 0 #ffffff;
filter:alpha(opacity=80);
opacity:0.8;
margin-left:auto;
margin-right:auto;
width:990px;
}and #main:
#main {
filter:alpha(opacity=80);
}but it still isn’t working. Am I just choosing the wrong #name?
- The topic ‘Changing background colour of columns’ is closed to new replies.
WordPress.com Forums 