Quote:
Originally Posted by tricksodave
Can anyone help with this, I'd really like to get vb4 to look like our old forum. Need to learn how to put the image in on the left also.
Regards,
Dave
|
Well you can try something simple i.e.
Edit additional.css and try something along the lines of:
Code:
.forumhead {
background: #1a9fda url(images/buttons/home.png) no-repeat;
}
^ Rough Example and that also removes the ability to define a image background for forumhead, meaning that using this method shown above you can't specify a alternate background i.e. a Gradient image as shown in your attachment.
Another method is editing the templates themselves that contain the forumhead <div> tags i.e.
Edit forumhome_forumbit_level1_nopost and find:
Code:
<li class="forumbit_nopost {vb:raw forum.statusicon} L1" id="cat{vb:raw forum.forumid}">
<div class="forumhead foruminfo L1 collapse">
<h2>
<span class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></span>
<span class="forumthreadpost">{vb:rawphrase threads_posts} </span>
<span class="forumlastpost">{vb:rawphrase last_post}</span>
<vb:if condition="!$show['collapsable_forums']">
Add the code
shown in blue:
Code:
<li class="forumbit_nopost {vb:raw forum.statusicon} L1" id="cat{vb:raw forum.forumid}">
<div class="forumhead foruminfo L1 collapse">
<h2>
<span class="forumimage"><img src="images/buttons/home.png" alt="{vb:raw forum.title}" /></span>
<span class="forumtitle"><a href="{vb:link forum, {vb:raw forum}}">{vb:raw forum.title}</a></span>
<span class="forumthreadpost">{vb:rawphrase threads_posts} </span>
<span class="forumlastpost">{vb:rawphrase last_post}</span>
<vb:if condition="!$show['collapsable_forums']">
Now edit additional.css and add:
Code:
.forumimage {
padding-left:5px;
}
.forumbit_nopost .forumhead .forumtitle a {
margin-left: 5px;
}
^ And that method allows you to still define a gradient image background on forumhead and also inserts your image (*Adjust the forumhead background/colors via the stylevars system respectively and swap out the filename home.png in the code shown and link directly to your small & cropped white fish image and call it a day!)

.