Announcement

Collapse
No announcement yet.

Custom Forum Icons

Collapse
X
Collapse
First Prev Next Last
 
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
    #1

    Custom Forum Icons

    Add to css_additional.css


    Code:
    /* start custom forum icons */

/* forum icon for forums with new posts */
#[B]forum16[/B] .cell-forum .icon {
    background: transparent url("/[B]images[/B]/[B]CustomIcons/BOSnew.png[/B]") no-repeat;
}
#[B]forum16[/B] .forum-list-container .forum-item.new .cell-forum .icon, .forum-list-container .forum-item.sub.new .cell-forum .icon {
    background: transparent url("/[B]images/CustomIcons/BOSnew16.png[/B]") no-repeat;
  width: 16px;
  height: 16px;
}

/* end custom forum icons */
    In this example, I was asked by members of Forum 16 to use a unique forum icon.
    images/CustomIcons is the location and BOSnew16.png is the new icon.

    You can see how the forum default Triangle icon gets replaced by the custom green circle icon.

    Click image for larger version Name: Clipboard01.jpg Views: 2613 Size: 3.7 KB ID: 995
    Tags: None
    • Top
    • Translate
    • Bottom
    • Likes 2
    #2
    Nice! I've been looking for a feature like this. I'll implement it somewhere down the line, though, need to find appropriate icons for all the different forums that aren't copyrighted or anything. Thanks for sharing.
    • Top
    • Translate
    • Bottom

    Comment

      #3
      This is an upgrade which replaces the above code.
      It allows for the use of 2 replacement icons, one for read topics, one for unread topics, whereas the previous code was always set to unread.
      Thanks goes out to Glen for helping me overcome the issues that were plaguing me on this. The solution was so simple.

      You will need to set 2 sets of values for the Forum ID you want affected, the image location and the replacement icons. By default this is 32x32. One unread, one read(greyed out).

      Code:
      /* Start custom forum icons v2 */
#[COLOR=#008000][B]forum16[/B][/COLOR].forum-item .cell-forum .icon {
    background: transparent url("[COLOR=#0000FF][B]/images/CustomIcons[/B][/COLOR]/[COLOR=#800080][B]BOS32.png[/B][/COLOR]") no-repeat;
}

#[COLOR=#008000][B]forum16[/B][/COLOR].forum-item.new .cell-forum .icon {
    background: transparent url("[COLOR=#0000FF][B]/images/CustomIcons[/B][/COLOR]/[COLOR=#800080][B]BOS32-new.png[/B][/COLOR]") no-repeat;
}
/* End custom forum icons v2 */
      In this example, you can see how the forum default icons, triangles, remain the same except on the targeted forum, which becomes a circle.
      If all topics have been read, the icon is grey, but if new topics exist, the icons turn green.
      Click image for larger version Name: Clipboard01.jpg Views: 379 Size: 12.6 KB ID: 1418

      Additional forums with ID's and icons can be added.
      This is all done without changing the LTR/RTL sprite set.
      • Top
      • Translate
      • Bottom

      Comment

        #4
        I attempted to get this to work and had some issues.
        Click image for larger version Name: Screen Shot 2016-10-18 at 2.44.25 PM.png Views: 929 Size: 45.1 KB ID: 1679

        Notice how it overlays over the section.

        Also, is it possible to enable this for ALL categories, rather than editing the code per category?

        I included height and width and that's how it cause it to overlay. If I didn't have those codes, it would be the default forum icon size.

        Thanks!
        • Top
        • Translate
        • Bottom

        Comment

          #5
          Try this:

          http://www.vbulletin.com/forum/forum...icons-any-size

          The CSS code has comments to indicate how much padding or margin to use based on the width/height of the icon used.

          If you want to use the same icon for all the forums, then use:

          Code:
          .forum-list-container .forum-item .cell-forum .icon {
          Otherwise, use:

          Code:
          #forum[COLOR=#FF0000]XXX[/COLOR] .cell-forum .icon {

          Btw, you will need to change all instances of:

          Code:
          {vb:stylevar left}
          to:

          Code:
          left
          because stylevars don't seem to be working in css_additional anymore like they used to.
          Buy me a coffeePayPal QR Code
          My Amazon Affiliate Link ​
          Fast vBulletin VPS Host:
          This site is hosted by IONOS
          • Top
          • Translate
          • Bottom
          • Likes 1

          Comment

            #6
            Originally posted by glennrocksvb View Post
            Try this:

            http://www.vbulletin.com/forum/forum...icons-any-size

            The CSS code has comments to indicate how much padding or margin to use based on the width/height of the icon used.

            If you want to use the same icon for all the forums, then use:

            Code:
            .forum-list-container .forum-item .cell-forum .icon {
            Otherwise, use:

            Code:
            #forum[COLOR=#FF0000]XXX[/COLOR] .cell-forum .icon {

            Btw, you will need to change all instances of:

            Code:
            {vb:stylevar left}
            to:

            Code:
            left
            because stylevars don't seem to be working in css_additional anymore like they used to.
            Awesome it worked, but what's wrong with the sections:

            http://tunerheat.com/forum/main-forum
            • Top
            • Translate
            • Bottom

            Comment

              #7
              On post #13 of that same thread, I posted more CSS. I couldn't edit the first post to post all the necessary CSS code because I didn't start the thread.
              Buy me a coffeePayPal QR Code
              My Amazon Affiliate Link ​
              Fast vBulletin VPS Host:
              This site is hosted by IONOS
              • Top
              • Translate
              • Bottom

              Comment

                #8
                Originally posted by glennrocksvb View Post
                On post #13 of that same thread, I posted more CSS. I couldn't edit the first post to post all the necessary CSS code because I didn't start the thread.
                Very helpful! Thank you once again!
                • Top
                • Translate
                • Bottom

                Comment

                  #9
                  You're welcome.

                  I'll post the complete code here one of these days for easy reference.
                  Buy me a coffeePayPal QR Code
                  My Amazon Affiliate Link ​
                  Fast vBulletin VPS Host:
                  This site is hosted by IONOS
                  • Top
                  • Translate
                  • Bottom
                  • Likes 1

                  Comment

                  • sslife
                    #9.1
                    commented
                    03-10-2017, 07:36 PM
                    Editing a comment
                    waiting for that
                    • Top
                    • Translate
                    • Bottom
                  #10
                  loading to test it
                  • Top
                  • Translate
                  • Bottom

                  Comment

                    #11
                    If this needs to be its own thread, let me know....

                    Tried the additional CSS and it's working only halfway with 5.7.4

                    For topics I've replied to, the icons show up fine. If I use the interactive close/open the icons change, but the plain vanilla ".read" and ".hot-read" aren't rendering.

                    Code:
                    .forum-list-container .forum-item .cell-forum .icon {
background: transparent url("https://test.trainsim.com/forums/core/images/legacy/forum_old-48.png") no-repeat; /* forum icon for forums with old posts */
width: 48px; /* icon width */
height: 48px; /* icon height */
}
.forum-list-container .forum-item.new .cell-forum .icon {
background: transparent url("https://test.trainsim.com/forums/core/images/legacy/forum_new-48.png") no-repeat; /* forum icon for forums with new posts */
width: 48px; /* icon width */
height: 48px; /* icon height */
}
.forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
padding-{vb:stylevar left}: 1px; /* icon width + 8 */
}
.forum-list-container .forum-item .cell-forum .forum-desc {
margin-{vb:stylevar left}: 1x; /* icon width + 8 */
margin-top: 2px; /* 17 - icon height */
}
/* Sub Forums */
.forum-list-container .subforum-list > td {
padding-{vb:stylevar left}: 2px; /* icon width + 13 */
}
/* Responsive */
@media only screen and (max-width: 768px)  {
.forum-list-container .forum-item .cell-forum .forum-desc {
margin-{vb:stylevar left}: 3px; /* icon width + 8 */
}
.forum-list-container .subforum-list > td {
padding-{vb:stylevar left}: 3px; /* icon width + 33 */
}}




.vb-icon-topic-status {
    background-color: transparent;
    background-repeat: no-repeat;
    height: 48px; /* this is the height of default icons, remove it if the same */
    width: 48px /* this is the width of default icons, remove it if the same */
}

/* for hot unread topic */
.hot-unread .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_hot_new-30.png');
}

/* for hot read topic */
.hot-read .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_hot-30.png');
}

/* for read topic */
.read .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_old-30.png');
}

/* for closed topic */
.closed .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_lock-30.png');
}

/* for deleted topic */
.deleted .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_deleted_30.png');
}

/* for deleted read topic */
.deleted.read .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_deleted_30.png');
}


/* for unread topic where current user has posted to */
.posted .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_dot_hot_new-30-left.png');
}

/* for read topic where current user has posted to */
.posted.read .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_dot_hot-30-left.png');
}

/* for closed topic where current user has posted to */
.posted.closed .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_dot_lock_new-30-left.png');
}

/* for deleted topic where current user has posted to */
.posted.deleted .vb-icon-topic-status {
    background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_deleted_30-left.png');
}​
                    Did something else perhaps change with 5.7.x from when this was originally written?

                    Other than the missing icons for those statuses, everything else works great!
                    2 Photos
                    • Top
                    • Translate
                    • Bottom

                    Comment

                      #12
                      Adding custom forum channel icons has been added natively to the forum for a while now. You no longer need to add custom CSS to do that. You simply go to Channel Manager in AdminCP and edit each channel and upload the corresponding image.

                      Click image for larger version Name: image.png Views: 122 Size: 62.8 KB ID: 26756​
                      ​
                      Buy me a coffeePayPal QR Code
                      My Amazon Affiliate Link ​
                      Fast vBulletin VPS Host:
                      This site is hosted by IONOS
                      • Top
                      • Translate
                      • Bottom

                      Comment

                        #13
                        Good to know, but what I'm trying to get to work are the thread status icons, not the channels.

                        Seems odd that some of it works and some doesn't. I don't see an option for that natively unless I want to try SVG editing...
                        • Top
                        • Translate
                        • Bottom

                        Comment

                          #14
                          I have to see the site to inspect the page and check the CSS. I suspect the CSS is being overridden by another more specific CSS.
                          Buy me a coffeePayPal QR Code
                          My Amazon Affiliate Link ​
                          Fast vBulletin VPS Host:
                          This site is hosted by IONOS
                          • Top
                          • Translate
                          • Bottom

                          Comment

                            #15
                            ​Yeah, unfortunately I took your advice and am now running it on a laptop with xampp instead of a cloud server..

                            Doing some digging this morning, I found a commented out note in one of the display_topic templates that says it was a known issue that the API wasn't setting the status for .read and four other statuses, and that was being done in the javascript.

                            In the meantime, I found the vb-icon-topic-status buried in css_utilities and replaced the sprite coordinates call with an absolute image path, and that did the trick.

                            Original css_utilities.css lines 1055-1100
                            Code:
                            <vb:comment>/* Topic status icons */</vb:comment>
.vb-icon-topic-status {
background-position: -68px -240px;
height: 18px;
width: 16px;
}
.hot-unread .vb-icon-topic-status {
background-position: -4px -240px;
}
.hot-read .vb-icon-topic-status {
background-position: -36px -240px;
}
.read .vb-icon-topic-status {
background-position: -100px -240px;
}
.closed .vb-icon-topic-status {
background-position: -132px -240px;
}
.deleted .vb-icon-topic-status {
background-position: -228px -240px;
}

<vb:comment>Add the "posted" overlay</vb:comment>
.posted .vb-icon-topic-status {
background:
url("images/topic-posted-{vb:stylevar textdirection}.png") no-repeat,
url("{vb:raw spritepath}") -68px -240px;
}
.posted.read .vb-icon-topic-status {
background:
url("images/topic-posted-{vb:stylevar textdirection}.png") no-repeat,
url("{vb:raw spritepath}") -100px -240px;
}
.posted.closed .vb-icon-topic-status {
background:
url("images/topic-posted-{vb:stylevar textdirection}.png") no-repeat,
url("{vb:raw spritepath}") -132px -240px;
}
.posted.deleted .vb-icon-topic-status {
background:
url("images/topic-posted-{vb:stylevar textdirection}.png") no-repeat,
url("{vb:raw spritepath}") -228px -240px;
}
​
                            Revised css_utilities.css lines 1055-1091
                            Code:
                             <vb:comment>/* Topic status icons HEAVILY modified by EFO */</vb:comment>
.vb-icon-topic-status {
background-color: transparent;
background-repeat: no-repeat;
height: 48px; /* this is the height of default icons, remove it if the same */
width: 48px /* this is the width of default icons, remove it if the same */
}
.hot-unread .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_hot_new-30.png');
}
.hot-read .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_hot-30.png');
}
.read .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_old-30.png');
}
.closed .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_lock-30.png');
}
.deleted .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_deleted_30.png');
}

.posted .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_dot_hot_new-30-left.png');
}
.posted.read .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_dot_hot-30-left.png');
}
.posted.closed .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_dot_lock_new-30-left.png');
}
.posted.deleted .vb-icon-topic-status {
background-image: url('https://test.trainsim.com/forums/core/images/legacy/thread_deleted_30-left.png');
}
<vb:comment>/* End of HEAVILY modified by EFO */</vb:comment>​
                            ​
                            ​ Click image for larger version Name: capture_400389.jpg Views: 401 Size: 109.2 KB ID: 26768
                            Attached Files
                            • Top
                            • Translate
                            • Bottom

                            Comment

                            Previous 1 2 template Next

                            Latest Posts

                            Collapse
                            View All
                            Working...
                            X
                            Searching...Please wait.
                            An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                            Please push the back button and reload the previous window.'
                            An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                            Please push the back button and reload the previous window.'
                            An internal error has occurred and the module cannot be displayed.
                            There are no results that meet this criteria.
                            Search Result for "|||"