[Site Builder] How to change Icons of Channels " Vbulletin 5.3.0"

[[email protected]]

hi ,
i want to change the first icons of vbulletin 5.3.0 to some icons likes


Normal


i need it Different like :

[glennrocksvb]

https://www.vbulletin.com/forum/forum/vbulletin-5-connect/vbulletin-5-connect-questions-problems-troubleshooting/vbulletin-5-tutorials/4028327-vb5-temp-fix-for-custom-forum-icons-any-size?p=4172330#post4172330

[[email protected]]

https://www.vbulletin.com/forum/foru...30#post4172330

Thank you brother but this way.
Its working with new posts and old posts.
But i need help to change icons like a pic.
Just look at atachments you will understand what i want and thank yoi in advanve!

[glennrocksvb]

I understand what you want. For each icon, you have to have one for when a forum has new posts and another when a forum has no new posts. This way user can distinguish quickly from the icons if a forum has new posts or not.

[[email protected]]

I want Each channels has its own expressive Icon , rather than unified icons. i don't need two icons (new post and old posts). i need many icons for each channels

[glennrocksvb]

Right. That's why I linked you to post #11 which has the CSS code for specifying different icon per forum

[[email protected]]

Thank you i will test it Manday.
I sign up in your forum.
I will back

[[email protected]]

hello
my code source is :

 <tr class="forum-item main new forum-item" id="forum55" data-channel-id="55" data-lastcontent="1497212377" data-readtime="0"> <td class="cell-forum"> <div class="forum-wrapper"> <span class="icon"></span> <div class="forum-info forum-info-has-rss"> <a href="https://www.xxxxxxx.com/forum/leisure-section/introduce-yourself" class="forum-title">Introduce yourself</a> </div>

i used code under but its not work perfect

/* forum icon for forums with old posts (default) */
#forum55 .cell-forum .icon {
    background: transparent url("/images/forums/55.png") no-repeat;
}
/* forum icon for forums with new posts */
#forum55.new .cell-forum .icon {
    background: transparent url("/images/forums/55.png") no-repeat;
}

the problem is my icon and channels its not good look at :



i tried to make it a best but i can't i used this code :

/* introduce-yourself */
.forum-list-container .forum-item[data-channel-id="55"] .cell-forum .icon {
background: transparent url("/images/forums/55.png") no-repeat;


/* forum icon for introduce-yourself channel with old posts */
width: 48px; /* icon width */
height: 48px; /* icon height */
}
.forum-list-container .forum-item[data-channel-id="55"] .cell-forum .icon {
background: transparent url("/images/forums/55.png") no-repeat;


/* forum icon for introduce-yourself channel with new posts */
width: 48px; /* icon width */
height: 48px; /* icon height */
}
.forum-list-container .forum-item[data-channel-id="55"] .cell-forum > .forum-wrapper > .forum-info {
padding-{vb:stylevar left}: 50px;



/* icon width + 8 */
}
.forum55 .forum-item .cell-forum .forum-desc {
margin-{vb:stylevar left}: 50px;



/* icon width + 8 */
margin-top: -28px;


/* 17 - icon height */
}

i want it like