How to add right-aligned link to footer

#1

Hello everyone!

Perhaps this is a silly question, but everything I found so far on the topic doesn’t seem to work. I’d like to add a link in my footer in the same line as the copyright info but floating right. I managed to put it in the next line, floating right, but not in the same line. How do I do this?

This is the part of my footer with only the copyright:

<footer id="colophon" class="site-footer" role="contentinfo">
	<div class="site-info container">
	<?php printf( __( 'Copyright &copy; 2015 sitename | by XYZ.') ); ?>
	</div><!-- .site-info -->
</footer><!-- #colophon -->
#2

Hi,

Add your link after php block of code which is printing copyright, and add bootstrap class pull-right to it. Here is my example:

<footer id="colophon" class="site-footer" role="contentinfo">
		<div class="site-info container">
			<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'sydney' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'sydney' ), 'WordPress' ); ?></a>
			<span class="sep"> | </span>
			<?php printf( __( 'Theme: %2$s by %1$s.', 'sydney' ), 'aThemes', '<a href="https://athemes.com/theme/sydney" rel="designer">Sydney</a>' ); ?>
			<a class="pull-right" href="https://athemes.com/theme/sydney" rel="designer">Example text right</a>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
#3

Thanks a lot! Worked just fine!

#4

You’re welcome,

Best Regards

#5

Hi, I have a related issue with Sydney theme. I see that there is only one widget footer sidebar area and this seems to be to left of footer, so if you add , say , 3 text widgets to the footer sidebar, they all appear on the left .
Is there any way I can get a widget to the middle and/or right of the footer, ideally so there are 3 widget sidebars side by side.

Regards
Andrew

#6

sorry but I have now sorted this. When I refreshed the site having updated wordpress , the footer appeared as a customisable item on dashboard -I am sure it was not there before - but maybe I am mistaken - it is late. Anyway now sorted thanks
Andrew

#7

Hello Andrew,

Awesome, glad that got it fixed.

All the Best!

#8

hi i am trying to put the social wiget in footer 1 on right side and followed all the instruction as in the documentation but it dosent appear in footer plz guide me i am new to this field thanx

#9

@shaz

Hello there,

From Appearance > Menus, create new menu ex. social menu, and add custom links with links to your social networks. Then use Sydney FP: Social Profile widget, choose that menu and place it anywhere on your front page. Even if this is front page widget you can add it inside one of footer areas.

Also, share your page link so we can see your progress.

All the Best!

#10

thanks dimikjones it works quick response really appreciated

#11

Any way to have the Social Profile menu appear left-aligned inside the footer widget? Right now it defaults to centered and doesn’t look right with the title of the widget being left aligned above it.

#12

@Julie Gomes

Hello there,

Please share your link so I can inspect your setup in order to propose custom css code if possible.

All the Best!

#13

I have them in the center footer widget right now. How can I also change the color of the icons?
http://jewelsdesignworks.com/princeofpools/

I just checked the website and see that after I was messing around with the code all afternoon… now the icons are left aligned like I wanted, but I have NO idea which piece of code made it work. So frustrating! Can you still let me know the proper code to make them left-aligned?

Thank you!!

#14

@Julie Gomes,

Hello again,

Items are left aligned because of custom css code below:

/* ---- social media icons ---*/ 
.social-menu-widget {
	padding: 0;
	margin: 0 auto;
	display: table;
	text-align: left;
	color:#464191; 
	float:left;
}

in fact you need only this:

/* ---- social media icons ---*/ 
.social-menu-widget { 
	float:left;
}

In order to change color of social icons, you can use custom css below:

#sidebar-footer ul#menu-social-profile a {
    color: #ffcc00;
}

#sidebar-footer ul#menu-social-profile a:hover {
    color: #ffffff;
}

All the Best!