How to edit/remove Twitter and Facebook share icons?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • medved
    Senior Member
    • Apr 2008
    • 168

    [Tutorial] How to edit/remove Twitter and Facebook share icons?

    Hello,

    Can anyone please tell me how can I either edit the Twitter and Facebook share icons under avatar to make the icons smaller, in one line or completely remove it. Because they are occupying too much space, slowing the page load time too.
    Thanks a lot.
    In Photoshop it is easy:

    Click image for larger version

Name:	sharelinks.png
Views:	351
Size:	4.3 KB
ID:	4406869
  • Wayne Luke
    vBulletin Technical Support Lead
    • Aug 2000
    • 73976

    #2
    You can turn them off in the settings under Settings -> Options -> Topic Display Options.

    They are an Unordered List. So you can adjust their appearance by adjusting the CSS for the .b-sharing-menu class (entire list) and the .b-sharing-menu__item-link class (individual list items).
    Translations provided by Google.

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

    Comment

    • medved
      Senior Member
      • Apr 2008
      • 168

      #3
      Thank you, and to to edit the size, is it possible too? Is it somewhere in Style Manager -> Edit Template?

      Comment

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

        #4
        The size of what?

        The icons? The icons are SVG images. The size is controlled via CSS.

        Code:
        .b-sharing-menu__item-link--facebook .b-sharing-menu__item-link-img {
            width: 16px;
            height: 16px;
            margin-top: -2px;
        }
        The font? That is controlled via CSS. This is inherited from the global_text_font size as far as I can tell. You can over write this.

        The overall button? That is controlled by CSS.
        Code:
        .b-sharing-menu__item {
            margin: 0 auto 4px auto;
        }
        
        .b-sharing-menu .b-sharing-menu__item a.b-sharing-menu__item-link--facebook, .b-sharing-menu .b-sharing-menu__item a.b-sharing-menu__item-link--facebook:visited {
            font-weight: bold;
            font-family: Helvetica,Arial,sans-serif;
            background: #4267B2;
            color: #FFF;
        }
        Using your browser's developer tools and inspecting the elements will expose the CSS directly.
        Translations provided by Google.

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

        Comment

        • medved
          Senior Member
          • Apr 2008
          • 168

          #5
          Thanks a lot, but how do I get to the CSS file?

          Comment

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

            #6
            NONE of the CSS is in a FILE. It is stored in Templates within the database. It has been this way since vBulletin 2.

            You would place your changes in the css_additional.css template. That is what it is specifically designed to do. To allow customers to apply their own custom CSS.
            Translations provided by Google.

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

            Comment

            • medved
              Senior Member
              • Apr 2008
              • 168

              #7
              thank you. I have tried but more classes i would need there and it is too complicated. so for now the only solution for me is to remove it. will have to hire someone later for that.

              Comment

              Related Topics

              Collapse

              Working...