WordPress.org

Ready to get started?Download WordPress

Forums

back to top link every page (22 posts)

  1. trinker
    Member
    Posted 11 months ago #

    I google this question and get tons of hits with no viable answer. I want to put a back to page link (no button) at the bottom of every page that hrefs back to the top. I'd like to place it right above the footer on the far right. I have the hyper ref down using:

    <a href="#">Back to Top</a>

    but getting it to:

    1. put the link where I want
    2. on every page

    seems to require some css playing. Here's a pic of where the link is and where I'd like to move it to.

    Here's a link to my site

    Thank you in advance.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    Do not edit the Twenty Twelve theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes.

  3. trinker
    Member
    Posted 11 months ago #

    Yes I have a child theme, my apologies for not stating this. How do I add the back to top href though (in the locations desired on every page)?

  4. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    Try adding it to a custom copy of footer.php in your child theme.

  5. trinker
    Member
    Posted 11 months ago #

    That's where it is currently at (though not right aligned). I'm trying to get it to appear before the footer (the light grey line in the image) on the far right. That would indicate to me it probably doesn't belong in the footer (could be wrong but I think the footer controls everything below the grey line) but some css file that controls pages.

  6. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    Try adding it above </div><!-- #main .wrapper -->. And do give the link it's own id or class, so that you can move it easily using CSS.

  7. trinker
    Member
    Posted 11 months ago #

    I added this exactly and it puts the link in the far right but right below the header.

    <?php
    /**
     * The template for displaying the footer.
     *
     * Contains footer content and the closing of the
     * #main and #page div elements.
     *
     * @package WordPress
     * @subpackage Twenty_Twelve
     * @since Twenty Twelve 1.0
     */
    ?>
        <p id="totop" style="text-align: right;"><a href="#">Back to Top</a></p>
    	</div><!-- #main .wrapper -->
    	<footer id="colophon" role="contentinfo">
    	    <p style="text-align: center;">
    	        <a href="/index.php/">HOME</a> | <a href="HR('ABOUT CLARI')">ABOUT CLARI</a> | <a href="/index.php/parents-and-teachers/">PARENTS AND TEACHERS</a> | <a href="/index.php/clari-research/">CLARI RESEARCH</a> | <a href="/index.php/contact/">CONTACT</a> | <a href="/index.php/events/">EVENTS</a></br></br>
    	    </p>
    		<a href="http://www.buffalo.edu/"> <img class="center" src="<?php echo get_stylesheet_directory_uri(); ?>/images/ub-logo.png" alt="ub logo" /></a>
    		<div class="site-info">
    		</br>
    			<p style="text-align: center;">
    			17 Baldy Hall, North Campus &nbsp;&nbsp; Buffalo, NY  14260 <br>
                phone: 716.645.2470 &nbsp;&nbsp; fax: 716.645.5060 &nbsp;&nbsp; <a href="http://www.clari.buffalo.edu">http://www.clari.buffalo.edu</a>
    
                </p>
    		</div><!-- .site-info -->
    	</footer><!-- #colophon -->
    </div><!-- #page -->
    
    <?php wp_footer(); ?>
    </body>
    </html>
  8. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    Try:

    #top {
    element.style {
        clear: both;
        text-align: right;
    }
  9. trinker
    Member
    Posted 11 months ago #

    esmi thank you for your response and patience. Can you be slightly more explicit (I'm new to this) as I don't know quite what to do with this. Where to put it? (I'm guessing in the style.css and then use this as a class on the text). I appreciate the time you're giving me.

  10. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    Do you know how to use CSS?

  11. May_68
    Member
    Posted 11 months ago #

    open style.css
    and in the
    #main {
    position: relative;
    }

    p#totop {posittion: absolute;
    bottom: 10px;
    right: 0px;
    }
    Now taking in cosideration that your button is inside the #main div you need to tell your css that that div's postion is relative , so what ever element with absolute position on it will see it has the pivot poins of coordenates '0,0'.
    Then tell the element p#totop to be in an absolut position of bottom: 0 , and right: 0 .

    now it would be better to put that <p> element inside the <footer> and make the footer{position: relative; overflow: visible} and the p#totop {position:absolute; right:0; top:-20px;
    }

    this way nomater what height or float the #main may have you make sure that that p#top always styas stuck to the footer
    <footer id="colophon" role="contentinfo">

    <p id="totop" style="text-align: right;"><a href="#">Back to Top</a></p> 
    
    <--- all the stuff inside the footer here -->
    </footer>

    [Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

  12. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    No - in these days of responsive design for mobile devices, absolute positioning is not the answer.

  13. trinker
    Member
    Posted 11 months ago #

    esmi, I have altered the style.css in my child theme and uploaded via Filezilla. I have created and applied some classes and made minor changes via the css. So some but limited experience in doing so.

    I have 2 books on html5 and css but have a website to build for a literacy center I am project manage for and the site build has a deadline so the learning I'm doing isn't ideal.

    At first I was going to follow May_68's advice but it seems this may be less flexible (i.e., not responsive).

    Here's what I know. I am not a programmer but know one language (R) proficiently. All the changes I've added to style.css have use a . in front of the command not a # so I'm not sure why this one has a # in front.

    How should I proceed?

  14. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    Try adding the CSS I posted above to the bottom of your child theme's style.css file.

  15. trinker
    Member
    Posted 11 months ago #

    This did not change anything.

  16. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    It's worked as far as I can see. Remember to press CTRL and F5 simultaneously when viewing an updated page/site. Or try emptying your browser cache. This should ensure that your web browser fetches a fresh copy of the page rather than serving up an out-dated copy from your own cache.

    Also disable/deactivate any caching plugin(s).

  17. May_68
    Member
    Posted 11 months ago #

    Esmi . the . before is for classes and the # is fir id,

    Lets say a class you will use in multiple places. an and id is an unique identifier of a single element in this case the go to top button. Beacuse there is only one . now if it was an h2 you can use that multiple time accross the same page or a <p> .. then use classes to style them . . If you notice on the code you hava .. <p id="totop">
    <and some where in there there is also a <div class="site-info">

    The css file , style.css uses these id's and class to know what find them in the html code .. in the html code you also have lots of style="blabla : blabla"
    the css file simply is assigning all those styles to the html elements.
    so :

    <p id="totop"> ---> in the css is ---> p#totop or just #totop
    <div class="site-info"> ---> in the css is ---> div.site-info , or just .site-info

    Now to make your life easier .
    Download chrome > install it > delete IE from you computer . or any computer you come accros . ( the world will thank you for that kind action ) and then once you have chrome installed fire up your webpage and right click on the go to top button and do inspect element.

    A very cool window will pop up that will allow you to edit the css so you can test what works ,,, figure out how to use that window and you are on a good way to getting things done ... U can also use safari . or firefox's firebug ..

    Nothing wrong with absolute positioning if you know what you are doing. and IE .. my god .. can wait for that to die once and for all .. what a cancer .

    If it gets too anoying just send me the link of the page you are working on and I will have a look at it .
    and post the css right css here so you can added to you style.css

    Cheers mate .. :D

  18. May_68
    Member
    Posted 11 months ago #

    PS: Dont take the deleting IE thing too seriously. :D
    Insted of using the position absolute , just put the <p id="totop"> inside the <footer> and in give ir a float: right ; and the need widht:

    #totop {float:right;width:???}

  19. Ambika Sharma
    Member
    Posted 11 months ago #

    Why dont you use the plugin back to top

  20. Ambika Sharma
    Member
    Posted 11 months ago #

    Just take a Url of page where you want to use this and give this link
    Back to Top

    like that Back To Top

  21. zvitez
    Member
    Posted 11 months ago #

    Hi, I know it's not an answer to your question and you didn't ask for any advice, but keep in mind sometimes it's good to weight the actual need for a feature you want to add and the time at your disposal vs your desire to have it :) I think in your instance you've committed time for a feature that might not be needed yet, since most of your pages are actually really short, no more than 1 scroll away from the top (depending on the resolution of course). Maybe something simpler that might help to reduce scrolling is reducing the empty space above the header, and the header heght itself.

    Good luck with the site!

  22. esmi
    Theme Diva & Forum Moderator
    Posted 11 months ago #

    the . before is for classes and the # is fir id

    I'm sorry but what does this have to do with anything? FWIW, I've been playing with CSS since well before 2000 - most of that time as a professional developer.

    And you'll find that Firebug is far more powerful than Chrome's Inspector tool. It's what Chrome's Inspector tool wants to be when it grows up. :-)

Reply

You must log in to post.

About this Topic