vb5 temp fix for custom forum icons(any size)

[Mark.B]

Please start your own thread with full details of the problem.

[Danloona]

hello , i have a problem , with subforums ,same as here

idk how i need to check ,,,my code in css.additional.css id:

/* start custom forum icons */
/* Forums */
.forum-list-container .forum-item .cell-forum .icon {
background: transparent url("/icons/oldpostic.png") no-repeat; /* forum icon for forums with old posts */
width: 42px; /* icon width */
height: 42px; /* icon height */
}
.forum-list-container .forum-item.new .cell-forum .icon {
background: transparent url("/icons/newpostic.png") no-repeat; /* forum icon for forums with new posts */
width: 42px; /* 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 {
.forum-list-container .forum-item.sub.new .cell-forum .icon
padding-{vb:stylevar left}: 53px; /* icon width + 13 */
}
/* Responsive */
[USER="3396"]media[/USER] only screen and (max-width: 768px) {
.forum-list-container .forum-item.sub .cell-forum .icon 
.forum-list-container .forum-item .cell-forum .forum-desc {
margin-{vb:stylevar left}: 48px; /* icon width + 8 */
}
.forum-list-container .subforum-list > td {
.forum-list-container .forum-item.sub .cell-forum .forum-desc
padding-{vb:stylevar left}: 73px; /* icon width + 33 */
}
}
/* end custom forum icons */ 

[IggyP]

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.

yes this would be very good...gotta be in jira somewhere, anyone have the #?

glenn is pretty awesome but even after he gave me the custom code for my site, i can see now it is displaying differently in windows 10 vs win7, this needs a proper fix

[blrjohn07]

Glenn Vergara

My forum is on vb cloud and version 5.1.9

I have tried adding above codes. But this is what I am getting.



My icon size is

Width : 48 px
Height : 48 px

Can you please help me to achieve this in my forum ?

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

[GamesItalia]

Perfect..Thanks so much!

[glennrocksvb]

Add the ones in red.

.forum-list-container .forum-item.new .cell-forum .icon[COLOR=#FF0000], .forum-list-container .forum-item.sub.new .cell-forum .icon[/COLOR] {
  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[COLOR=#FF0000], .forum-list-container .forum-item.sub .cell-forum .icon[/COLOR] {
    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[COLOR=#FF0000], .forum-list-container .forum-item.sub .cell-forum .forum-desc[/COLOR] {
    margin-left: 48px;
    margin-top: -25px;
}

[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

[glennrocksvb]

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[COLOR=#0000FF][data-channel-id="114"][/COLOR] .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[COLOR=#0000FF][data-channel-id="114"][/COLOR] .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) */
[COLOR=#FF0000]#forum114[/COLOR] .cell-forum .icon {
    background: transparent url("http://your/path/to/the/default/icon.png") no-repeat;
}
/* forum icon for forums with new posts */
[COLOR=#FF0000]#forum114[/COLOR].new .cell-forum .icon {
    background: transparent url("http://your/path/to/the/new/icon.png") no-repeat;
}

[glennrocksvb]

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.

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

[Wayne Luke]

The drop down box only shows the "Default" style

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

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

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]

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 ?