Forum Background Image

[fullenchilada]

Hey you guys,

i have been trying to achieve the following:

https://www.dropbox.com/s/ihgjzq0vnb1jhp6/wso_forum.png

I already cut the image into the individual parts. The top graphics can easily be replaced. However, when it comes to set the background image for the <li> part, I m kinda running into problems that i can't solve on my own.

This is the image I'd like to use:

https://www.dropbox.com/s/yz3thjmjgiaf4t0/forum_li_bg.png?v=0rc-

Help will greatly be appreciated

fully

 

[fullenchilada]

Can't come up with a solution for the stretched version. Guys I need your help again.

 

[TPerry]

Can't come up with a solution for the stretched version. Guys I need your help again.

Add this into where you defined your image (on a new line if in EXTRA.css on in the options box if defined in Styles Properties)
background-size: 100% !important;

 

[Jake Bunce]

Another problem that I was not aware of at first came up:

If you hit the little arrow thingy on the right to get rid of the right side bar everything stretches to the right...even the background image....is there a way to include a "stretched" version for that scenario?

When I collapse your sidebar I see this image staying fixed width and not expanding:

http://www.wildstaronline.de/styles/default/xenforo/forum_li_bg.png

That is the problem, right?

The above image is not made to stretch. Similar to your category headers, this image would need to be sliced up to have two fixed borders and an elastic middle. I suggest modifying the current image so it has no borders and it is set to repeat. Then the borders will need to be placed on the sides as separate elements.

 

[fullenchilada]

Here is what I did:

I sliced up the background image in three pieces:

Border Left: https://www.dropbox.com/s/fdklvgrhnz5xql8/forum_bg_border_left.png?v=0rc-

Border Right: https://www.dropbox.com/s/caligjxxztwh79r/forum_bg_border_right.png?v=0rc-

Background Middle: https://www.dropbox.com/s/gw4rz6jr8nvr646/forum_bg_middle.png?v=0rc-

What exactly do I have to change in the CSS to make it work?

 

[Jake Bunce]

Here is what I did:

I sliced up the background image in three pieces:

Border Left: https://www.dropbox.com/s/fdklvgrhnz5xql8/forum_bg_border_left.png?v=0rc-

Border Right: https://www.dropbox.com/s/caligjxxztwh79r/forum_bg_border_right.png?v=0rc-

Background Middle: https://www.dropbox.com/s/gw4rz6jr8nvr646/forum_bg_middle.png?v=0rc-

What exactly do I have to change in the CSS to make it work?

You can actually try to specify multiple images in the same (current) element:

http://www.css3.info/preview/multiple-backgrounds/

That should allow you to achieve the desired result.

 

[fullenchilada]

My Extra.css looks like this now:

.node.category.level_1.node_2 .categoryText {
background-color: #CC0000;
}

.nodeList .categoryStrip {
    
    background: url(styles/default/xenforo/forum_bg_border_left.png) left center no-repeat, url(styles/default/xenforo/forum_bg_middle.png) left center repeat-x, url(styles/default/xenforo/forum_bg_border_right.png) right center no-repeat;
    color: #6D3F03;
    font-size: 11px;
    margin: 0;
    min-height: 6px;
    padding: 0 0 0 10px !important;
}
.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
    background: url(styles/default/xenforo/forum_bg_border_left.png) left center no-repeat, url(styles/default/xenforo/forum_bg_middle.png) center repeat-x, url(styles/default/xenforo/forum_bg_border_right.png) right center no-repeat;
    border: none;
}

However, if you look at the forum now, you can see that the only border image that gets displayed is the one on the left. The one on the right is practically non existant. The middle background tiles nicely. However it does slip underneath the left border graphic.

 

[fullenchilada]

I tried a few things but nothing is working. Still looks the same.

 

[TPerry]

I tried a few things but nothing is working. Still looks the same.

You didn't fully follow the instructions it appears like;

background: url(styles/default/xenforo/forum_bg_border_left.png), url(styles/default/xenforo/forum_bg_middle.png), url(styles/default/xenforo/forum_bg_border_right.png);


background-position: left center, left center, right center;


background-repeat: no-repeat, repeat-x, no-repeat;

looks more like what they gave as an example on the web page that @Jake Bunce referred you to.

 

[fullenchilada]

You do know that I always appreciate your help Tracy but that did not help me at all.

For me personally there are just way too many classes and css rules and a beginner like me gets lost very easily and fast.

 

[TPerry]

You do know that I always appreciate your help Tracy but that did not help me at all.

For me personally there are just way too many classes and css rules and a beginner like me gets lost very easily and fast.

It's getting lost is easy to do.. and what I gave was a baseline to work with. I've never done that personally. You may want to inquire with @Shelley or @Azhria Lilu as they are really good with styling in CSS (I've tagged them so maybe one of 'em will wonder by here and give you some guidance).

 

[fullenchilada]

Looking forward to their replies...hopefully

 

[fullenchilada]

I have been trying to fix this for a few weeks now and nothing seems to work. CSS is a big pain in the butt for beginners let me tell ya. If @Shelley or @Azhria Lilu could help me, that be really great. I even asked the man behind our theme but apparently he is swamped with work and cannot help.

 

[Lisa]

The background image you want to use doesn't actually match the top part of the node, are you sure you want those corner images go straight down into a thick black line?

 

[fullenchilada]

It is supposed to look like that @Azhria Lilu

https://www.dropbox.com/s/ihgjzq0vnb1jhp6/wso_forum.png

 

[fullenchilada]

I already have everything chopped up:

Left sidebar background image: https://www.dropbox.com/s/fdklvgrhnz5xql8/forum_bg_border_left.png
Middle background image: https://www.dropbox.com/s/gw4rz6jr8nvr646/forum_bg_middle.png
Right sidebar background image: https://www.dropbox.com/s/caligjxxztwh79r/forum_bg_border_right.png

 

[fullenchilada]

@Azhria Lilu Xenforo CSS is slowly becoming a big pain in he butt if you ask me. I tried working with the CSS rules yesterday to see if i can fix it on my own but I m at my wit's end now. There is way too many classes.

 

[TPerry]

@Azhria Lilu Xenforo CSS is slowly becoming a big pain in he butt if you ask me. I tried working with the CSS rules yesterday to see if i can fix it on my own but I m at my wit's end now. There is way too many classes.

Wouldn't it be easier to just use the plain and make it tile able so that it can repeat in the section? I'm on my iPad so I can't check it out right now.

 

[fullenchilada]

I managed to put the blue scanline background underneath the sidebar graphics. However, both sidebar graphics still need to be positioned and the problem remains where you can still see the background image on the sides.

 

[Lisa]

Have you tried using the :before and :after classes? If you look at Xen Admins, you'll see we've used li:before and li:after to make the side shadows on the node, but that's using pure css and no images.

 

[fullenchilada]

Well like I said you guys, the more classes there are, the more confused I get. This is what I tried with the suggestion you made:


.nodeList .node li:before {
background: url(styles/default/xenforo/forum_bg_border_left.png);
content: "";
left: 0;
position: absolute;
right: 0;
top: 0px;
z-index: 1;
}

.nodeText {
background: url(styles/default/xenforo/forum_bg_middle.png) center repeat-x;
}
.nodeList .node li:after {
background: url(styles/default/xenforo/forum_bg_border_right.png);
content: "";
left: 0;
position: absolute;
right: 0;
top: 0px;
z-index: 2;
}

The sidebar graphics didnt show up at all and I dont know how to make the blue background tileable for the middle portion only.