Forum Background Image

fullenchilada

fullenchilada

Member
Sort by date Sort by votes
I sure can Brogan :-)

Here you can see the individual categories (WildStar - Neuigkeiten, Allgemeines, Videos etc.) with their blue-ish background. Well I d like to replace that with the following graphic:

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

In Firebug that is the part of the code I d like to link the background image with:

<li class="node forum level_2 node_8">

So instead of having the dull blue background, I'd like to have to nice graphic for each category.
 
Upvote 0 Downvote
Tracy Perry said:
I noticed that was a xenStyles style. Are you still under your 12 month support and asked the theme provider?

@Brogan, I think he' s wanting that background to replace the existing category color .
View attachment 48710
Click to expand...

Well my theme provider referred me back here because he did not have the time unfortuantely.

Tracy Perry said:
http://xenforo.com/community/threads/forum-strips-title-description-background.52261/#post-559523
Instead of using background-color: use the background: url(path_to_your_image.png) norepeat;
Click to expand...

There are so many css files and I have absolutely no clue which one I have to put the code into. I also do not know exactly how the css code should look like to achieve it.
 
Upvote 0 Downvote
I dont have the class categorystrip as you can see in my source code. So the css rules posted are not gonna change anything in my forum Brogan.

Code: 
<fieldset>
<ol id="forums" class="nodeList sectionMain">
<li id="wildstar-online-de-intern.24" class="node category level_1 node_24">
<li id="wildstar.3" class="node category level_1 node_3">
<div class="xeno_cat_top_center">
<div class="xeno_node_middle">
<ol class="nodeList">
<li class="node forum level_2 node_8">
<li class="node forum level_2 node_11">
<li class="node forum level_2 node_14">
<li class="node forum level_2 node_20">
<li class="node forum level_2 node_21">
<li class="node forum level_2 node_25">
<li class="node forum level_2 node_9">
</ol>
</div>
<div class="xeno_cat_bottom_center">
<span class="tlc"></span>
<span class="trc"></span>
<span class="blc"></span>
<span class="brc"></span>
</li>
<li id="w-online-de.1" class="node category level_1 node_1">
<li id="community.5" class="node category level_1 node_5">
</ol>
</fieldset>
 
Upvote 0 Downvote
fullenchilada said:
I dont have the class categorystrip as you can see in my source code. So the css rules posted are not gonna change anything in my forum Brogan.

Code: 
<fieldset>
<ol id="forums" class="nodeList sectionMain">
<li id="wildstar-online-de-intern.24" class="node category level_1 node_24">
<li id="wildstar.3" class="node category level_1 node_3">
<div class="xeno_cat_top_center">
Click to expand...

Are you modding the CSS directly or are you using EXTRA.css like it was designed to be used? Have you even tried putting and working with the example in the link given into your EXTRA.css to see if it modifies it?
Chrome developer shows the below segment when I use it on your category strip
Code: 
.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
padding: 0;
}
.nodeList .first {
background-color: rgb(13, 32, 63);
border-top-color: rgb(28, 50, 86);
border-right-color: rgb(28, 50, 86);
border-bottom-color: rgb(5, 11, 22);
border-left-color: rgb(28, 50, 86);
}
.nodeList .alt1 {
background-color: rgb(13, 32, 63);
border-top: 1px solid rgb(28, 50, 86);
border-right: 1px solid rgb(28, 50, 86);
border-bottom: 1px solid rgb(5, 11, 22);
border-left: 1px solid rgb(28, 50, 86);
-xenforo-nomatch-background: rgb(48, 48, 48) url('styles/resurgent/xenforo/node-row.png') repeat-x top left;
}

Just doing some playing from Chrome Developer resulted in this (it was just real quick)
example.webp , so I have a feeling that you are not quite sure where you are supposed to be editing at.
 
Last edited:
Upvote 0 Downvote
fullenchilada said:
I m using Firefox and even tried the code you just posted Tracy & put it into the EXTRA.css but nothing shows up. Everything stays the same.
Click to expand...

Don' t use my code... that is what is already being shown by yours. Use the example code that @Brogan pointed you to and if nothing else, place an !important before the ";" divider for the background
Try putting the below in your EXTRA.css (with the image pointing at your background you want to use)
Code: 
.nodeList .categoryStrip {
    background: url("path/to/your/image.png") repeat-x scroll center top #F9D9B0!important;
    border: 1px solid #4d4944 !important;
    border-radius: 4px 4px 4px 4px;
    border-top: 1px solid #F9D9B0;
    color: #6D3F03;
    font-size: 11px;
    margin: 0;
    min-height: 6px;
    padding: 0 0 0 10px !important;
}
and play with it from there. You will probably have to play with the stuff after the image defininition
 
Upvote 0 Downvote
This gets the image onto my system... but will have to play with it some to make it expand to fill the entire thing
Code: 
 .node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
    background: url("images/test.png") no-repeat scroll center top  #F9D9B0!important;
    }
example.webp
 
Upvote 0 Downvote
Well we are slowly getting there Tracy :)

I still need to get rid of those blue borders and have everything indented on the left and on the right. And the headlines "WildStar", "W*Online DE" etc. need to be lowered a bit.
 
Last edited:
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Saarbruecken
  • Solved
XF 2.2 How to show a forum / thread / post on a Xenforo's page
Replies
1
Views
945
Saarbruecken
Saarbruecken
S
  • Solved
XF 2.2 Forum Template Background Colour (Between The Banner Image And The Header Tabs)
Replies
3
Views
951
SaveTheWest
S
Supergrobi
  • Question Question
XF 2.2 Uploading image attachments via URL (HTTP) leads to "Uploaded file is too large"
Replies
8
Views
2K
Supergrobi
Supergrobi
Ablac
  • Question Question
XF 2.1 Background Image Scroll then Fixed?
Replies
1
Views
694
Ablac
Ablac
P
  • Question Question
XF 2.1 Tabs become 4 spaces after upgrade from 2 to 2.1?
Replies
6
Views
645
Joe Kuhn
Joe Kuhn
Top Bottom