Need help? Check out our Support site, then


Twitter, Facebook and Instagram buttons

  1. 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 tooistanbul.com.

  2. This thread will be moved to the CSS Forum for you.

  3. 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/

  4. Excuse me for the delay, which widget shoould i use to put my buttons in the sidebar?

  5. 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/

  6. 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?

  7. 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.

  8. 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

  9. 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.

  10. 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

  11. 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;
    }
  12. Its possible on my site ?
    http://www.atifaslammania.wordpress.com

  13. @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.

  14. @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 http://en.forums.wordpress.com/forum/css-customization#postform

    [URL fixed]

  15. @thesacredpath
    Oops! :)

  16. NP @timethief and good day to you!

  17. @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.

  18. @tt, I fixed the link. :)

Topic Closed

This topic has been closed to new replies.

About this Topic