How to reference forum IDs in additional.css

[ExoticAgenda]

As the title suggests, I am trying to reference the forum ID in additional.css so that i can apply some custom background to different forums.

[kh99]

Well, you can't (I don't think) because when the CSS template is rendered it's running the css.php script and the forum isn't available. You may be able to edit the headinclude_bottom template to include different CSS files depending on the forumid (although I'm not sure what variable you'd check).

Or maybe you could put your CSS in <style type="text/css">...</style> tags in the template you're interested in changing (like SHOWTHREAD).

[TheLastSuperman]

^ Yeap kh99, I've had to do that on a few custom styles now, I try to avoid it but due to how some CSS is called (Profiles in Dark Styles more so) it seems that is required on occasion.

You should be able to check the the forumid using:

<vb:if condition="$GLOBAL[forumid] == x">

Where x needs to be replaced w/ the forumid#

In some templates

<vb:if condition="$forum[forumid] == x">

Is not registered although

<vb:if condition="$thread[forumid] == x">

Would work in some instances however Global should always work ;).

Edit: OR actually you could simply whip up a plugin using the parse_templates hook location to render this in headinclude_bottom... something to the effect of:

if ($vbulletin->userinfo['usergroupid'] == '1'){
$forumbg = '<style type="text/css">
html {
background: rgb(0, 0, 0) url(images/mybackgroundfolder/blackbackground1.jpg) center fixed;
overflow:scroll;
}
</style>';
} else {
$forum = '<style type="text/css">
html {
background: rgb(0, 0, 0) url(images/mybackgroundfolder/blackbackground2.jpg) center fixed;
overflow:scroll;
}
</style>';
}

$template_hook[headinclude_bottom_css] .= $forumbg;

That's a rough example, it starts and shows background1 to guests otherwise (it uses the terminology else) it shows background2 to everyone else... you could also adjust that part to check for forumid etc etc :cool:. *Some adjustment will be required if you use this for example you may not want to use the css definition html, you may choose to overwrite something else instead and if you have any issues overwriting add in !important to the definition end ;).

[ExoticAgenda]

Ok, I was told that it needs to be references in the additional.css, basically I am trying to add images to the forum categories just like this website. Do you have any info regarding that? I am on 4.1.7 as well Thanks

[tonjohn]

Inspecting the example you gave with Firebug, you see the following (one forum in the list used as an example...


<li class="forumbit_post old L2" id="forum61">
<div class="forumrow table">
<div class="foruminfo td">
<img alt="" id="forum_statusicon_61" class="forumicon" src="images/statusicon/forum_old-48.png">
<div class="forumdata">
<div class="datacontainer">
<div class="titleline">
<h2 class="forumtitle"><a href="http://www.luxury4play.com/ferrari/">Ferrari</a></h2>
<span class="viewing">(23 Viewing)</span>
</div>







</div>
</div>
</div>

<h4 class="nocss_label">Forum Actions:</h4>

<ul class="forumactionlinks td">
<li class="forumactionlink rsslink"><a title="View this forum's RSS feed" href="http://www.luxury4play.com/external.php?type=RSS2&amp;forumids=61" rel="nofollow">View this forum's RSS feed</a></li>

</ul>

<h4 class="nocss_label">Forum Statistics:</h4>
<ul class="forumstats td">
<li>Threads: 2,941</li>
<li>Posts: 61,038</li>
</ul>
<div class="forumlastpost td">
<h4 class="lastpostlabel">Last Post:</h4>
<div>

<p class="lastposttitle">
<img border="0" alt="" src="images/icons/icon1.png">

<a class="threadtitle" href="http://www.luxury4play.com/ferrari/93512-ferraris-sema.html">The Ferraris of SEMA</a>
<a href="http://www.luxury4play.com/ferrari/93512-ferraris-sema-post1567167.html#post1567167"><img alt="Go to last post" src="images/buttons/lastpost-right.png" title="Go to last post"></a>
</p>
<div class="lastpostby">

by <div class="popupmenu memberaction" id="yui-gen12">
<a title="Phaster is online now" href="http://www.luxury4play.com/members/phaster.html" class="username online "><strong>Phaster</strong></a>

</div>


</div>
<p class="lastpostdate">Yesterday, <span class="time">11:23 PM</span></p>

</div>
</div>

</div>

</li>


The corresponding CSS to draw the car logo is:

#forum61 .foruminfo {
background-image: url("/images/l4p/forumheads/Ferrari.jpg") !important;
background-position: right center;
background-repeat: no-repeat;
}

The CSS doesn't need to compute the forumids. Rather, you simply need to create an id in your CSS file to correspond to every forum you wish to show a unique image for.

You then edit the correct templates (forumhome_forumit_), adding id=forum$forum[forumid] (not exactly sure) to the <li> tag.

[ExoticAgenda]

omg thank you! i think i love you haha, ive been trying to figure this out for several days