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

 

[Lisa]

.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
background: url("@imagePath/xenforo/misc/forum_bg_middle.png") repeat-x;
}
for the centre image.

(changing out the url to point to wherever you have it)

 

[Shelley]

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.

I'm going to be honest I'm not getting too involved since i see a few issues on what your trying to do. To put it briefly though, if you want to tile the middle area you have to have it repeating on the X & Y axis so insert repeat rather than repeat-x. But again it depends on how you've sliced the imagery but this is the method I have used in the past and it works flawlessy.

 

[fullenchilada]

This is what I have in my Extra.css so far:

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

.nodeList .categoryStrip {
    /* background: url(styles/default/xenforo/forum_li_bg.png) repeat-x scroll center top #F9D9B0!important; */
    background: url(styles/default/xenforo/forum_bg_border_left.png) left center no-repeat, 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_border_right.png) right center no-repeat;
    /* background: url(styles/default/xenforo/forum_li_bg.png) no-repeat scroll center top #07101e !important; */
    border: none;
}
.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
background: url("styles/default/xenforo/forum_bg_middle.png") repeat-x;
}

That didnt help at all. Now the blue background graphic which is supposed to tile is gone. And I still don't know how to properly position the sidebar graphics.