Return to Support

Social Media Buttons in Graphene Header?

Home Forums Graphene WordPress theme Support Social Media Buttons in Graphene Header?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #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!!!

    #22522
    Josh
    Member

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

    #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?

    #22524
    Josh
    Member

    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/

    #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 🙂

    #22526
    Josh
    Member

    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?

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

    #22528
    Josh
    Member

    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.

    #22529

    Done, but still kept things on the left.

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

    #22530
    Josh
    Member

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

    #graphene-dynamic-widget-graphene_header {
    padding-left: 690px;
    }

    #22531

    Now I’m starting to feel pretty stupid–I didn’t set up any child themes (that I know of!), and I can’t find that code anywhere where I’ve been editing custom stuff.

    It should be in the ‘editor’ section under ‘appearance,’ correct?

    #22532
    Josh
    Member
    #22533

    Wow…I just followed those directions to upload a child theme, then inserted the code you mentioned above with the 690 padding. Someone PLEASE take a look at my page–I have no clue what happened but it’s obviously not correct! Can anyone help me ASAP?

    #22534
    Prasanna SP
    Member

    What is not correct? Your Social Media Icons looks fine here. (which is aligned to right as you wanted). But something is nasty with your navigation menu..

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

You must be logged in to reply to this topic.