Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #613177

    Hello,
    I would like to move the “scroll-top-link” a little bit down and put another image above. This new one should be visible always.
    Is there a way to place that new image (I prefer Quick CSS)?
    Thanks a lot and best regards
    Kai
    PS.: Maybe, this would be my way to move the “scroll-top-link”: https://kriesi.at/support/topic/back-to-top-linkicon-in-footer/#post-138268

    #613474

    Hi Kai!

    Thanks for getting in touch with us!

    Sorry but this will take more than a bit of CSS. In your WordPress installation please go to the footer.php file and find this code in line 190:

    <a href='#top' title='<?php _e('Scroll to top','avia_framework'); ?>' id='scroll-top-link' <?php echo av_icon_string( 'scrolltop' ); ?>><span class="avia_hidden_link_text"><?php _e('Scroll to top','avia_framework'); ?></span></a>

    and add this line above it:

    <img class='custom_icon' src='http://www.yoursite.com/yourimage.png' />

    Add the following to Quick CSS field to move the scroll to top image down and position your image above it:

    .custom_icon {
        position: fixed;
        border-radius: 2px;
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-decoration: none;
        text-align: center;
        right: 50px;
        bottom: 5px;
        z-index: 1030;
    }
    
    #scroll-top-link {
        bottom: 5px !important;
    }
    

    Let me know if you need further assistance.

    Best regards,
    Jordan

    #632244

    Hello,

    I added this code to change de image: but back to top is not working. Could you help me?

    Thaks a lot.
    Best regards!

    #632701

    Hi,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    #634099

    Hello Rikard.

    Off course. thanks a lot

    #634116

    Hi,

    Since this is a live site I din’t wanted to add this code without an icon please replace the word “icon” in the below code to the icon image path and add it to functions.php

    function custom_icon(){
    ?>
    <script>
    jQuery(window).load(function(){	
       jQuery("#scroll-top-link").html( "
    <div id='custom-icon'>Icon</div>
    " );
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_icon');

    To adjust the above icon on the front end please make change to the bottom and right values as required.

    #custom-icon {
    	width:50px;
    	height:50px;
    	background:gold;
    	display:block!important;
    	position:fixed;
    	bottom:70px;
    	right:50px;	
    }
    

    Request you to open different tickets for different issues.

    Let us know if you have any questions.

    Best regards,
    Vinay

    #634130

    Hello Vinay

    Thank you very much for the quick answer.
    I get an error on this line: jQuery(“#scroll-top-link”).html( ”

    In addition , I would like to know if this would be the final code (changing ” SITENAME ” and IMAGENAME.png for the real name of the site and image):

    function custom_icon(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(“#scroll-top-link”).html( ”
    <div id=’custom-icon’>http://SITENAME.COM/shop/wp-content/themes/enfold-child/IMAGENAME.png</div&gt;
    ” );
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘custom_icon’);

    Thanks a lot and best regards

    #634138

    Hi,

    Actually the code get’s auto indented here but i tested this on my installation and it works fine. Please make sure the underlined line is one line.

    I tried to troubleshoot this issue but the login credentials you provided do not work for me. Would you mind checking once again and then send us working login credentials?

    You can replace the word icon with and image :)

    Let me know if you have any questions.

    Best regards,
    Vinay

    #634141

    Hello again.

    The problem is in this line:

    jQuery(“#scroll-top-link”).html( ”

    Thanks a lot!
    Best regards

    P.s. Sorry I do not understand in what part replace the word with the picture.

    #634238

    Hey!

    I have updated the code to suit the custom modification. You can see now the icon is above the other one…

    You need to open Appearance > Editor > functions.php and at the bottom in the above code block replace the text “Icon 2” with URL to the image icon of your choice.

    Best regards,
    Vinay

    #634647

    Thanks Vinay

    The image looks good the problem is the image icon not goes to the top. How could I fix it.

    Thanks a lot and best regards

    #634724

    Hi!

    As i understand the aeroplane image on the bottom right should scroll to top when user clicks right? Please clarify if you want the yellow button next to the aeroplane needs to be removed?

    Best regards,
    Vinay

    #634728

    hello Vinay,

    That´s right. Exactly like that.

    Yes, the yellow button needs to be removed

    Best regards and thak you!

    #635008

    Hi!

    I have updated the code in functions.php please review the site :)

    Cheers!
    Vinay

    #635278

    Hello Vinay .
    Excellent!! Thank you very much!!

    Can I ask you one more thing ? In cellular version , the plane overlies the social icons. In the home page it looks perfect but not in the rest of the site. Could you put the plane more down?

    Thank you very much and best regards

    #635703

    Hi,

    All changes are updated please review the site :)

    Best regards,
    Vinay

    #637011

    Hi Vinay,

    I think my English is complicating what I need. I am sorry.
    I see the plane + icon Enfold (large resolution) and the plane (in phone resolution), but in this last case the plane is on the social icons . I just need the plane to go up, but the plane must be away from the social networks icons (not on them).

    Thanks a lot!
    Best regards

    #637062

    Hi,

    I think you have explained to me well and i have attached the screenshots. You may not see the same until the cached files are cleared in your browser.

    Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.

    If this is not what you wanted please post us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    #637792

    Hello Vinay!
    I sent the information and screens by private

    best regards

    #638227

    Hey!

    The login URL is not working for the new site.

    To hide the default scroll to top icon add the below css

    .avia_pop_class {
    	display: none !important;
    }

    The plane icon will appear on the text while scrolling as it is a fixed element however it should not affect the readability as users can scroll the content.

    If i move it below then it will be on top of social icons so i suggest to you to keep the plane icon in the current location :)

    Best regards,
    Vinay

    #638770

    Hello,

    I have a little problem with this famous image… i know…super famous…
    If you look at the original web (attached in private), the picture It is visible only when the scroll makes it necessary (not all the time).
    In addition , I need to replace the image for another, smaller one. You can help me ?

    Thanks a lot and best regards

    • This reply was modified 8 years, 4 months ago by marilusnm. Reason: I need another change
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Place a small image/icon to fix position like (position like scroll-top-link)’ is closed to new replies.