Social Media Buttons in Graphene Header?

  • The Freecyclist

    #2902

    Hi Everyone,

    I’m very new to WP, CSS, and Graphene, but I do have some coding knowledge. I’m in the process of building my site, and I’d love to know what the easiest way is to add social media buttons to the header of the Graphene theme (I’d love for them to all be aligned in the upper right corner of the current white space–bonus points if someone can share how I can upload functional buttons that I created myself in Photoshop). I know that I’ll need to change the width of my current header image and know how to do that, but then I’m at a loss for the rest.

    If this is covered somewhere else, I apologize as I couldn’t find it by searching the forums. Anything you can share would be greatly appreciated!!!

    Josh

    #22522

    Okay. Go to your admin panel -> appearance -> graphene options.

    Make sure “Hide Feed Icon” is unchecked.

    Enter your RSS feed url, your twitter url, and your facebook url.

    If you have other social media profiles, you can click the “Add new social media icon”.

    Once you have all your icons. You can float them to the right instead of the left by inserting this into your child theme or custom css:

    #rss {
    float: right;
    }

    The Freecyclist

    #22523

    Thanks! But I would like to not have a top bar at all (I’ve already removed it from the code); I want to embed them in the standard header space. Any ideas about that?

    Josh

    #22524

    Sure. You can use a custom action hook and insert the code. It might take a little css “tweakage” to get it positioned just right.

    If you’ve never heard of action hooks before, check out Ken’s super-awesome tutorial here:

    http://blog.kjodle.net/2011/11/04/graphene-action-hook-widgets-an-easy-way-to-modify-your-blog/

    And you can also check out my mediocre video tutorial here 😉

    http://www.joshlobe.com/2011/10/video-tutorial-using-action-hooks-in-graphene-simple/

    The Freecyclist

    #22525

    Ahh…you are awesome; thank you!!! And for the record, that video is exactly what I needed so I definitely wouldn’t consider it “mediocre!”

    One more thing, I have them all up there, but they’re all positioned in the top left corner despite adding right corner code. Any suggestions?

    Next up is figuring out how to change the menu color…ugh 🙂

    Josh

    #22526

    I think I got your menu color in the other post.

    Show me the code you used to insert your images. It looks like you’ve got them nested too far down in the code.

    Did you check the action hook, go to your widget area, and insert one widget in the new area? Or did you insert multiple widgets?

    The Freecyclist

    #22527

    Just one widget–the ‘graphene header’ one, with this entered in the textbox:

    <P ALIGN=Right>
    <a href="http://thefreecyclist.com/?page_id=14"><img src="http://www.orgjunkie.com/wp-content/themes/org_junkie/images/oj-contact.png" alt="Contact" title="Contact" /></a> <a href="http://www.facebook.com/pages/The-Freecyclist/238667819541298"><img src="http://www.orgjunkie.com/wp-content/themes/org_junkie/images/oj-facebook.png" alt="Facebook" title="Facebook" /></a> <a href="https://twitter.com/#!/thefreecyclist"><img src="http://www.orgjunkie.com/wp-content/themes/org_junkie/images/oj-twitter.png" alt="Twitter" title="Twitter" /></a>
    <a href="http://thefreecyclist.com/?feed=rss2"><img src="http://www.orgjunkie.com/wp-content/themes/org_junkie/images/oj-rss.png" alt="Subscribe!" title="Subscribe!" /></a>
    </P ALIGN=Right>

    Pulling from another source for icons until I figure out how to get everything on the right.

    Josh

    #22528

    Okay, take out that align right. As a matter of fact, replace the whole thing with this code:

    <a href="http://thefreecyclist.com/?page_id=14"><img src="http://www.orgjunkie.com/wp-content/themes/org_junkie/images/oj-contact.png" alt="Contact" title="Contact" /></a> <a href="http://www.facebook.com/pages/The-Freecyclist/238667819541298"><img src="http://www.orgjunkie.com/wp-content/themes/org_junkie/images/oj-facebook.png" alt="Facebook" title="Facebook" /></a> <a href="https://twitter.com/#!/thefreecyclist"><img src="http://www.orgjunkie.com/wp-content/themes/org_junkie/images/oj-twitter.png" alt="Twitter" title="Twitter" /></a>
    <a href="http://thefreecyclist.com/?feed=rss2"><img src="http://www.orgjunkie.com/wp-content/themes/org_junkie/images/oj-rss.png" alt="Subscribe!" title="Subscribe!" /></a>

    Do that, and let me take another look.

    The Freecyclist

    #22529

    Done, but still kept things on the left.

    I really appreciate all of your help with this!!!

    Josh

    #22530

    No worries. Okay, now add this to your child theme or custom css:

    #graphene-dynamic-widget-graphene_header {
    padding-left: 690px;
    }
Viewing 10 posts - 1 through 10 (of 14 total)

You must be logged in to reply to this topic.