Announcement

**Glenn Vergara** · Wed 9th Apr '14, 12:31pm

Thanks IggyP for sharing this.

As we discussed earlier, I don't know why without width and height in the rule for new posts (2nd rule) didn't work for you. Those are not required as they should inherit the size from the default (1st rule)

BTW. I had a typo in my original post. I missed the {

Code:

/* Responsive */
@media only screen and (max-width: 768px) {
    .forum-list-container .forum-item .cell-forum .forum-desc {
        margin-{vb:stylevar left}: 48px; /* icon width + 8 */
    }
    .forum-list-container .subforum-list > td {
        padding-{vb:stylevar left}: 73px; /* icon width + 33 */
    }
}

For reference, this was originally from this post - http://www.vbulletin.com/forum/forum...29#post4027029

**IggyP** · Wed 9th Apr '14, 12:51pm

Originally posted by Glenn Vergara View Post

Thanks IggyP for sharing this.

As we discussed earlier, I don't know why without width and height in the rule for new posts (2nd rule) didn't work for you. Those are not required as they should inherit the size from the default (1st rule)

regarding this section:

Code:

 .forum-list-container .forum-item .cell-forum .icon {
background: transparent url("http://www.your_imagelink1.com") no-repeat; /* forum icon for forums with old posts */
width: 40px; /* icon width */
height: 42px; /* icon height */
}
.forum-list-container .forum-item.new .cell-forum .icon {
background: transparent url("http://www.your_imagelink2.com") no-repeat;
/* forum icon for forums with new posts */
width: 40px; /* icon width */
height: 42px; /* icon height */
}

on my test site it was not necessary the part in red.....i think it must have something to do with the custom style on my main site but i double verified that was required for that style

**Glenn Vergara** · Fri 18th Apr '14, 12:20pm

If different icon is desired for each forum, you can use the channel id of the forum to target specific forum and apply desired icon. No need to modify the display_Forums_item template to add a class suffixed by channelid as what was done here. Simply add this in css_additional.css template:

Code:

/* forum icon for forums with old posts (default) */
.forum-list-container .forum-item[data-channel-id="114"] .cell-forum .icon {
    background: transparent url("http://your/path/to/the/default/icon.png") no-repeat;
}
/* forum icon for forums with new posts */
.forum-list-container .forum-item.new[data-channel-id="114"] .cell-forum .icon {
    background: transparent url("http://your/path/to/the/new/icon.png") no-repeat;
}

Change 114 to the actual channelid of the target forum found in the data-channel-id attribute in the corresponding <tr> element of the forum in the HTML source. Then repeat for each forum.

**Graham Walters** · Sun 8th Jun '14, 2:25am

This no longer works with 5.1.2.A

Tried it on all of the style by adding to each styles css as well as the default

***EDIT***

Worked on a fresh install, so thats good.

One major issue, any CSS added to site builder only acts on the default style, the other style have to have it added vis the acp as normal, is this a bug ?

**Wayne Luke** · Tue 10th Jun '14, 11:28am

Originally posted by Graham Walters View Post

This no longer works with 5.1.2.A

Tried it on all of the style by adding to each styles css as well as the default

***EDIT***

Worked on a fresh install, so thats good.

One major issue, any CSS added to site builder only acts on the default style, the other style have to have it added vis the acp as normal, is this a bug ?

Choose the appropriate style you want to change using the Dropdown on the CSS tab. The CSS should apply to that style. If not, then it is a bug and you need to enter it in to JIRA.

**Graham Walters** · Tue 10th Jun '14, 11:59am

Originally posted by Wayne Luke View Post

Choose the appropriate style you want to change using the Dropdown on the CSS tab. The CSS should apply to that style. If not, then it is a bug and you need to enter it in to JIRA.

The drop down box only shows the "Default" style

**Wayne Luke** · Thu 12th Jun '14, 4:05pm

Originally posted by Graham Walters View Post

The drop down box only shows the "Default" style

Right on it. Trying to get that changed so themes are more useful.

**osras1** · Fri 15th Aug '14, 5:43pm

Originally posted by IggyP View Post

big thanks to Glenn Vergara for this code...now we dont need to wait for a custom sprite editor to get larger and better forum icons!

wanted to start this in a clean topic because this is a pretty exciting customization ability we were kinda bummed to have to wait for and i think alot of people will like this. goes in css_additional.css..

works with responsive!

he has even put instructions into the code so you know how to adjust the spacing for your icon...so easy!

Code:

/* start custom forum icons */
/* Forums */
.forum-list-container .forum-item .cell-forum .icon {
background: transparent url("http://www.your_imagelink1.com") no-repeat; /* forum icon for forums with old posts */
width: 40px; /* icon width */
height: 42px; /* icon height */
}
.forum-list-container .forum-item.new .cell-forum .icon {
background: transparent url("http://www.your_imagelink2.com") no-repeat; /* forum icon for forums with new posts */
width: 40px; /* icon width */
height: 42px; /* icon height */
}
.forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
padding-{vb:stylevar left}: 48px; /* icon width + 8 */
}
.forum-list-container .forum-item .cell-forum .forum-desc {
margin-{vb:stylevar left}: 48px; /* icon width + 8 */
margin-top: -25px; /* 17 - icon height */
}
/* Sub Forums */
.forum-list-container .subforum-list > td {
padding-{vb:stylevar left}: 53px; /* icon width + 13 */
}
/* Responsive */
@media only screen and (max-width: 768px) {
.forum-list-container .forum-item .cell-forum .forum-desc {
margin-{vb:stylevar left}: 48px; /* icon width + 8 */
}
.forum-list-container .subforum-list > td {
padding-{vb:stylevar left}: 73px; /* icon width + 33 */
}
}
/* end custom forum icons */

enjoy!

is this where you put the image?
background: transparent url("http://www.your_imagelink2.com") no-repeat; /* forum icon for forums with new posts */

**Glenn Vergara** · Wed 27th Aug '14, 5:48pm

Originally posted by osras1 View Post

is this where you put the image?
background: transparent url("http://www.your_imagelink2.com") no-repeat; /* forum icon for forums with new posts */

Yes. If the icons are located within your forum, you can use relative path. Otherwise, use absolute path.

**Glenn Vergara** · Mon 13th Oct '14, 3:02pm

Originally posted by Glenn Vergara View Post

If different icon is desired for each forum, you can use the channel id of the forum to target specific forum and apply desired icon. No need to modify the display_Forums_item template to add a class suffixed by channelid as what was done here. Simply add this in css_additional.css template:

Code:

/* forum icon for forums with old posts (default) */
.forum-list-container .forum-item[data-channel-id="114"] .cell-forum .icon {
background: transparent url("http://your/path/to/the/default/icon.png") no-repeat;
}
/* forum icon for forums with new posts */
.forum-list-container .forum-item.new[data-channel-id="114"] .cell-forum .icon {
background: transparent url("http://your/path/to/the/new/icon.png") no-repeat;
}

Change 114 to the actual channelid of the target forum found in the data-channel-id attribute in the corresponding <tr> element of the forum in the HTML source. Then repeat for each forum.

Starting 5.1.1, channel id was added to the forum row TR tag. The id is in the format forum<forumid>. The CSS should now look like this:

Code:

/* forum icon for forums with old posts (default) */
#forum114 .cell-forum .icon {
    background: transparent url("http://your/path/to/the/default/icon.png") no-repeat;
}
/* forum icon for forums with new posts */
#forum114.new .cell-forum .icon {
    background: transparent url("http://your/path/to/the/new/icon.png") no-repeat;
}

**GamesItalia** · Tue 23rd Jun '15, 11:59am

Hi, i have a problem with this tutorial, in the forum home page i have this and it's ok

but in the subforum i have this:

In the subforum it's not similar at home page, how resolve?
Thanks and Best Regards

**Glenn Vergara** · Tue 23rd Jun '15, 12:46pm

Add the ones in red.

Code:

.forum-list-container .forum-item.new .cell-forum .icon, .forum-list-container .forum-item.sub.new .cell-forum .icon {
  background: transparent url("http://www.gameinvaders.it/community/forumicons/new.png") no-repeat;
  width: 42px;
  height: 42px;
}
.forum-list-container .forum-item .cell-forum .icon, .forum-list-container .forum-item.sub .cell-forum .icon {
    background: transparent url("http://www.gameinvaders.it/community/forumicons/old.png") no-repeat;
    width: 42px;
    height: 42px;
}
.forum-list-container .forum-item .cell-forum .forum-desc, .forum-list-container .forum-item.sub .cell-forum .forum-desc {
    margin-left: 48px;
    margin-top: -25px;
}

**GamesItalia** · Tue 23rd Jun '15, 11:14pm

Perfect..Thanks so much!

**webmastersun** · Mon 19th Oct '15, 4:39pm

I thought this came from an option in forum manage like vB4x, If using CSS to control images then it would not be more convenient for users.

Announcement

vb5 temp fix for custom forum icons(any size)

vb5 temp fix for custom forum icons(any size)

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Related Topics