Social Icons

This topic is: resolved

This topic contains 12 replies, has 2 voices, and was last updated by  nutsandbolts 9 months, 3 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #81480

    samb
    Member
    Post count: 7

    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.com
    #81510

    nutsandbolts
    Moderator
    Post count: 3140

    You 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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #81573

    samb
    Member
    Post count: 7

    Hi 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

    #81576

    nutsandbolts
    Moderator
    Post count: 3140

    Find 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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #81577

    samb
    Member
    Post count: 7

    Done! 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 :)

    #81580

    nutsandbolts
    Moderator
    Post count: 3140

    I’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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #81594

    samb
    Member
    Post count: 7

    Hi 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;
    }

    #81596

    nutsandbolts
    Moderator
    Post count: 3140

    Try taking off the width and height rules.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #81604

    samb
    Member
    Post count: 7

    Hi 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

    #81608

    samb
    Member
    Post count: 7

    Hi 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.

    #81609

    nutsandbolts
    Moderator
    Post count: 3140

    Actually 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 for right: 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 of position: absolute; in your CSS.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #81611

    samb
    Member
    Post count: 7

    That’s fantastic Andrea,

    Thanks so much for your help :)

    #81612

    nutsandbolts
    Moderator
    Post count: 3140

    No problem! Glad you were able to get it at least somewhat close to what you were looking for. :)


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.