Community Forums › Forums › Archived Forums › Design Tips and Tricks › Social Icons
- This topic has 12 replies, 2 voices, and was last updated 10 years, 3 months ago by nutsandbolts.
-
AuthorPosts
-
December 27, 2013 at 6:41 pm #81480sambMember
Hi all,
I'm grateful for the help here in this forum. I just had a question about creating a small area above the page content to add my social icons to, such as you can see here: outdoorcanada.ca
You'll notice that just below the menu bar, but above the page content there is a link for newsletter, and three socials icons. Can someone please tell me how to make this happen, or even suggest an alternative that is superior.
Please keep in mind that I'm not a whiz with css, but I'm trying to learn, so please go slow ... real slow. Here is my site: http://floatmonster.com
Thanks in advance
http://floatmonster.comDecember 27, 2013 at 11:55 pm #81510nutsandboltsMemberYou could do this pretty easily by adding a widget area after the nav. Here's what you would need to do:
Add the following to functions.php (I assume you want this to show up on every page of the site):
// Add the top sitewide widget area add_action( 'genesis_before_content_sidebar_wrap', 'nabm_add_sitewide_top' ); function nabm_add_sitewide_top() { genesis_widget_area( 'sitewide-top', array( 'before' => '<div id="sitewide-top">', ) ); } genesis_register_sidebar( array( 'id' => 'sitewide-top', 'name' => __( 'Sitewide Top', 'nabm' ), 'description' => __( 'This is the sitewide top widget section.', 'nabm' ), ) );
That will give you a new widget area in Appearance > Widgets called Sitewide Top where you can add your social icons.
(Note: Please be careful when editing your functions file. Don't copy the above code from your notification email because some of the formatting will be messed up - only copy and paste directly from the forum page. Make sure you have access to the site via FTP or your hosting control panel in case something goes wrong - if there is an error in the code or something missing when you paste, it could break your site, but you can remove the code via FTP or CPanel and regain access to the dashboard.)
Disclaimers aside, once you've added the widget area, you'll probably need to add some CSS to make it display correctly. For example, if you want it to float to the right like on the example link you posted, add this to your stylesheet:
#sitewide-top { float: right; }
You may also want to add padding or other style rules depending on what you've got in mind.
Let me know if you run into trouble or need more help!
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 28, 2013 at 9:56 am #81573sambMemberHi Andrea,
Thanks so much for your help! I have implemented the code exactly as you said, however it isn't working out the way it should just yet. I wrote the word Test in the widget and appears in the top left corner of the page content, just above the carousel.
Sam
December 28, 2013 at 10:04 am #81576nutsandboltsMemberFind this line in functions.php:
add_action( 'genesis_before_content_sidebar_wrap', 'nabm_add_sitewide_top' );
And replace with this:
add_action( 'genesis_after_header', 'nabm_add_sitewide_top' );
That should get it outside #inner, though it will still show up on the left corner without CSS to tell it to float right as I mentioned above.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 28, 2013 at 10:13 am #81577sambMemberDone! It is now outside the #inner, but I'd really like it to look like it does here: outdoorcanada.ca
Is there any way to make it look the same? I did implement the change you described to the css:
#sitewide-top {
float: right;
}Should this not have made it float right?
Thanks again 🙂
December 28, 2013 at 10:23 am #81580nutsandboltsMemberI'm still not seeing that in your stylesheet - are you running a caching plugin or Cloudflare by chance? If so, that probably needs to be disabled so you can see the changes after making them.
It definitely needs a little work CSS-wise. I would try something like this:
#sitewide-top { position: absolute; right: 220px; }
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 28, 2013 at 11:04 am #81594sambMemberHi Andrea,
Here's the code I tried, but I still can't get it right aligned. I tried to match the css the example site had to get that far. Oh and btw, I did have a caching plugin which I have disabled 🙂
#sitewide-top {
position: absolute;
width: 960px;
height: 22px;
padding-top: 2px;
right: 350px;
}December 28, 2013 at 11:06 am #81596nutsandboltsMemberTry taking off the width and height rules.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 28, 2013 at 11:30 am #81604sambMemberHi Andrea,
That's great! The only problem is, as the size of the browser changes I'd like the icons to remain fixed right aligned to the right side just above the page content, so that it's responsive -- I think that's what's it's called. If you look at the example site, no matter the size of browser, the icons stay fixed where they are, until some minimum threshold.
Sam
December 28, 2013 at 11:37 am #81608sambMemberHi Andrea,
I also noticed that when I remove the height and width rules and I scroll up and down, the icons also move up and down.
December 28, 2013 at 11:38 am #81609nutsandboltsMemberActually the Outdoor Canada site isn't mobile responsive and your site is - that's where the discrepancy is happening.
Try swapping out that
right: 350px;
rule forright: 20%;
- that will keep it on the right a little better at all browser sizes. Alternately, you could hide #sitewide-top on the smaller media queries. Generally you'd want to add CSS rules for each media query in the Responsive Design section of your stylesheet, but that's a little more involved and outside the scope of forum support.Re: the icons moving down the page, that's because you used
position: fixed;
instead ofposition: absolute;
in your CSS.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 28, 2013 at 11:51 am #81611sambMemberThat's fantastic Andrea,
Thanks so much for your help 🙂
December 28, 2013 at 11:51 am #81612nutsandboltsMemberNo problem! Glad you were able to get it at least somewhat close to what you were looking for. 🙂
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+ -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.