Community Forums › Forums › Archived Forums › General Discussion › Shortcode for Simple Social Icons
- This topic has 15 replies, 2 voices, and was last updated 11 years, 3 months ago by
sdbroker.
-
AuthorPosts
-
October 21, 2013 at 3:36 pm #68094
sdbroker
MemberHello,
Is there a short code for the "Simple Social Icons" plugin? I'd like to add them on the above the header menu bar within a text widget side by side to the rest of the menu items. If I add the plugin the icons, they show below the rest of the other menu items.
Anyone knows how this can be fixed?
Thank you!
October 21, 2013 at 11:27 pm #68139Sridhar Katakam
ParticipantOctober 22, 2013 at 10:13 pm #68342sdbroker
MemberHi Sridhar,
Here's my site: http://www.alexiourealty.com but I moved the social icons from the header menu to the footer since the plug in puts them either above or below the rest of the top menu.
BTW - I found a way to implement your "pages instead of posts" on agency concept article on the minimum theme and works like a charm. 🙂 Thank you for that!
October 22, 2013 at 10:28 pm #68351Sridhar Katakam
ParticipantIt is possible to add a widget area at the left or right side of any of the three navigation menus in Genesis.
Here's an example: http://sridharkatakam.com/how-to-add-a-widgeted-area-in-navigation-bar-in-genesis/
October 22, 2013 at 10:51 pm #68356sdbroker
MemberHi Sridhar,
That won't work because I'm using the custom menu to the "Header Right" widget. The menu just above that custom menu is just a text widget that I placed on the same Header Right" box and it displays just above the header menu as a top menu. I want to use a couple social icons from the Social Icons plugin to be placed on the right of that "text" top-menu. I believe a shortcode to call those icons will do the job. Dropping the plugin on that same "Header Right" box, puts the icons either above that "text" top menu if I have them aligned right or puts them almost next to the logo if I have them align center or left...
October 22, 2013 at 10:59 pm #68357Sridhar Katakam
ParticipantDropping the plugin on that same “Header Right” box, puts the icons either above that “text” top menu if I have them aligned right or puts them almost next to the logo if I have them align center or left…
Can you do that and post back? It might be possible to use CSS to put them in one line.
October 22, 2013 at 11:12 pm #68358sdbroker
MemberOk, I dropped the plugin on the "header Right" box, aligned hem right and they now appear on the top right above that "text" menu. I'm trying to have them on the same line to the right of the "text" menu.
Another way that I think it could work, is to add the links to the same text widget and then somehow to have those simple icon fonts called up to the link...October 22, 2013 at 11:51 pm #68363Sridhar Katakam
ParticipantAdd the following at the end of child theme's style.css:
#simple-social-icons-3 { float: right; } .site-header .widget-area { margin-top: 2rem; } .simple-social-icons ul li { margin-bottom: 0 !important; }
October 23, 2013 at 12:12 am #68364sdbroker
MemberHi Sridhar,
I added it and nothing changed. I believe that it'll only work correct if somehow either the plugin (through a shortcode) or its fonts (as the title of a link) gets called from within the text widget on that menu. 🙁
October 23, 2013 at 12:23 am #68365Sridhar Katakam
ParticipantThere are errors in your style.css that needs to be fixed. As a simple test, add
body { display: none; }
at the end and save it. Now when you refresh any page of your site, nothing should appear but everything does. It means, there are show-stopper errors which you might want to definitely fix. These are preventing any new style rules placed at the bottom from working.
October 23, 2013 at 12:44 am #68366sdbroker
MemberYou're right! After placing it at the end everything still appears. I changed themes momentarily and put it on the new theme and nothing appeared. Thank you so much for finding this!
Could you please give me an example of what a "show-stopper" error is, so I know what to look for?
Thank you again for finding this issue!
October 23, 2013 at 12:55 am #68367sdbroker
MemberI think I found the location of that "show-stopper" error within my plugin's override css by moving up that
body { display: none; }
until I found the location... Thank you!
October 23, 2013 at 12:55 am #68368Sridhar Katakam
ParticipantA few examples:
In
.site-tagline { background-color: #rgba(0, 0, 0, 0.6); border-bottom: 1px solid #eee; box-shadow: 0 10px 30px #000000; margin-top: 60px; margin-top: 6rem; padding: 40px 0; padding: 4rem 0; }
it should be
background-color: rgba(0, 0, 0, 0.6);
//** Home Communities section (Use Genesis Featured Pages widget) ---------------------------------------------------------------------------------------------------- /
should be
/** Home Communities section (Use Genesis Featured Pages widget) ---------------------------------------------------------------------------------------------------- /
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.alexiourealty.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en should give you more clues.
October 23, 2013 at 1:23 am #68370sdbroker
MemberI found a closing "}" missing from one of he plugin's Media rules which fixed the "show-stopper" error! 🙂 I'll have to look at other ones that you pinpoint!
Now the Simple Icons appear next to the "text" top menu, as you said! You are a GENIUS!
After the Simple Icons got to the right of that text menu, there's a lot of empty space on the header between the "Custom Menu" and the top "text & icons" menu. Is that because of the Icon circles?
Thank you so much!
October 23, 2013 at 2:02 am #68372Sridhar Katakam
Participant.simple-social-icons ul li { margin-bottom: 0 !important; }
is supposed to take care of that but looks that it is not working because !important is coming from the plugin itself.
Try changing that to
.simple-social-icons ul li { margin-bottom: 0 !important; height: 15px; }
If you are not happy with the results, you might want to just use icon fonts.
October 23, 2013 at 2:42 am #68373sdbroker
MemberOk! I changed both the height on the ul li and margin-top on the widget-area above that to:
.site-header .widget-area { margin-top: 0.2rem; } .simple-social-icons ul li { margin-bottom: 0 !important; height: 10px; }
and it now looks GREAT! Thank you so much I'm happy with it now!
If you don't mind a code question regarding the widget placement on front page. What's the CORRECT hook to place the home page widgets AFTER the home-featured widget:
genesis_before_content_sidebar_wrap
,genesis_before_content
or something else?I have all of them that follow the theme's standard "home-featured" in
genesis_before_content_sidebar_wrap
. Is this ok?Thank you so much again for all your help!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.