WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Re-align 'back to top' (24 posts)

  1. chappie
    Member
    Posted 9 months ago #

    Defaults to right align in the white footer but the other elements down there are centred so that they align vertically with the FP images and buttons. I tried hunting for correct code to change via Custom CSS, but failed. Thanks for any help.

  2. rdellconsulting
    Member
    Posted 9 months ago #

    Try this:

    .back-to-top {
    padding-right: 160px;
    }
  3. chappie
    Member
    Posted 9 months ago #

    Hi Dave - to scale down gracefully it needs to float in the middle of the right-hand section of the white footer...the same as the social icons float in the left section when they are in the footer. I tried:

    margin-left:auto;
    margin-right:auto;

    but that didn't do it.

  4. rdellconsulting
    Member
    Posted 9 months ago #

    The usual centering code is:
    margin: 0 auto;

    I’ve never totally mastered the Media Library. The trick I use is to load my images into a fixed folder (eg wp-content/uploads/_media so that when you add <a href="”xxx”"> it’s easy to find the images. I also add dimensions to the image name (eg rdell_logo_270x250.jpg, rdell_logo_270x250_transparent) to make it easy to identify them. Works for me. Try googling Codex Media Library for more info.

  5. tomaja
    Member
    Posted 9 months ago #

    @chappie you could try

    .back-to-top {
    float: none;
    }
  6. chappie
    Member
    Posted 9 months ago #

    Deleted by OP.

  7. chappie
    Member
    Posted 9 months ago #

    Sorry - I'll try that again. I can change the colour of "Back to top" with:

    footer#footer .colophon .pull-right a {
    color: #8f48e2;
    }

    But all my attempts to relatively re-position it to match the centre positions of the other footer elements (social icons and credits) have failed. This does move it to exactly where I want it on a wide viewport but it breaks it into two lines on laptop screens and smaller (suggesting that I actually want it to float left within what I assume is a 150px wide container down there):

    footer#footer .colophon .pull-right a {
    padding-right: 150px;

    Of the other options I have played with:

    margin-right:auto does nothing
    position:relative does nothing
    pull-left does nothing
    float:none does nothing; and

    position:absolute;
    left:0px;
    overflow:inherit;

    moves it to the left of the page

    I've been searching the code for other elements to target instead and found something called a modal-footer, whatever that is. But it had some text right-alignment applied to it so I tried:

    .modal-footer {
      text-align: left;

    ...and that did nothing (that I could see).

    I'm hoping someone will know the answer. It isn't even logical (to me) that this element should be aligned to the right when the other two elements in the white footer are centred within their spans.

  8. chappie
    Member
    Posted 9 months ago #

    Ho-hum. The div class hierarchy down there appears to be:

    "colophon"
    "container" :before
    "row-fluid" :before
    "span4 backtop" <p class="pull-right"><a class="back-to-top"

    ...which hasn't helped me yet...

  9. chappie
    Member
    Posted 9 months ago #

    I would like to have the sticky menu for the larger viewports and have it auto-deactivate as soon as the 3-bar menu kicks in since it takes up a lot of screen estate at smaller screen sizes.

    Can anyone please tell me how to deactivate it for tablet/phone sizes?

    Thanks as ever.

  10. rdellconsulting
    Member
    Posted 9 months ago #

    You need to use @media code.

    Rather than leave the sticky menu code in the main section before the @media where it will be executed by default, I'd try moving the code into a @media block for larger viewports (eg>979px). So the default will be not sticky unless viewport>979px.

  11. chappie
    Member
    Posted 9 months ago #

    Apologies - my sticky menu question is in the wrong thread. And thank you Dave. You may be shocked to hear that I worked it out for myself!

    Now, back on topic...

  12. rdellconsulting
    Member
    Posted 9 months ago #

    I've lost the thread! Back-to-top? Any link available?

  13. chappie
    Member
    Posted 9 months ago #

    I hope this is the "back-to-top" thread Dave! But I'm obviously confused.

    For the sake of clarity, I'm nowhere near solving my issue in this thread. The one I did work out was the Sticky Navbar @media fix.

  14. rdellconsulting
    Member
    Posted 9 months ago #

    Can we see a link? Be specific again on where you want back-to-top moved to.

  15. chappie
    Member
    Posted 9 months ago #

    I'm with it now. Here's an image. The vertical red lines are on the centre point of the FP images and 2 of the 3 elements in the white footer. The rogue is "Back-to-top" which is pushed right. How can I centre it on the right-hand vertical so as to be consistent?

    http://s1008.photobucket.com/user/3785/media/public/back-to-top.png.html

  16. rdellconsulting
    Member
    Posted 9 months ago #

    OK, try this:

    footer#footer .colophon a.back-to-top {
    position: relative;
    left: -300%
    }

    I've used % rather than px for smaller viewports, but you'd need to check it and add @media adjustments.

  17. chappie
    Member
    Posted 9 months ago #

    Thanks, Dave. That certainly moves it; but what looks centred in one view drifts out of alignment when the viewport is reduced.

    I also tried "right" and that had the same issue. But I'll play with it some more as my earlier poor results were targeting ".colophon .pull-right" which wasn't responding.

    Nil desperandum.

  18. rdellconsulting
    Member
    Posted 9 months ago #

    but what looks centred in one view drifts out of alignment when the viewport is reduced.

    That's what the @media is all about ;)

  19. chappie
    Member
    Posted 9 months ago #

    I tried all my other alignment options again but none of them worked on smaller screens.

    You're hinting that I need to set different alignment parameters for each @media option...? How many is that - four, as in 'phone, tablet, laptop and monitor?

  20. chappie
    Member
    Posted 9 months ago #

    Looks like five:

    @media (max-width: 1200px)
    @media (max-width: 979px)
    @media (max-width: 767px)
    @media (max-width: 480px)
    @media (max-width: 320px)

    Nightmare ;-) Such a small thing...

  21. chappie
    Member
    Posted 9 months ago #

    Hasn't Nico already done this? The other two elements in my white footer align perfectly in the centre of their spans at all viewport sizes, namely the social icons and the credit. I've been trying, without success, to track down his code. Needle in a haystack when I don't even know which directory to look in. I found a big pile of "coloured" style sheets but couldn't find what I was looking for in any of them.

  22. rdellconsulting
    Member
    Posted 9 months ago #

    Look in customizr/parts where most of the HTML is generated using object-oriented coding.

  23. chappie
    Member
    Posted 9 months ago #

    Thanks Dave - I'm off to have a look. If you don't hear back from me within a week, send out a search party.

  24. chappie
    Member
    Posted 9 months ago #

    If this is the code, I'm none the wiser:

    ?>
    
    	        <div class="span4 social-block pull-left">
    	        	<?php if ( 0 != tc__f( '__get_option', 'tc_social_in_footer') ) : ?>
    	        		<?php tc__f( 'tip' , __FUNCTION__ , __CLASS__, __FILE__ ); ?>
    	           		<?php echo tc__f( '__get_socials' ) ?>
    	           	<?php endif; ?>
    	        </div>
    
            <?php

    and

    ?>
    
        	<?php ob_start() ?>
    	    <div class="span4 backtop">
    	    	<?php tc__f( 'tip' , __FUNCTION__ , __CLASS__, __FILE__ ); ?>
    	    	<p class="pull-right">
    	    		<a class="back-to-top" href="#"><?php _e( 'Back to top' , 'customizr' ) ?></a>
    	    	</p>

    If I am reading this correctly, the social icons in the footer have a "pull-left" and yet they aren't left-aligned because they float centrally in their span.

    And the back-to-top is assigned a "pull-right" which does align to the right and doesn't float like the social icons do.

    Confusing.

Reply

You must log in to post.

About this Theme

About this Topic