Twitter, Facebook and Instagram buttons

tooistanbul · Member · Jun 24, 2013 at 12:08 pm
Copy link

Add topic to favorites
Hello, how can i put the Twitter, Facebook and Instagram button/icons, on the right of my header image/link?
Thanks

The blog I need help with is: (visible only to logged in users)
timethief · Member · Jun 24, 2013 at 5:43 pm
Copy link
This thread will be moved to the CSS Forum for you.
designsimply · Member · Jun 26, 2013 at 4:19 pm
Copy link
First, add the buttons you want to your sidebar in a widget, then reply back here and I can help you with the CSS required to move just that went into the header area.

Try using the About.me widget. I’ve heard a lot of people like it for social media icons:
http://en.support.wordpress.com/widgets/about-me/
tooistanbul · Member · Jul 11, 2013 at 4:36 pm
Copy link
Excuse me for the delay, which widget shoould i use to put my buttons in the sidebar?
designsimply · Member · Jul 11, 2013 at 4:47 pm
Copy link
Did you try the About.me widget I mentioned before?
http://en.support.wordpress.com/widgets/about-me/

Another one would be a text widget. To use a text widget, you need to find the icons you want to use and upload them to your media library first so you can get the image links needed to write your own HTML for the text widget.
http://en.support.wordpress.com/widgets/text-widget/
tooistanbul · Member · Jul 11, 2013 at 5:18 pm
Copy link
yes i tried them both, i got a facebook button (text widget) in the sidebar, how can i move it in the header, on the right of the logo?
designsimply · Member · Jul 11, 2013 at 10:34 pm
Copy link
Next, you need to find out the identifier for the widget you want to move. If you right click on one of the icon and select the “Inspect Element” option, a panel will appear that says you the HTML for what you QuickTime as well as all the CSS that applies to that element on the right. Look through the HTML tree until you find the id=”YOUR_WIDGET_ID” part.

I checked http://tooistanbul.com/ for you and I found that the top widget has id=”text-6″ In CSS, you can target that specific widget using the following example:
```
#page {
	position: relative;
}
#text-6 {
	display: block;
	position: absolute;
	top: 15px;
	right: 25px;
}
```
Adjust the values for “top” and “right” as needed.
tooistanbul · Member · Jul 11, 2013 at 10:44 pm
Copy link
Thanks a lot, it worked. I still have a question; how can i make the small black underline between the icons invisible? It is basically a space but i don’t get why the program gave me a black underline… And if we want it to be perfect :); i would also like to delete the black line under the navigation… Thanks a lot

designsimply · Member · Jul 11, 2013 at 10:48 pm

The underlining in the widget is happening because there are spaces inside your link HTML code.

Change this:

<p style="text-align:center;"><a href="https://www.facebook.com/pages/Too-Istanbul/481566931917034" target="_blank"><img class="size-thumbnail wp-image-1517" alt="images" src="http://tooistanbul.files.wordpress.com/2013/07/images.jpeg?w=50" width="50" height="50" /> </a><a href="https://twitter.com/tooistanbul" target="_blank"><img class="size-thumbnail wp-image-1518" alt="76595.official-twitter-button---300" src="http://tooistanbul.files.wordpress.com/2013/07/76595-official-twitter-button-300.png?w=50" width="50" height="50" /> </a><a href="http://instagram.com/tooistanbul" target="_blank"><img class="size-thumbnail wp-image-1519" alt="images-1" src="http://tooistanbul.files.wordpress.com/2013/07/images-1.jpeg?w=50" width="50" height="50" /></a></p>
<p style="text-align:center;"></p>

To this:

<p style="text-align:center;"><a href="https://www.facebook.com/pages/Too-Istanbul/481566931917034" target="_blank"><img class="size-thumbnail wp-image-1517" alt="images" src="http://tooistanbul.files.wordpress.com/2013/07/images.jpeg?w=50" width="50" height="50" /></a> <a href="https://twitter.com/tooistanbul" target="_blank"><img class="size-thumbnail wp-image-1518" alt="76595.official-twitter-button---300" src="http://tooistanbul.files.wordpress.com/2013/07/76595-official-twitter-button-300.png?w=50" width="50" height="50" /></a> <a href="http://instagram.com/tooistanbul" target="_blank"><img class="size-thumbnail wp-image-1519" alt="images-1" src="http://tooistanbul.files.wordpress.com/2013/07/images-1.jpeg?w=50" width="50" height="50" /></a></p>
<p style="text-align:center;"></p>

What I did was move the space character from before the closing link tags “” to after them.

tooistanbul · Member · Jul 11, 2013 at 10:56 pm
Copy link
Ok thanks a lot, i get it now…:) can you still help me with this horrible line under the navigation. Btw i don’t want to disturb you, thanks a lot
designsimply · Member · Jul 11, 2013 at 11:00 pm
Copy link
i would also like to delete the black line under the navigation

You can remove the line from below the main menu on the home page of http://tooistanbul.com/ by adding this CSS to your Appearance → Themes → Customize → CSS panel:
```
body.home .entry-header {
	border: none;
}
```
akshaysarve · Member · Jul 28, 2013 at 6:32 pm
Copy link
Its possible on my site ?
http://www.atifaslammania.wordpress.com
thesacredpath · Member · Jul 28, 2013 at 8:06 pm
Copy link
@akshaysarve, absolutely. Since you are using a different theme than @tooistanbul, could I ask you to create a new thread in the CSS forum, and I will be glad to help you move a text widget with your social icons up and into the top header area. Here are a couple of links for you on using the text widget and creating links in them.

Text Widgets
Text Widget Links

I’ll watch for your new thread on this.
timethief · Member · Jul 28, 2013 at 8:09 pm
Copy link
@akshaysarve
This is a CSS editing thread and all CSS editing is theme specific. You do not appear to have purchased the custom design upgrade for the blog linked to you username and your blog is not wearing the same theme that tooistanbu’s blog is wearing. Please do no hijack threads. Please click this link and start your own thread https://en.forums.wordpress.com/forum/css-customization#postform

[URL fixed]
timethief · Member · Jul 28, 2013 at 8:09 pm
Copy link
@thesacredpath
Oops! :)
thesacredpath · Member · Jul 28, 2013 at 8:12 pm
Copy link
NP @timethief and good day to you!
timethief · Member · Jul 28, 2013 at 8:16 pm
Copy link
@thesacredpath
You may want to delete the comment I posted as it has the URL for starting a thread in the support forums, rather than the CSS Forums.
thesacredpath · Member · Jul 30, 2013 at 5:25 pm
Copy link
@tt, I fixed the link. :)

The topic ‘Twitter, Facebook and Instagram buttons’ is closed to new replies.

Twitter, Facebook and Instagram buttons

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media