icons next to titles ?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • bendiesel
    Senior Member
    • Jan 2018
    • 235
    • 5.3.x

    icons next to titles ?

    Hi everyone !

    Is it possible to add small icons next to the forums titles ? is it simple to do it ? thank you very much for your time and help

    the icons should be in the place of red circles, or before the title :

    Click image for larger version  Name:	icon add.png Views:	1 Size:	40.1 KB ID:	4390792
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73981

    #2
    Icons for what purpose?
    Translations provided by Google.

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

    Comment

    • bendiesel
      Senior Member
      • Jan 2018
      • 235
      • 5.3.x

      #3
      just to put small logo brand cars next the car brand title of the forum

      Comment

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

        #4
        The easiest way is to just add an HTML IMG tag after the forum name in the title field. You can do this in the AdminCP under Channel Management -> Channel Manager. Edit the forum channel and add your HTML. You'll need to upload the images via FTP and make them available on the server. It will show everywhere where the forum name is displayed though.

        For example:
        Code:
        Forum 1 <img src="core/images/icons/icon2.png">
        To have it just on the forum list, you would need to use CSS. To do this you would use the ::after selector. You would have to use the forum's ID to target it. This would be #forumXX. The XX will be listed as the Node ID in the Channel Manager within the AdminCP.

        For example:
        Code:
        #forumXX .forum-info a::after {
           background-image: url('/path-to-image/image.ext');
           content: "    ";
        }
        Translations provided by Google.

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

        Comment

        • bendiesel
          Senior Member
          • Jan 2018
          • 235
          • 5.3.x

          #5
          thank you very much Wayne Luke
          it's working with html but i found some difficulties to apply css code, what i did with the css code:
          1- replace the Node ID
          2- replace url('/path-to-image/image.ext') by the url of the uploaded icon, in this case i have: ('/core/images/brands/mercedes.png'), the same in the first html code
          3- opening CSS Editor and paste the code and save

          i tried to make some other changes but without success,
          have i missed something ?
          i'm deeply grateful for your time, i'm not css pro but i'll do my best

          Comment

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

            #6
            That was off the top of my head and I didn't really have time for intensive testing. Will look into it more.
            Translations provided by Google.

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

            Comment

            • bendiesel
              Senior Member
              • Jan 2018
              • 235
              • 5.3.x

              #7
              Thank you Wayne Luke !

              Comment

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

                #8
                Alternative solution is to put a background image to the forum title element via CSS. I'll post the code when I get to my computer.

                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

                • bendiesel
                  Senior Member
                  • Jan 2018
                  • 235
                  • 5.3.x

                  #9
                  Originally posted by Glenn Vergara
                  Alternative solution is to put a background image to the forum title element via CSS. I'll post the code when I get to my computer.
                  Thank you very much Glenn Vergara

                  i'll be grateful !

                  Comment

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

                    #10
                    Here it is:

                    Code:
                    .forum-info .forum-title:after {
                        content: '';
                        background: transparent url("/path/to/the/image.png") no-repeat;
                        width: 20px;
                        height: 20px;
                        display: inline-block;
                        margin-left: 10px;
                    }

                    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

                    • bendiesel
                      Senior Member
                      • Jan 2018
                      • 235
                      • 5.3.x

                      #11
                      i really appreciate your help Glenn Vergara !
                      but i wrote this code in CSS Editor and didn't work for me:

                      Click image for larger version

Name:	code.png
Views:	114
Size:	11.6 KB
ID:	4391180

                      i know it must be my fault, but i don't know what i made wrong in the code ..

                      thank you for help !
                      Last edited by bendiesel; Wed 9 May '18, 2:32pm.

                      Comment

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

                        #12
                        Code:
                        .forum-info .forum-title:after {
                            content: '';
                            width: 20px;
                            height: 20px;
                            display: inline-block;
                            margin-left: 10px;
                        }
                        #forum[COLOR=#FF0000]XX[/COLOR] .forum-title:after {
                           background: transparent url("/path/to/the/image.png") no-repeat;
                        }
                        Change XX to whatever the node id of the forum. Repeat for every forum.

                        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

                        • bendiesel
                          Senior Member
                          • Jan 2018
                          • 235
                          • 5.3.x

                          #13
                          thank you very much Glenn Vergara,
                          I really appreciate your help, i'll test this code

                          Comment

                          widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                          Working...