-
Posts
-
Hi,
I’d like to setup a Student Login button next to the social media buttons on the header and footer. This button will link to an LMS site.
If this is too hard, it may be easier to edit one of the social media image buttons I’m not using and link that one. If so, where can I find these social media buttons to replace?
I can set this up on the sidebar but I’d prefer on the header & footer
Any advice would be great.Regards
LiniseiHey Linisei,
there are two options. The first would require you to setup a child theme and then alter some files and just replacing the icon with some other icon would be a easy CSS tweak. You could pick any icon that you can normally pick from our included icon shortcoded but transforming the icon into a login form won’t work. So tell me how you want to proceed.
Thanks support,
I’ve setup the child theme. I’d like to proceed as per your recommendations. I don’t need a login form, just a link from the button.
Btw great theme, best theme ever.Hey Linisei,
Thank you very much for your kind words! Always means a lot to hear those things around here. 🙂
Alright, to add your icon you’re going to need to find the x_social_global() function in the following file:
/framework/functions/global/miscellaneous.php
We’re going to copy this function over to the functions.php file in your child theme to make an edit to it in there, not the core file of the theme. To make things easy, I’ve gone ahead and copied the function for you. Merely copy this into your functions.php file:
function x_social_global( $position = 'topbar' ) { $facebook = get_theme_mod( 'x_social_facebook' ); $twitter = get_theme_mod( 'x_social_twitter' ); $google_plus = get_theme_mod( 'x_social_googleplus' ); $youtube = get_theme_mod( 'x_social_youtube' ); $vimeo = get_theme_mod( 'x_social_vimeo' ); $instagram = get_theme_mod( 'x_social_instagram' ); $pinterest = get_theme_mod( 'x_social_pinterest' ); $dribbble = get_theme_mod( 'x_social_dribbble' ); $linkedin = get_theme_mod( 'x_social_linkedin' ); $rss = get_theme_mod( 'x_social_rss' ); if ( $position == 'topbar' ) { $tooltip = 'data-toggle="tooltip" data-placement="bottom" data-trigger="hover"'; } else { $tooltip = 'data-toggle="tooltip" data-placement="top" data-trigger="hover"'; } $output = '<div class="x-social-global">'; if ( $facebook ) : $output .= '<a ' . $tooltip . ' href="' . $facebook . '" class="facebook" title="Facebook" target="_blank"><i class="x-social-facebook"></i></a>'; endif; if ( $twitter ) : $output .= '<a ' . $tooltip . ' href="' . $twitter . '" class="twitter" title="Twitter" target="_blank"><i class="x-social-twitter"></i></a>'; endif; if ( $google_plus ) : $output .= '<a ' . $tooltip . ' href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-social-google-plus"></i></a>'; endif; if ( $youtube ) : $output .= '<a ' . $tooltip . ' href="' . $youtube . '" class="youtube" title="YouTube" target="_blank"><i class="x-social-youtube"></i></a>'; endif; if ( $vimeo ) : $output .= '<a ' . $tooltip . ' href="' . $vimeo . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-social-vimeo"></i></a>'; endif; if ( $instagram ) : $output .= '<a ' . $tooltip . ' href="' . $instagram . '" class="instagram" title="Instagram" target="_blank"><i class="x-social-instagram"></i></a>'; endif; if ( $pinterest ) : $output .= '<a ' . $tooltip . ' href="' . $pinterest . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-social-pinterest"></i></a>'; endif; if ( $dribbble ) : $output .= '<a ' . $tooltip . ' href="' . $dribbble . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-social-dribbble"></i></a>'; endif; if ( $linkedin ) : $output .= '<a ' . $tooltip . ' href="' . $linkedin . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-social-linkedin"></i></a>'; endif; if ( $rss ) : $output .= '<a ' . $tooltip . ' href="' . $rss . '" class="rss" title="RSS" target="_blank"><i class="x-social-rss"></i></a>'; endif; $output .= '</div>'; echo $output; }Next, we’re going to need to add our own icon to the output. To do so, add the following line after the final if statement for the RSS link:
$output .= '';
Simply update the href attribute to the link you need it to go to, change the title to whatever you’d like it to be as this will show up in the tooltip, and then update the icon to what you want it to be.
Finally, you’ll need to update the icon. Currently, we’re using our social icon set for this:
<i class="x-social-rss"></i>
Instead, you’re probably going to want to use one of the Font Awesome icons, like so:
<i class="x-icon-sign-in"></i>
Note that we changed the class prefix from x-social to x-icon (this is what switches the font family from Foundation Social to Font Awesome), and then we updated the icon type at the end from rss to sign-in. We get these values by going to the Font Awesome website and browsing the list of fonts and selecting the one we want to use. For example, I chose fa-sign-in based on what you’re trying to accomplish. All you need to do is take the value after the “fa-“ and place that after the “x-icon-“ prefix in the example above.
Hopefully that all makes sense. You’ll likely need a little additional CSS to style it some, but that will get everything in order for you.
Thanks!
Awesome,
I’ll give it a go.Thanks heaps for your help
No problem, that’s what we’re here for. 🙂
Great,
Worked a treat!
How about if I just wanted the words STUDENT LOGIN besides the social icons?with no icon
Hey there,
You can use the same technique as above, but you will just remove the icon and place your text in it’s place.
Thanks!
Thank you much 🙂
Best supportYou’re welcome. If you need anything else do not hesitate to get in touch with us!
