Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #370731

    Hello,

    I have customized the back to top button but users are still having issues understanding it (unfortunately)

    I want to add font size 12px color black text to the Back To Top box like below with the arrow icon above the text

    Back to Top

    Example URL: http://schneidercentre.com/plastic-surgery/patient-testimonials/

    Below is the CSS I am using to customize it so far:

    
    #scroll-top-link {
    color: #ffffff;
    border: 1px solid #7777;
    background-color: #777;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    width: 60px;
    line-height: 60px;
    opacity: 1;
    right: 10px;
    bottom: 10px;
    position: fixed;
    }
    
    #scroll-top-link:hover {
    color: #ffffff;
    border: 1px solid #7777;
    background-color: #ff3a3a ;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    width: 100px;
    line-height: 60px;
    opacity: 1;
    right: 10px;
    bottom: 10px;
    }
    

    -I’d like to also make the arrow move up in position 5 px or so with the transition ease-out effect
    -Is it possible to swap out the arrow icon for a slightly bigger arrow? Upon hover, I’d like the arrow to expand to a larger arrow icon

    Thank you for all your help on this! I think this is a drastic UX improvement for the average user who still has issues navigating a mobile browser in general. I will be sharing an example on twitter once finished and will give a shout out to Kriesi!

    #371130

    Hi addwebtoday!

    on your example URL there is no additional text over the back to top button. I think what you want to achieve is out of the normal support scope and you would need to hire a freelancer. Feel free to contact http://werkpress.com/ or https://studio.envato.com

    Cheers!
    Andy

    #372910

    Andy,

    I appreciate your reference. The reason I am adding this is not for flare, but because the theme’s button is not really intuitive. This is something that prevents users of the websites that the theme is built with to become confused. I just need to know the right area to enter the text “back to the top”. It’s either in the .php file or can be done through CSS. I have had dozens of issues with this theme regarding the theme elements that come with the theme as well as elements within the page builder. These have kept me from having a positive experience with the theme. I’m not asking to reinvent the functionality with this ticket, I’m simply trying to add the few things that make these layouts make sense to the average website user.

    Thank you

    #373052

    Hey!

    Please go to Appearance > Editor and open Footer.php file and find
    <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 change it to
    <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><div class="avia-tooltip avia-tt"><div class="inner_tooltip">Scroll to top!</div><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></div></a>
    then add following code to Quick CSS

    a#scroll-top-link .avia-tooltip.avia-tt { top: -70px; left: -50px; display: none; opacity: 0; }
    a#scroll-top-link:hover .avia-tooltip.avia-tt { display: block!important; opacity: 1!important; }

    Cheers!
    Yigit

    #375295

    Thank you Yigit! This works you can close this ticket

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Add "Back To Top" on Back to Top button’ is closed to new replies.