Caleeco 19 Posted August 29, 2020 Share Posted August 29, 2020 Hello, I am using the Fluent theme, and am trying to set the icons of each forum in 4.4.10. The theme interface allows you to edit the Category icon using the line of code below: .cForumList .cForumRow[data-categoryid="4"] .cForumTitle::before {content: "\f1c3";} However, this does not work for forums contained in each category. I presume i need to reference the data-forumid instead. But my random code editing doesn't seem to take effect! I can do a live edit using 'inspect element' and can change the font awesome icon, but cant figure out how to do it in the theme. I also tried following the guidance found here, but it doesn't seem to take effect: Any help is appreciated Cheers Caleeco Link to comment Share on other sites More sharing options...
S!r.ReaDy 120 Posted August 29, 2020 Share Posted August 29, 2020 Post a screenshot with the live edited content we could understand better. Most themes has the fa-comments as default. If that is what you want to edit. 1 Link to comment Share on other sites More sharing options...
Caleeco 19 Posted August 29, 2020 Author Share Posted August 29, 2020 (edited) Hello @S!r.ReaDy Thanks for the reply. I have attached a picture to illustrate what I mean. LEFT: Existing Theme with updated FA icons using custom CSS MIDDLE: New Theme RIGHT: The Icons I'm trying to edit (example on 1st subforum) So this line: .cForumList .cForumRow[data-categoryid="4"] .cForumTitle::before {content: "\f1c3";} Will edit the SOCIAL & RANDOM category. But I'm trying to edit the subforums items also Many Thanks Caleeco Edited August 29, 2020 by Caleeco Forgot to attach image Link to comment Share on other sites More sharing options...
S!r.ReaDy 120 Posted August 29, 2020 Share Posted August 29, 2020 The ones on left look like images, for FA use this. [data-forumid="2"] .fa-comments:before { content: "\f236"; } 1 Link to comment Share on other sites More sharing options...
Caleeco 19 Posted August 29, 2020 Author Share Posted August 29, 2020 Hello, All the screenshots are from the same website. The ones on the left are Font Awesome, just and older version. This is the custom CSS. /*== [Forums] ==*/ span.ipsItemStatus.ipsItemStatus_large[data-forumid='7'] > i:before{ content: "\f197" } /*War Room*/ span.ipsItemStatus.ipsItemStatus_large[data-forumid='8'] > i:before{ content: "\f234" } /*Introduce Yourself*/ span.ipsItemStatus.ipsItemStatus_large[data-forumid='3'] > i:before{ content: "\f0e3" } /*Boardroom*/ span.ipsItemStatus.ipsItemStatus_large[data-forumid='2'] > i:before{ content: "\f1cb" } /*Test Forum*/ span.ipsItemStatus.ipsItemStatus_large[data-forumid='10'] > i:before{ content: "\f074" } /*Random*/ But when i change to the new THEME - FLUENT. The icons revert back to their defaults & the custom CCS is not applied. So im not sure why that would be, unless there is some CSS somewhere overriding the custom CSS? Many Thanks Caleeco Link to comment Share on other sites More sharing options...
S!r.ReaDy 120 Posted August 29, 2020 Share Posted August 29, 2020 I tested the code above for both 4.4 and 4.5 in default and custom theme, and both worked for me. I can check it for you with access. Link to comment Share on other sites More sharing options...
The Grim Reaper 143 Posted August 29, 2020 Share Posted August 29, 2020 Use this code in your theme in forum - index - forumRow afer <span class='ipsItemStatus ipsItemStatus_large cForumIcon_password {{if !\IPS\forums\Topic::containerUnread( $forum ) && !$forum->redirect_on}}ipsItemStatus_read{{endif}}' {template="formattedInlineStyle" params="$forum" app="core" group="global" location="front"}> {{if $forum->loggedInMemberHasPasswordAccess()}} <i class='fa fa-unlock'> </i> {{else}} <i class='fa fa-lock'> </i> {{endif}} </span> and before : {{endif}} {{if !$forum->redirect_on and \IPS\forums\Topic::containerUnread( $forum ) AND \IPS\Member::loggedIn()->member_id}} </a> {{else}} <div class="junky-forum-icon"> {{if $forum->id == 259 }} <i class="fas fa-hamburger"> </i> {{elseif $forum->id == 2 }} <i class="fas fa-newspaper"> </i> {{elseif $forum->id == 7872 }} <i class="fab fa-steam-symbol"> </i> {{elseif $forum->id == 17512 }} <i class="fas fa-eye"> </i> {{elseif $forum->id == 3}} <i class="fas fa-users-cog"> </i> {{elseif $forum->id == 4}} <i class="fas fa-hands-helping"> </i> {{elseif $forum->id == 7163}} <i class="fas fa-comment-dollar"> </i> {{elseif $forum->id == 7735}} <i class="fas fa-grin-stars"> </i> {{elseif $forum->id == 1013 || $forum->id == 3365 || $forum->id == 11}} <i class="fab fa-steam-symbol"> </i> {{elseif $forum->id == 3365}} <i class="icon ion-logo-game"> </i> {{elseif $forum->id == 11}} <i class="icon ion-logo-game"> </i> {{elseif $forum->id == 1030}} <i class="fab fa-teamspeak"> </i> {{elseif $forum->id == 16701}} <i class="fas fa-cubes"> </i> {{elseif $forum->id == 29}} <i class="fab fa-adobe"> </i> {{elseif $forum->id == 28}} <i class="fas fa-comment-alt"> </i> {{elseif $forum->id == 31}} <i class="fas fa-tags"> </i> {{elseif $forum->id == 30}} <i class="fas fa-microchip"> </i> {{elseif $forum->id == 15459}} <i class="fas fa-trash"> </i> {{else}} <i class="far fa-comment-alt"> </i> {{endif}} </div> {{endif}} .junky-forum-icon { width: 40px; height: 40px; line-height: 40px; text-align: left; font-size: 10px; color: #857a88; margin-left: 10px; background: transparent; border: none; box-shadow: none; border-radius: 0; border-right: 2px solid #413d44; } .junky-forum-icon i { font-size: 24px; } edit your category id and your font awesome image the final code should look like this : {{elseif $forum->password}} <span class='ipsItemStatus ipsItemStatus_large cForumIcon_password {{if !\IPS\forums\Topic::containerUnread( $forum ) && !$forum->redirect_on}}ipsItemStatus_read{{endif}}' {template="formattedInlineStyle" params="$forum" app="core" group="global" location="front"}> {{if $forum->loggedInMemberHasPasswordAccess()}} <i class='fa fa-unlock'> </i> {{else}} <i class='fa fa-lock'> </i> {{endif}} </span> {{else}} <div class="junky-forum-icon"> {{if $forum->id == 259 }} <i class="fas fa-hamburger"> </i> {{elseif $forum->id == 2 }} <i class="fas fa-newspaper"> </i> {{elseif $forum->id == 7872 }} <i class="fab fa-steam-symbol"> </i> {{elseif $forum->id == 17512 }} <i class="fas fa-eye"> </i> {{elseif $forum->id == 3}} <i class="fas fa-users-cog"> </i> {{elseif $forum->id == 4}} <i class="fas fa-hands-helping"> </i> {{elseif $forum->id == 7163}} <i class="fas fa-comment-dollar"> </i> {{elseif $forum->id == 7735}} <i class="fas fa-grin-stars"> </i> {{elseif $forum->id == 1013 || $forum->id == 3365 || $forum->id == 11}} <i class="fab fa-steam-symbol"> </i> {{elseif $forum->id == 3365}} <i class="icon ion-logo-game"> </i> {{elseif $forum->id == 11}} <i class="icon ion-logo-game"> </i> {{elseif $forum->id == 1030}} <i class="fab fa-teamspeak"> </i> {{elseif $forum->id == 16701}} <i class="fas fa-cubes"> </i> {{elseif $forum->id == 29}} <i class="fab fa-adobe"> </i> {{elseif $forum->id == 28}} <i class="fas fa-comment-alt"> </i> {{elseif $forum->id == 31}} <i class="fas fa-tags"> </i> {{elseif $forum->id == 30}} <i class="fas fa-microchip"> </i> {{elseif $forum->id == 15459}} <i class="fas fa-trash"> </i> {{else}} <i class="far fa-comment-alt"> </i> {{endif}} </div> {{endif}} {{endif}} {{if !$forum->redirect_on and \IPS\forums\Topic::containerUnread( $forum ) AND \IPS\Member::loggedIn()->member_id}} </a> {{endif}} tested on this theme : Link to comment Share on other sites More sharing options...
Recommended Posts