Announcement

Collapse
No announcement yet.

Modifying post/voting tools using css

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Modifying post/voting tools using css

    I'm looking to change the colors of each icon using css. I am not very familiar with css coding, but can identify areas using the inspector tool. Is there anyone willing to share one format that would change the color of one of the icons background images? I think i can figure the others out from there.

    I did a search and found no instructions for this specific css change.

    Click image for larger version

Name:	icons.PNG
Views:	192
Size:	2.8 KB
ID:	4415632

  • #2
    The easiest way would be to edit the hex values in the sprite CSS

    Find the sprite_icons_general.svg template

    Identify the specific element using the inspector tool.

    Search for each element in the CSS and change the hex value as you like.

    Comment


    • #3
      While logged in as an administrator on your site, go to /special/css-examples on the front end. Scroll down to the SVG Sprite. Click on the icon you want to change and the system will tell you the class it uses.

      Update its CSS in the blank sprite CSS template shown in Sitebuilder under Style -> Edit CSS.
      Last edited by Wayne Luke; Tue 21st May '19, 8:24am.
      Translations provided by Google.

      Wayne Luke
      The Rabid Badger - a vBulletin Cloud demonstration site.
      vBulletin 5 API - Full / Mobile
      Vote for your favorite feature requests and the bugs you want to see fixed.

      Comment


      • #4
        Ok, that is very helpful identifying the class it is using.

        .b-icon b-icon__like

        However I am not familiar with assigning the color I want using css.

        Code:
        .b-icon b-icon__like {
          background-color: #F9EDC7;
        }

        Comment


        • In Omnibus
          In Omnibus commented
          Editing a comment
          I can give you any number of cheat sheets but this one might serve your purposes. Just replace the existing six character hex code with the one that corresponds to your chosen color. https://www.colorhexa.com/color-names

        • NumNum
          NumNum commented
          Editing a comment
          Yeah I must be doing something wrong. Even the change didnt take.

          https://apco-atlantic.org/

      • #5
        You should be able to use something like this:

        Code:
        .b-icon .b-icon__like {
            color: blue;
            fill: blue !important;
        }
        However, it seems our code doesn't allow it for some reason. So you need to get more specific.

        In your css_additional.css template put this code:
        Code:
        [id^="vote"] .b-icon {
            background-color: #F9EDC7 !important;
        }
        In your css_sprite_icons_general.css template add something similar to this code:
        Code:
        // Outline of like icon
        #vb-svg-vote{
            fill: blue !important;
        }
        
        // Fill of like icon
        #vb-svg-fill-4 {
            fill:orange !important;
        }
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API - Full / Mobile
        Vote for your favorite feature requests and the bugs you want to see fixed.

        Comment


        • NumNum
          NumNum commented
          Editing a comment
          I only copied and pasted the code to the locations stated, with no modifications.

        • NumNum
          NumNum commented
          Editing a comment
          If it helps it is still in place. https://apco-atlantic.org/

        • NumNum
          NumNum commented
          Editing a comment
          Ok, I see it but only when I set the icon to non transparent, then all icons are gone and only see a square the color designated

      • #6
        Originally posted by Wayne Luke View Post
        In your css_sprite_icons_general.css template add something similar to this code:
        Code:
        // Outline of like icon
        #vb-svg-vote{
        fill: blue !important;
        }
        
        // Fill of like icon
        #vb-svg-fill-4 {
        fill:orange !important;
        }
        I think that should go in sprite_icons_general.svg template.

        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

        Comment


        • #7
          Users shouldn't edit the svg template. It can cause template merge problems. It is also inaccessible to cloud users.

          We provided the css_sprite_icons_general.css template for this purpose.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API - Full / Mobile
          Vote for your favorite feature requests and the bugs you want to see fixed.

          Comment


          • #8
            What I did (and it's working) was to copy the code from the sprite_icons_general.svg template to the css_sprite_icons_general.css template and then edit the hex codes as needed.

            Comment


            • Wayne Luke
              Wayne Luke commented
              Editing a comment
              Code:
              .b-icon b-icon__like {
              background-color: #e32636 !important;
              }
              will not work.

            • NumNum
              NumNum commented
              Editing a comment
              Just to verify, is it allowing a unique color for each icon, or are they all the same color (the ones you have working on your test sites)?

            • Wayne Luke
              Wayne Luke commented
              Editing a comment
              The single icon specified in my code. Exactly how I laid it out in my post above. See the attachment in the post below.

          • #9
            Click image for larger version

Name:	2019-05-22_10-22-02.png
Views:	165
Size:	3.7 KB
ID:	4415789


            One single icon altered.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API - Full / Mobile
            Vote for your favorite feature requests and the bugs you want to see fixed.

            Comment


            • NumNum
              NumNum commented
              Editing a comment
              That is exactly what I am trying to achieve!

            • Wayne Luke
              Wayne Luke commented
              Editing a comment
              This is what I am using -

              Originally posted by Wayne Luke View Post
              In your css_sprite_icons_general.css template add something similar to this code:
              Code:
              // Outline of like icon
              #vb-svg-vote{
              fill: blue !important;
              }
              
              // Fill of like icon
              #vb-svg-fill-4 {
              fill:orange !important;
              }

          • #10
            I am using in css_additional.css;

            Code:
            [id^="vote"] .b-icon {
                background-color: #F9EDC7 !important;
            }
            In the css_sprite_icons_general.css;

            Code:
            // Outline of like icon
            #vb-svg-vote{
            fill: blue !important;
            }
            
            // Fill of like icon
            #vb-svg-fill-4 {
            fill:orange !important;
            }
            What would trip it up?

            Comment


            • #11
              I can't get it to work either
              vB Mods That Rock!

              Comment


              • #12
                I'd need to see URLs of where it is supposed to be working.
                Translations provided by Google.

                Wayne Luke
                The Rabid Badger - a vBulletin Cloud demonstration site.
                vBulletin 5 API - Full / Mobile
                Vote for your favorite feature requests and the bugs you want to see fixed.

                Comment


                • #13
                  Here is mine, https://apco-atlantic.org/

                  Comment


                  • #14
                    I checked your svg sprite at https://apco-atlantic.org/sprite.php...&ts=1558604815 and saw that you are using // as your comment delimiter in CSS. Comments in CSS should be inside /* and */. That's why your code is not working.

                    Click image for larger version  Name:	Capture.PNG Views:	0 Size:	102.4 KB ID:	4415832

                    GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                    Comment


                    • NumNum
                      NumNum commented
                      Editing a comment
                      Thank you, Glenn. Something so simple too. That's the difference between experience, and not.

                  • #15
                    All,

                    Thanks for all the help and guidance on this.

                    I posted in Tutorials in hopes these steps and instructions from you folks will help someone else.

                    Comment

                    Related Topics

                    Collapse

                    Working...
                    X