WordPress.org

Ready to get started?Download WordPress

Forums

Aligning social media in header [Graphene Theme] (10 posts)

  1. Reuben Penner
    Member
    Posted 2 years ago #

    Hello:

    I am using the Graphene theme and trying to align my social media 'like' buttons to the right in the header.

    Here is the website you so you can see what I mean: http://raiseaglassforhumanity.ca/

    I do not know code, though I've been able to follow some tutorials on the web to modify the .php files.

    Any help would be appreciated.
    Thanks

  2. newsdevice
    Member
    Posted 2 years ago #

    Go to your themes CSS file and define the header-widget class to align right.

    - always backup files before making any changes.

  3. Reuben Penner
    Member
    Posted 2 years ago #

    Thanks for the quick reply.

    Can you give me some more help as to the location of making these changes. Are you referring to the file: style.css for the graphene theme? And if so, what line do I make these changes. I can't find a 'header-widget' class in the style.css or any other file for that matter.

    And do I use the code: position: absolute; right 20x

  4. Prasanna SP
    Member
    Posted 2 years ago #

    Add this to your child theme's style sheet or in Graphene Options --> Display --> Custom CSS

    .sociable ul {
        float: right;
    }
  5. Reuben Penner
    Member
    Posted 2 years ago #

    Thanks for this Prasanna...

    This worked well to move the .sociable plugin at the bottom of the post. However, I am using the social profiles widget (http://www.studiopress.com/plugins/social-profiles-widget)

    for the code above, I tried substituting .sociable for "social profiles:, "social profiles widget", "social_profiles_widgets", "social-profiles-widgets", socialprofiles.... but nothing worked.

    Any thoughts? Am I missing something obvious?

    Thanks

  6. Prasanna SP
    Member
    Posted 2 years ago #

    .at15t_wordpress {
        margin-left: 760px;
    }

    Gives,

    http://i.imgur.com/0GDBG.png

    Change the margin value to position it according to your needs.

  7. Reuben Penner
    Member
    Posted 2 years ago #

    Ok: I've figured out how to get it to the right side.

    I entered the following into my custom css:

    .social-profiles img {
    	float: right;
    }

    However, I would love to have it aligned to the top, in-line with the rest of the menu items.

    the following did not work:

    .social-profiles img {
    	float: right;
            vertical-align:text-top;
    }

    any thoughts?

  8. Prasanna SP
    Member
    Posted 2 years ago #

    Oh! Are you referring that set of icons?

    Add this to make them appear inline with the menu,

    .social-profiles img {
        float: right;
        margin-top: -23px;
    }

    It'll give http://i.imgur.com/HG7hd.png

  9. Reuben Penner
    Member
    Posted 2 years ago #

    Thank you, thank you, thank you!!!

    I have been trying to create this for about 2 days by reading css tutorials and so on. You've helped me immensely!

    I know there are many other design issues on this page I need to deal with, but now I can move on to deal with them.

    And I've also learned alot about WP and coding from the process.

    thank you
    Reuben

  10. Prasanna SP
    Member
    Posted 2 years ago #

    It's okay. If you have any graphene theme issues, ask the questions at Graphene Theme Support Forum. Chances of getting solutions will be more if you ask there. Me and a few volunteers will always be there to help the people.

Topic Closed

This topic has been closed to new replies.

About this Topic