Announcement

Collapse
No announcement yet.

How to edit/remove Twitter and Facebook share icons?

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

  • [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:	109
Size:	4.3 KB
ID:	4406869

  • #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 customization and demonstration site.
    vBulletin 5 Documentation - Updated every Friday. Report issues here.
    vBulletin 5 API - Full / Mobile
    I am not currently available for vB Messenger Chats.

    Comment


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

      Comment


      • #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 customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment


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

          Comment


          • #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 customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            I am not currently available for vB Messenger Chats.

            Comment


            • #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...
              X