Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Footer Credits + Social Icons?
- This topic has 26 replies, 2 voices, and was last updated 9 years, 8 months ago by
Vasilis.
-
AuthorPosts
-
June 6, 2015 at 1:14 am #155061
Vasilis
MemberHey awesome people!
I'm thinking if it is possible to add Simple Social Icons at the right side where Altitude's footer credits are?
Here is my website => http://cleancar.me
I would like to place the social icons at the right side of where the footer credits are.
Kindly appreciate your help.
~ Vasilis
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 1:28 am #155063Erik D. Slater
MemberIn your functions.php file, you could change
add_theme_support( 'genesis-footer-widgets', 1 );
to
add_theme_support( 'genesis-footer-widgets', 2 );
to give you a second footer widget ... and then add Simple Social Icons into the new Footer 2 widget.
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 1:30 am #155064Erik D. Slater
MemberAhhh ... hang on a sec ... that may not work in your case here ... since I don't think you're using your footer widgets ...
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 1:33 am #155065Erik D. Slater
MemberThis might help: http://briangardner.com/add-social-icons-footer/
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 1:36 am #155066Vasilis
MemberYeah this is what I've been looking for a while,
however Brian talks about social footer widget...
I'm talking about the footer credits part...
Isn't there a difference between the hooks or it should work as normal?
Thank you once again Erik!
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 1:55 am #155070Erik D. Slater
MemberTaken straight from my almost-completed custom theme (for the Rainmaker platform) ... which widgetizes the page footer ... which will then allow you to completely customize the page footer (i.e. not the footer widgets) in the Widgets area rather than hooking into the relevant filter.
// Register "Page Footer" Widget genesis_register_sidebar( array( 'id' => 'eds-page-footer', 'name' => __('Page Footer', CHILD_THEME_NAME), 'description' => __('Widgets added here will display output at the bottom of the page.', CHILD_THEME_NAME), ) ); // Replace default footer ouptut with widgetized area // @since 1.0.0 add_filter('genesis_footer_output', 'eds_genesis_footer_output', 10, 3); function eds_genesis_footer_output($output, $backtotop_text, $creds_text) { dynamic_sidebar('eds-page-footer'); }
This should then allow you to make use of the Simple Social Icons plugin.
Just remember to remove any other filter for the footer to avoid possible weirdnesses ...
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 2:57 am #155077Vasilis
MemberHey Erik,
The php code continuously breaks my site.
Maybe I should remove the "eds" part in front of the php function names?
I'm an amateur when it comes to php
Kindly Appreciated
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 3:25 am #155083Erik D. Slater
MemberWhen you say it breaks your site, are you getting any error messages?
If you like, you can send me your functions.php to [email protected] ... just in case there is a paste issue (that's happened before).
The "eds" part just makes any function declarations unique ... which is necessary if you collect various code snippets from all over the place 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 3:52 am #155089Erik D. Slater
MemberThere is another piece of code you may need:
// Enable execution of shortcodes in widgets
add_filter('widget_text', 'do_shortcode', 10, 1);
You'll need this to enable the interpretation of shortcodes when used inside a widget.
Sorry about that 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 9:35 am #155108Vasilis
MemberJust send you my functions.php file Erik
I can't express how much I thank you.
Kind Regards
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 9:41 am #155109Erik D. Slater
MemberThanks for sending the file ... but I don't my code proposals in there. Did you take it out?
Also, did you try out that last code snippet I provided there?
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 9:50 am #155110Vasilis
MemberOk I found what was breaking the php,
there were missing some " ' " from the php
Now WORKING OK!
Not same lines though....the appear differently,
probably something in Css, right?
Check it on website: http://cleancar.me
Kind Regards
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 10:02 am #155113Erik D. Slater
MemberOh good. Glad that's working now 🙂
And yeah, styling is always that "next" bit that needs to be sorted 🙂
Since I last saw your page, you appear to have added a new dropdown menu to your footer there.
For the .simple-social-icons selector, you could add
float: left;
orfloat: right;
... depending on where you want it.
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 10:10 am #155115Vasilis
MemberYeah I was testing something to add the same language selector as on the nav menu just after the social icons.
But for now what I would like to do is bring the social icons at the same horizontal level with the footer credits cause now they are one line higher I think.
Is this possible?
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 10:56 am #155122Erik D. Slater
MemberI think you missed my last post there 🙂
Add
float: right;
to .simple-social-icons if you want the social icons aligned to the right.
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 11:12 pm #155159Vasilis
MemberHey Erik,
I checked this CSS part but I think it does not apply for the Simple Social Icons on the footer credits part...
At least I cant see any change when placing this code in my CSS.
I did it like this
/* Simple Social Icons
--------------------------------------------- */.altitude-home .content .simple-social-icons {
margin-top: 40px;
float: right;
}.altitude-home .content .simple-social-icons ul li {
margin: 0 20px !important;
}.altitude-home .content .simple-social-icons ul li a,
.altitude-home .content .simple-social-icons ul li a:hover {
padding: 30px;
}The problem is that social icons are in different line and not aligned with footer credits at the same horizontal space.
Social Icons appear one line before the footer credits.
Can we bring this at the same horizontal level?
Kindly appreciated.
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 11:27 pm #155160Erik D. Slater
MemberAlrighty then ... here it is, my friend 🙂
(1) Remove the
float: right;
from where you placed it under .altitude-home .content .simple-social-icons. Even if that did work, it would only do so on your home page.(2) Immediately above that .altitude-home .content .simple-social-icons definition, add the following:
.simple-social-icons {
float: right;
}
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 11:34 pm #155161Erik D. Slater
MemberJune 6, 2015 at 11:44 pm #155162Vasilis
MemberOk awesome!!!
That did the trick!
Thank you very much 🙂
Now how would I be able to add the flag language selector right next to them?
You think it is possible?
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 7, 2015 at 12:26 am #155164Erik D. Slater
MemberYou think it is possible?
I KNOW it's possible ... although I don't know on which side you want it 🙂
I'd place it in a text widget in your newly-acquired Page Footer widget area. Styling will be required afterwards ... which will likely replace the bit we just added 🙂
The only thing is ... your footer is likely going to look a bit messy on narrower widths, i.e. mobile devices and lower screen resolutions. There is an easy fix for that ... but one thing at a time 🙂
Erik D. Slater: Digital Platform Consultant • LinkedIn -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.