Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #1289259

    Hello I have a client that would like to add one of those LIVE STREAM with the red blinking dot animated gifts right next to the social media icons on the header above the main menu. Here’s a link to an image to give you an idea of what they are looking for: https://bit.ly/3eWei2F

    I can provide the animated gif but I’m not sure how to go about adding it on the site where the client has indicated he wanted it. Any help will greatly be appreciated.

    #1289774

    Hey hallco,

    Sorry for the late reply. I can’t load your screenshot, but you should be able to add your new content in a widget in the header: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area. We can help you out with placing it in the correct position, after you have added the content.

    Best regards,
    Rikard

    #1290559

    Hi Rikard,

    Thank you for your reply. I followed the instructions in the link you sent and was able to get something placed in the header, but I need it to be placed in the social media icons area at the top of the site above the main menu.

    I have placed another link to the image you couldn’t open showing what I’m trying to achieve in the private Data. Any other thoughts or additional help will be appreciated.

    #1291239

    Hi,

    Thanks for the update. I can’t load your site though, please see private. Could you let us know when it’s available again?

    Best regards,
    Rikard

    #1291568

    Rickard,

    I have no problems loading up the site on my end. It might have been something going on temporarily. Can you try again please.

    Thanks,

    Luis

    #1292060

    Hi Luis,

    Thanks for the update, I’m still getting the same error message unfortunately. Are you blocking some IP ranges maybe?

    Best regards,
    Rikard

    #1293274

    Hi Rikard,

    Please try viewing the image with the link I placed in the private data. I placed it on a separate website. Again, this is what my client is trying to achieve with an animated gif.

    #1293718

    Hi,

    Thanks for that. We can’t help you out with CSS unless we can actually see the elements on a live site though.

    Best regards,
    Rikard

    #1293755

    your image link over bit.ly does not open here on my end.

    i would do this with registering an additional “social icon”
    You can put this in your child-theme functions.php:

    /** Add new icon as an option for social icons  **/
    function avia_add_custom_social_icon($icons) {
        $icons['Animated Image'] = 'animated';
        return $icons;
    }
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

    and this in your quick css:

    /************* social animated gif *******************/
    #top #wrap_all .av-social-link-animated a {
      pointer-events: none !important
    }
    
    #top #wrap_all .av-social-link-animated a:before{
      content: "";
      width: 35px;
      height: 35px;
      position: relative;
      top: -3px;
      left: -15px;
      display: inline-block;
      vertical-align: middle;
      background: url(/wp-content/uploads/2021/04/arrows.gif) no-repeat center center;
      background-size: contain;
    }
    
    #top .main_menu .social_bookmarks li.social_bookmarks_animated {
        width: 45px;
        position: relative;
        left: 10px;
    }

    Now you have on Enfold (Child) – Social Profile another link you can place at the beginning of that list:

    adjust the link to your animated gif !
    Result: https://webers-testseite.de/weber/
    have a look how this shows if the social icons goes to main-menu when you are in between 768px and 990px !

    #1294028

    Hi,

    Thank you very much for helping out @guenni007 :-)

    Best regards,
    Rikard

    #1294138

    Hi Guenni007,

    That’s exactly what I’m trying to achieve. I will give this a try and see what results I get. Thank you very much!

    Luis

    #1294168

    Hi Guenni007

    I did exactly as you suggested and was able to get the animated image Social icon option to come up in my child theme. When I put the url of an animated gif stored in my media library it doesn’t show up on the site. Am I missing something? What URL should I use for the animated image URL?

    Thank you,

    Luis

    #1294173

    Never mind. I got it working now. I had to change the URL of the icon in the code I put in the quick CSS as well. It was pointing to the arrows GIF that you have in your demo. This all worked like a charm. However, how can I get this to work on the parent theme or does it matter if I keep the theme for the client set to child theme or parent theme?

    Thanks

    #1294174

    you have no link on that animated gif so in Enfold Options you insert only #
    in the quick css rule – you had to adjust the url to your animated gif
    this part from above:

    background: url(/wp-content/uploads/2021/04/arrows.gif) no-repeat center center;
    
    #1294178

    I can only ever strongly advise using a child theme.
    It has so many advantages that the few disadvantages don’t matter.
    All the nice php/script snippets that go into the child-theme functions.php would have to be placed in the parent-theme functions.php, and then renewed with each new update. Etc. pp.

    the place in the parent-theme functions.php would be here just under that comment before the last line in functions.php ( require-once …)

    #1294180

    sorry my image hoster is temporarly down :
    just before line 834 : require_once( 'functions-enfold.php');

    #1294195

    Guenni007

    Thank you. How can I link the actual animated gif to a url when it’s clicked on. Putting the URL in the Social Icon URL section doesn’t seem to be working.

    Thank you

    #1294336

    Remove this:

    #top #wrap_all .av-social-link-animated a {
      pointer-events: none !important
    }

    and put in the options dialog of social profiles the “Social Icon Url”

    #1294410

    Guenni007 this worked perfectly. One more thing how do I change the title of the image when it’s hovered over? Right now when you hover over the image it says “Animated” just like if you hover over the Twitter icon it says ‘Twitter’ or the Facebook icon it says ‘Facebook’. I’d like for it to change this for it to just say what the graphic says which is ‘Live Stream’.

    Thank you.

    #1294665

    Hi,

    You may need to replace the name and ID of the social icon here.

    /** Add new icon as an option for social icons  **/
    function avia_add_custom_social_icon($icons) {
        $icons['Animated Image'] = 'animated';
        return $icons;
    }
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    

    And edit the css code that @guenni007 provided above, replace every instance of the “animated” keyword with the new name.

    // https://kriesi.at/support/topic/adding-animated-gif-next-to-the-social-media-icons-header/#post-1293755

    So if you replaced the social icon name and ID with “Live Stream” and “livestream” for example..

    $icons['Live Stream'] = 'livestream';
    

    .. the selector in the css code would be.

    #top .main_menu .social_bookmarks li.social_bookmarks_livestream
    

    Best regards,
    Ismael

    #1294813

    Ismael,

    This worked perfectly. Thank you very much for your input on this. This is now resolved.

    #1295178

    Hi hallco,

    Great, I’m glad that Ismael could help you out. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Adding animated gif next to the social media icons header’ is closed to new replies.