Social Media Plugins below header image

bevypoo · Member · Feb 13, 2013 at 3:22 pm
Copy link

Add topic to favorites
I am wanting to put social media plugins below header image and above my menu. I am using the theme Ever After Custom Design. wondering how I can go about doing this via the css?

Currently this theme only has a side bar near bottom of page which I was able to input via widgets text a Pinterest icon but ideally want to put them all across the top.

Any help would be greatly appreciated!

This theme is a one column page(wishing it was 2 but that’s a whole other question)

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Feb 13, 2013 at 3:44 pm
Copy link
You can use absolute positioning to move widgets around on a page. First, you need to view your page source to find out the ID value for the widget you’d like to target. I looked at http://pinninggals.com/ and I found that the widget with the Pinterest logo in it has an ID value of “text-2”. Here is an example of some CSS that will take that specific widget out of the footer and stick it to the top of the page. The last rule makes some space above the top navigation to give the moved widget some space. This should get you started, and note that you can adjust the numbers or add widths and centering to the CSS blocks as needed.
```
#supplementary {
	position: static;
}
#main {
	position: relative;
}
#text-2 {
	position: absolute;
	top: 430px;
}
.site-navigation {
	margin-top: 60px;
}
```
Note: this example assumes your site has the same header height throughout.
bevypoo · Member · Feb 13, 2013 at 4:03 pm
Copy link
Thank you. I will give it a try I’m completely new to this and just learning so it all intimidates me a bit :)

So if I input the code above into the css it should do what im trying to?
bevypoo · Member · Feb 13, 2013 at 4:45 pm
Copy link
sorry just me again *sigh* after searching online I am trying to add the following code under the css custom design but its doing nothing…

#header_icons img {

float:right;

height:32px;

width:32px;

margin:0;

margin-right:10px;

}

#header_icons {

float: right;

padding-top:50px;

width:250px;

z-index:-9999;

padding-bottom:10px;

}
div id=”header_icons”>

<img src=”http://pinninggals.com/?attachment_id=193” width=”40px”>

<img src=”http://pinninggals.com/?attachment_id=194” width=”40px”>

<img src=”http://pinninggals.com/?attachment_id=195 ” width=”40px”>

<img src=”http://pinninggals.com/?attachment_id=196 ” width=”40px”>

</div>
bevypoo · Member · Feb 14, 2013 at 3:36 am
Copy link
Got it thanks figured out how you told me to do it and its working!
bevypoo · Member · Feb 14, 2013 at 4:16 am
Copy link
actually when i move them to the top they become unclickable..
bevypoo · Member · Feb 14, 2013 at 4:26 am
Copy link
this is the widget text code im using if it helps

<div class=”textwidget”><img src=”http://pinninggals.files.wordpress.com/2013/02/pinterest.png” width=”60″ height=”60″ alt=”Follow Me on Pinterest” />
bevypoo · Member · Feb 14, 2013 at 4:32 am
Copy link
(<div class=”textwidget”><img src=”http://pinninggals.files.wordpress.com/2013/02/pinterest.png” width=”60″ height=”60″ alt=”Follow Me on Pinterest” /> )
bevypoo · Member · Feb 14, 2013 at 4:33 am
Copy link
i give up its stressing me out way too much.. now i cant figure out how to get the code to all display in here …lol
thesacredpath · Member · Feb 14, 2013 at 5:03 am
Copy link
To get code to show in the forums, enclose the code in code tags like below.

<code>all the code here</code>

Alternately you can put the code in and then select all the code and click the code button above the entry box.

That will keep the forum software from interpreting it.
bevypoo · Member · Feb 14, 2013 at 2:49 pm
Copy link
Thanks. So let me try this again.

I input what was suggested above :
#supplementary {
position: static;
}
#main {
position: relative;
}
#text-2 {
position: absolute;
top: 430px;
}
.site-navigation {
margin-top: 60px;
}

This did work and moved my buttons to the top between my header and Menu. But once I move them they become un clickable. This is the widget text code I am using.

<div class="textwidget"><img src="http://pinninggals.files.wordpress.com/2013/02/pinterest.png" width="60" height="60" alt="Follow Me on Pinterest" />
bevypoo · Member · Feb 15, 2013 at 8:44 pm
Copy link
Anyone have any clue why they are not clickable? When i put the same code as above in my about me section they work…
designsimply · Member · Feb 20, 2013 at 11:50 pm
Copy link
actually when i move them to the top they become unclickable..

Tricky! This took me a while to figure out!

Try adding “z-index: 9” to the “#text-2” block. Here’s an updated example:
```
#supplementary {
	position: static;
}
#main {
	position: relative;
}
#text-2 {
	position: absolute;
	top: 430px;
	z-index: 9;
}
.site-navigation {
	margin-top: 60px;
}
```
bevypoo · Member · Feb 21, 2013 at 4:20 am
Copy link
It worked thank you so much! :) Just need to figure out how to center and space them now!
designsimply · Member · Feb 21, 2013 at 9:45 pm
Copy link
You’ll need to center them manually by adding “left” to the “#text-2” block. Something like:
```
#text-2 {
	position: absolute;
	left: 100px;
	top: 430px;
	z-index: 9;
}
```
Adjust the value until it looks right.
bevypoo · Member · Feb 21, 2013 at 9:52 pm
Copy link
Wonderful got it, thank you again so much for all your help!

– Beverly

No items found.