Can't centre align text in footer

  • Hi,

    I know there are a lot of these threads about aligning the footer which I have read through and most of them say to edit the style.css file. However, as I have a child theme my style.css file doesn’t have any code it simply tells the child theme to take the style sheet from the parent theme.

    I am a massive newb at coding so please explain stuff in full!

    All I want to do is put the ‘copyright’ bit on the same line as ‘disclaimer’ and centre align.

    My site is https://www.tombretravel.com and below is a copy of my child footer.php file and style.css file. Any help would be amazing!

    Cheers,

    Tom.

    /*
 Theme Name:   Twenty Sixteen Child
 Theme URI:    https://tombretravel.com
 Description:  Twenty Sixteen Child Theme
 Author:       Tom Brewerton
 Author URI:   https://tombretravel.com
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-sixteen-child
*/
    <?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the #content div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>

		</div><!-- .site-content -->

		<footer id="colophon" class="site-footer" role="contentinfo">
			<?php if ( has_nav_menu( 'primary' ) ) : ?>
				<nav class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Primary Menu', 'twentysixteen' ); ?>">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'primary',
							'menu_class'     => 'primary-menu',
						 ) );
					?>
				</nav><!-- .main-navigation -->
			<?php endif; ?>

			<?php if ( has_nav_menu( 'social' ) ) : ?>
				<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Footer Social Links Menu', 'twentysixteen' ); ?>">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'social',
							'menu_class'     => 'social-links-menu',
							'depth'          => 1,
							'link_before'    => '<span class="screen-reader-text">',
							'link_after'     => '</span>',
						) );
					?>
				</nav><!-- .social-navigation -->
			<?php endif; ?>

			<div class="site-info">
				<?php
					/**
					 * Fires before the twentysixteen footer text for footer customization.
					 *
					 * @since Twenty Sixteen 1.0
					 */
					do_action( 'twentysixteen_credits' );
				?>
<p>&copy2016 <a href="https://tombretravel.com">tombretravel</a></p>
<a href="https://tombretravel.com/disclaimer/">Disclaimer</a>
			</div><!-- .site-info -->
		</footer><!-- .site-footer -->
	</div><!-- .site-inner -->
</div><!-- .site -->

<?php wp_footer(); ?>
</body>
</html>
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi Tom. Unless you’re making other changes to the footer, you don’t need the footer.php file in your child theme. Try adding this to your child theme style.css file:

    /* center the content */
.site-info {
  margin: 0 auto;
}
/* move the disclaimer up inline with copyright */
.site-info p {
  float: left;
}
/* space between copyright and disclaimer */
.site-info p a {
  margin-right: 30px;
}
    Thread Starter tombrew123

    (@tombrew123)

    Hi,

    That code worked an absolute treat so big thanks for that! The reason I have the footer.php is because I edited the original to include my copyright and disclaimer page. I thought when the parent theme updates I will lose these changes?

    Thanks,

    Tom.

    Thread Starter tombrew123

    (@tombrew123)

    Just a quick update, I’ve added in a contact page in the footer but the spacing is too close between ‘contact’ and ‘disclaimer’. How do i fix this?

    I tried adding in: 

    /* space between disclaimer and contact */
.site-info p a {
  margin-right: 30px;
}

    But that didn’t do anything. Would you be able to briefly explain how the code you provided me with changed what I wanted? I understand the command like ‘float/margin/30px’ etc, but I presume it’s the ‘site info p a’ bit that moves the correct thing around?

    Hope that makes sense!

    Tom.

    when the parent theme updates I will lose these changes

    Yes, if you modify the default theme file. If you have the modified copy in your child theme then it will retain the changes when you update the theme. The only thing you need to remember is that the theme files may change so you need to check the new version of footer.php on each update, and possibly copy the new version to your child theme and reapply your modifications.

    explain how the code you provided me with changed what I wanted

    What you can do is use a utility like Chrome Developer Tools or Firefox Firebug or the IE/Edge Developer Tools to view your site structure and css. You can make both html and css changes that are reflected in real-time (but they aren’t saved), and then copy those changes to your child theme template files or custom css.

    Here are a couple of references on CSS syntax and selectors:
    https://www.w3schools.com/css/css_syntax.asp
    https://www.w3schools.com/cssref/css_selectors.asp

    Regarding the Contact link, I noticed that you had non-breaking spaces in there earlier. I generally only use those within content, and not very often. When you’re trying to adjust the presentation of the page, using CSS is the preferred method.

    The site-info div in the footer looks like this:

    <div class="site-info">
    <p>?2016 <a href="https://tombretravel.com">tombretravel</a></p>
    <a href="https://www.tombretravel.com/contact/">Contact</a>
    <a href="https://tombretravel.com/disclaimer/">Disclaimer</a>
</div>

    The code I posted above added a right margin to the anchor tag (your site link) within the paragraph tag that is in the div element that has a “site-info” class. It doesn’t affect the other two link anchor tags (Contact and Disclaimer) because they are outside of the paragraph element. To apply the margin to all the anchor tags you could change the css to this:

    .site-info a {
    margin-right: 30px;
}

    That way it looks for all the anchor tags within the site-info div and doesn’t use the paragraph tag as a selector.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Can't centre align text in footer’ is closed to new replies.