Recent Topics

Want to change general background of pixelgreen skin...

Started by on Oct 21, 2010 – Contents updated: Oct 21, 2010

Oct 21, 2010 20:53    

My b2evolution Version: Not Entered

Sorry if this is a dumb question - I'm new to b2ev, and didn't find exactly the answer to my question by searching the forums first...

What I want to do is to put a repeating image for the background of the blog site...not the post area, header, footer, whatever - the "dead space" on either side of the content area.

It looks like there's a repeating image at the top of the main content frame (a fade), and then it's just white.

I tried changing some background options in the style.css for the skin...but didn't seem to find anything pertaining to the dead space. And I couldn't find a #FFFFFF anyway, which is kind of what I thought I'd see.

If anyone could help point me to where I need to edit something to put a background image up in my dead space I would greatly appreciate it!


My version is 3.3.3 - not sure where I update that for the bit at the top of the post.

Oct 21, 2010 21:49

#wrap {
background:url("img/bg.jpg") repeat-x scroll 0 0 #FFFFFF;}

style.css (line 20)

Oct 21, 2010 21:53

Mine doesn't look like looks like this:

#wrap {
margin: 0; padding: 5px;
font: normal 73%/1.5em 'Trebuchet MS', Tahoma, sans-serif;
color: #555;
background: #FFF url('img/bg.jpg') repeat-x;
text-align: center;

...but let me play with it. Thanks!

Oct 21, 2010 21:56

Oh, actually I had tried that one - it only changes the background in the header area...

Oct 23, 2010 03:58

okay, i got what you mean. the background image is one single image for the whole page, so; for you to have a separate background image for your "dead space", you have to;
a.) split header and content into two,
b.) use your background image for the "dead space" for page-#wrap- and overwrite header's bg.

i ll go with b since it makes more sense.

so make these changes:

1-change your page -#wrap- backgorund,
2- remove weird 5px padding, since it leaves gaps on all sides:

#wrap {
background:url("") repeat scroll 0 0 transparent;}/* apply your own background for the "dead space"

2- use that default bg image for header assuming you want to keep it;
3- change your header height to how much of the default bg image you want to keep:

header {
background:url("img/bg.jpg") repeat-x scroll left top #FFFFFF;
height:101px;}/*101px is makes the green line at the header bottom visible, increase the height to make more of the bg image available, like the gradient that follows that green line}

Other than that;

i see that your top menu is screwed.. it is unnecessarily positioned go on and remove/replace it better.

div.top_menu ul {
padding-top:20px !important; /*because, this gets overwritten down the file*/


Oct 23, 2010 17:42

Thanks, I'll play with that!

Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.