vb5 temp fix for custom forum icons(any size)

[IggyP]

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!

/* 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!

[Glenn Vergara]

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 {

/* 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]

thanks again...just edited in the last typo

[IggyP]

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:

 .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]

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:

/* 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]

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]

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]

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]

The drop down box only shows the "Default" style

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

[osras1]

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!

/* 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]

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]

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:

/* 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:

/* 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]

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]

Add the ones in red.

.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]

Perfect..Thanks so much!

[webmastersun]

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.