Twitter, Facebook and Instagram buttons

  • Author
    Posts
  • #1320843

    tooistanbul
    Member

    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.

    #1320927

    timethief
    Member

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

    #1321058

    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/

    #1321092

    tooistanbul
    Member

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

    #1321093

    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/

    #1321094

    tooistanbul
    Member

    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?

    #1321095

    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.

    #1321096

    tooistanbul
    Member

    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

    #1321097

    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.

    #1321098

    tooistanbul
    Member

    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

    #1321099

    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;
    }
    #1321111

    akshaysarve
    Member

    Its possible on my site ?
    http://www.atifaslammania.wordpress.com

    #1321112

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

    #1321113

    timethief
    Member

    @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]

    #1321114

    timethief
    Member

    @thesacredpath
    Oops! :)

    #1321115

    NP @timethief and good day to you!

    #1321116

    timethief
    Member

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

    #1321117

    @tt, I fixed the link. :)

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