WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[resolved] Social Media Widget instead of Searchbox in header? (9 posts)

  1. johanna2patricia
    Member
    Posted 1 year ago #

    Hi everybody,
    I want to add the Social Media Widget - http://wordpress.org/plugins/social-media-widget - to my header instead of the Seachbox.
    I am working with a child theme and I understand I have to edit the header.php, but I have no clue how to add that widget there.
    I tried to use this advice - http://stackoverflow.com/questions/15497201/how-to-add-widget-to-the-header-php-in-wordpress - but that didn't work.
    Can somebody help me out here?
    My website is here: http://www.libralion.com/blog

    Johanna

  2. johanna2patricia
    Member
    Posted 1 year ago #

    Ok I managed to get them in the header with this article: http://wordpress.org/support/topic/adding-widgets-to-header-in-twenty-eleven-theme?replies=16
    The only thing is, how do I get them next to each other?
    I know it is a css thing, but I am not really good in that.
    This is the css for it now:

    #branding #socialmedia {
    position: absolute;
    top: 3em;
    right: 10%;
    text-align: right;
    }

    What should I add or change?
    Thanks.

    Johanna

  3. LittleBigThing
    Member
    Posted 1 year ago #

    You should probably add
    display: inline;
    to those CSS properties.

    Does that do it?

  4. johanna2patricia
    Member
    Posted 1 year ago #

    No I tried that too, but that didn't work either.
    I put the social media now in the sidebar.

  5. LittleBigThing
    Member
    Posted 1 year ago #

    You could try to add it then to your img tag.

    #branding #socialmedia img {
    display: inline;
    }
  6. johanna2patricia
    Member
    Posted 1 year ago #

    Thanks. I will try that out tomorrow.

  7. johanna2patricia
    Member
    Posted 1 year ago #

    Ok tried that out, but then I only get 1 icon and I have several.
    I have this css now:

    #branding #socialmedia img {
    display: inline;
    position: absolute;
    top: 3.8em;
    right: 30%;
    text-align: right;
    height: 24px;
    width: 24px;
    }

    When I change the width it only makes the 1 icon bigger.
    So what to do to get the several icons next to each other?

    Johanna

  8. LittleBigThing
    Member
    Posted 1 year ago #

    I meant to say that you need to add the last line of CSS I suggested separately and just leave the other one like it was. So the 'img' is only needed for the display: inline; part.

  9. johanna2patricia
    Member
    Posted 1 year ago #

    Yes that did it! Thanks a lot LittlBigThing!
    Really appreciated!
    Have a great evening!

    Johanna :D

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic