Social Media Widget instead of Searchbox in header?

Resolved johanna2patricia
(@johanna2patricia)

10 years, 10 months 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

Viewing 8 replies - 1 through 8 (of 8 total)

Thread Starter johanna2patricia
(@johanna2patricia)

10 years, 10 months 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
Csaba (LittleBigThings)
(@littlebigthing)

10 years, 10 months ago

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

Does that do it?

Thread Starter johanna2patricia
(@johanna2patricia)

10 years, 10 months ago

No I tried that too, but that didn’t work either.
I put the social media now in the sidebar.
Csaba (LittleBigThings)
(@littlebigthing)

10 years, 10 months ago
You could try to add it then to your img tag.
```
#branding #socialmedia img {
display: inline;
}
```
Thread Starter johanna2patricia
(@johanna2patricia)

10 years, 10 months ago

Thanks. I will try that out tomorrow.
Thread Starter johanna2patricia
(@johanna2patricia)

10 years, 10 months 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
Csaba (LittleBigThings)
(@littlebigthing)

10 years, 10 months 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.

Thread Starter johanna2patricia
(@johanna2patricia)

10 years, 10 months ago

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

Johanna 😀

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Social Media Widget instead of Searchbox in header?’ is closed to new replies.

Tags