Announcement

Collapse
No announcement yet.

Modifying post/voting tools using css

Collapse
X
Collapse
First Prev Next Last
 
  • 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:	636
Size:	2.8 KB
ID:	18772

    #2
    I think the icon colors of the svg sprite are controlled by the icon_color_xxxxx stylevars. When you change them, it will affect all icons.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      Try "icon color gray11" for the text

      Comment


      • Mitch
        Mitch commented
        Editing a comment
        Icon color gray 3 will change the symbol colors there

      #4
      I also made them larger with CSS by Glenn.. I forget what made the blue outline on the like box

      Comment


        #5
        Change post_controls_votes_border stylevar.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #6
          I was looking to change each to its own colors such as seen here.

          Click image for larger version

Name:	hobby.PNG
Views:	153
Size:	2.7 KB
ID:	18783

          Comment


          • Mitch
            Mitch commented
            Editing a comment
            If you find a way I'm interested
            Thanks

          #7
          That one doesn't use the stock vB5 icons. You'd have to provide your own custom icons and css code.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


          #8
          So this is what I found out with the help of a lot of people as seen here. The below is what I have been able to accomplish because of them;

          Code:
          /* Outline of like icon*/
          #vb-svg-vote{
          fill: blue !important;
          }
          
          /* Fill of like icon*/
          #vb-svg-fill-4 {
          fill: antiquewhite !important;
          }
          /* Outline of Flag icon*/
          #vb-svg-flag-2 {
          fill: black !important;
          }
          
          /* Fill of Flag icon*/
          #vb-svg-fill {
          fill:red !important;
          }
          /* Outline of Quote icon*/
          #vb-svg-rdquo{
          fill: lime !important;
          }
          
          /* Fill of Quote icon*/
          #vb-svg-fill-2 {
          fill: lime !important;
          }
          /* Outline of Edit icon*/
          #vb-svg-pencil--gray{
          fill: blue !important;
          }
          
          /* Fill of Edit icon*/
          #vb-svg-fill-6 {
          fill:orange !important;
          }
          /* Outline of Comment icon*/
          #vb-svg-__speech-single--gray{
          fill: black !important;
          }
          
          /* Fill of Comment icon*/
          #vb-svg-fill-3 {
          fill: pink !important;
          }
          I hope it helps others.

          Click image for larger version  Name:	apco.PNG Views:	0 Size:	2.7 KB ID:	18826
          Click image for larger version

Name:	comment.PNG
Views:	182
Size:	1.9 KB
ID:	18828

          Comment


          • Mitch
            Mitch commented
            Editing a comment
            Nice job, thank you

          #9
          hi Num Num can you elaborate where they go the code "css_additional.css" ?
          a little tutorial will help the newbie
          nice job like the color button
          voyger.: In Almighty God I trust, everyone else has to provide evidence."

          Comment


            #10
            Sure.

            In the site builder/style/select css editor/css_sprite_icons_general.css.

            Click image for larger version

Name:	editor.PNG
Views:	417
Size:	43.4 KB
ID:	18838



            Attached Files

            Comment


              #11
              WOWWwww lovely done it thankyou give bit of colour the forum look very nice


              hannibal lecter thank you GIF
              voyger.: In Almighty God I trust, everyone else has to provide evidence."

              Comment


                #12
                If you find this helpful, please consider making a donation to support vBMods.com


                Comment


                  #13
                  thanks donate it now

                  Click image for larger version

Name:	Capture (2).PNG
Views:	438
Size:	331.9 KB
ID:	18979


                  voyger.: In Almighty God I trust, everyone else has to provide evidence."

                  Comment


                  • glennrocksvb
                    glennrocksvb commented
                    Editing a comment
                    Thanks voyger. I appreciate it.

                Users Viewing This Page

                Collapse

                There is 1 user viewing this forum topic.

                • Guest Guest

                Latest Posts

                Collapse

                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 "|||"