Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1488378

    Hi everyone.
    The social media icons in the header are definitely too small by default.
    01 mine
    On your support pages (e.g., https://kriesi.at/support/), they’re already an acceptable size.
    02 yours
    How can I make them larger?
    And how can I also include them in pages?
    The Social Buttons tool in the Advanced Layout Editor seems to only work for articles.

    #1488395

    here on that page you can achieve this by:
    (the old way – because using font-icons)

    #top .main_menu {
      right: 145px;    /* === A correction value for the now broader social_bookmarks === */
      padding-right: 10px;
    }
    
    #header_main .social_bookmarks {
      margin: 0;
      height: 40px;
      top: 50%;
      transform: translateY(-50%);
    }
    
    #top .social_bookmarks li {
      width: 36px;
    }
    
    #top .social_bookmarks li a {
      width: 40px;
      line-height: 40px;
      min-height: 40px;
    }
    
    #top .social_bookmarks li a:before {
      font-size: 24px
    }
    

    Perhaps it needs to be adapted for your website. As a participant, I cannot see any private content, so I’m afraid I can’t offer any better advice.

    NEXT: now the bookmarks are svg icons – so the css had to be different.
    But i do not find an example page to do so. I had to look on one of my installatons to have that different css.

    #top .avia-menu.av_menu_icon_beside {
      border-right: none;
      padding-right: 10px;
      margin-right: 10px;
    }
    
    #top nav .social_bookmarks {
      position: relative;
      transform: translateY(-50%);
      margin: 0 !important;
      height: 40px !important;
    }
    
    #top .social_bookmarks li {
      width: 40px;
      margin-left: 3px
    }
    
    #top .social_bookmarks li a {
      width: 40px !important;
      line-height: 40px;
      border-radius: 10px !important;
      min-height: 40px;
    }
    
    #top .social_bookmarks li.avia-svg-icon img[is-svg-img="true"], 
    #top .social_bookmarks li.avia-svg-icon svg:first-child {
      height: 1.5em;
      width: auto;
      margin-top: 5px;
    }
    #1488403

    Hi,

    Thanks for helping out @guenni007. Did that answer your question @icarogioiosi?

    Best regards,
    Rikard

    #1488416

    Hi everyone.
    Thanks @guenni007. The contribution you made for the svg icons seems to be the right one.
    I need to do some experimenting with the values ​​myself to adapt the icons to the background when they’re highlighted.
    10 guenni007
    Could you please also give me a suggestion for

    And how can I also include them in pages?
    The Social Buttons tool in the Advanced Layout Editor seems to only work for articles.

    Regards.

    #1488467

    Hi everyone.
    I found the right parameters to make @guenni007’s suggestion work, which solved that part of the topic.
    Thanks!
    Does anyone have any idea how to fix the other part?

    And how can I also include them in pages?
    The Social Buttons tool in the Advanced Layout Editor seems to only work for articles.

    Regards.

    #1488659

    you like to place a social share button on those pages?
    – i can not confirm that the element from enfold : “Social Buttons”

    only works on articles – on my test installation it works for pages too.

    or do you like to link to your social media pages only ?

    #1488778

    Hi,
    The Social Buttons element (share buttons) can be added to pages and works for me.

    Best regards,
    Mike

    #1489284

    Hi everyone.
    I’ve solved in another way.
    Thanks for the support.

    Regards

    #1489288

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Social media icon sizes and page placement’ is closed to new replies.