vb5 temp fix for custom forum icons(any size)

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • IggyP
    Senior Member
    • Mar 2012
    • 680

    vb5 temp fix for custom forum icons(any size)

    Note: On the latest versions of vBulletin, you can upload Channel Icons within the AdminCP using the Channel Manager.


    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!

    Code:
    /* 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!
    Last edited by Wayne Luke; Mon 9 Oct '23, 8:42am.
  • glennrocksvb
    Former vBulletin Developer
    • Mar 2011
    • 4011
    • 5.7.X

    #2
    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 {
    Code:
    /* Responsive */
    @media only screen and (max-width: 768px)[COLOR=#FF0000] [SIZE=18px][B]{[/B][/SIZE][/COLOR]
        .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

    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

    Comment


    • IggyP
      IggyP commented
      Editing a comment
      thanks again...just edited in the last typo
  • IggyP
    Senior Member
    • Mar 2012
    • 680

    #3
    Originally posted by 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)
    regarding this section:
    Code:
     .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 */
    [COLOR=#FF0000]width: 40px; /* icon width */
    height: 42px; /* icon height */[/COLOR]
    }
    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

    Comment

    • glennrocksvb
      Former vBulletin Developer
      • Mar 2011
      • 4011
      • 5.7.X

      #4
      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:

      Code:
      /* 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.
      Last edited by glennrocksvb; Thu 9 Jun '16, 1:23pm.

      Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

      Comment

      • Graham Walters
        Senior Member
        • Feb 2013
        • 143
        • 5.1.x

        #5
        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 ?
        Last edited by Graham Walters; Sun 8 Jun '14, 8:58am.

        Comment

        • Wayne Luke
          vBulletin Technical Support Lead
          • Aug 2000
          • 73981

          #6
          Originally posted by 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 ?

          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.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment

          • Graham Walters
            Senior Member
            • Feb 2013
            • 143
            • 5.1.x

            #7
            Originally posted by Wayne Luke


            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

            Comment

            • Wayne Luke
              vBulletin Technical Support Lead
              • Aug 2000
              • 73981

              #8
              Originally posted by Graham Walters


              The drop down box only shows the "Default" style
              Right on it. Trying to get that changed so themes are more useful.
              Translations provided by Google.

              Wayne Luke
              The Rabid Badger - a vBulletin Cloud demonstration site.
              vBulletin 5 API

              Comment

              • osras1
                Senior Member
                • Feb 2014
                • 335
                • 5.0.X

                #9
                Originally posted by 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!

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

                Comment

                • glennrocksvb
                  Former vBulletin Developer
                  • Mar 2011
                  • 4011
                  • 5.7.X

                  #10
                  Originally posted by osras1

                  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.

                  Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                  Comment

                  • glennrocksvb
                    Former vBulletin Developer
                    • Mar 2011
                    • 4011
                    • 5.7.X

                    #11
                    Originally posted by 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:

                    Code:
                    /* 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:
                    Code:
                    /* 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;
                    }
                    Last edited by glennrocksvb; Wed 6 Jul '16, 10:26am.

                    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                    Comment

                    • GamesItalia
                      Member
                      • Nov 2013
                      • 38
                      • 5.7.0

                      #12
                      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
                      https://invisiongame.net

                      Comment

                      • glennrocksvb
                        Former vBulletin Developer
                        • Mar 2011
                        • 4011
                        • 5.7.X

                        #13
                        Add the ones in red.
                        Code:
                        .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;
                        }

                        Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                        Comment

                        • GamesItalia
                          Member
                          • Nov 2013
                          • 38
                          • 5.7.0

                          #14
                          Perfect..Thanks so much!
                          https://invisiongame.net

                          Comment

                          • webmastersun
                            Senior Member
                            • Oct 2013
                            • 135
                            • 4.2.X

                            #15
                            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.
                            Best Internet Marketing Forum & Webmaster Forum for webmasters and Internet Marketers discussing and trading!

                            Comment

                            Related Topics

                            Collapse

                            Working...