How to Place Twitter/Flickr Icon in Header?

  • Author
    Posts
  • #1692382

    I would love to place a circular Twitter button/Flickr button in my header – on the right hand side (rather than including a Twitter widget in the sidebar).

    Could anyone advice on this? I realize some CSS is involved, but I haven’t managed to get the whole picture of what I need to do. Most people seem to point to the header.php file, but also, I can’t seem to find it (or any php files at all). I have basic knowledge of html/css.

    Generally speaking, placing items in the header has been a concern of mine for some time, so any help would be much appreciated.

    Thanks!

    Ulrica

    The blog I need help with is glocalclassroom.wordpress.com.

    #1692623

    Most people seem to point to the header.php file, but also, I can’t seem to find it (or any php files at all). I have basic knowledge of html/css.

    That advice is for people who have a WordPress.org install they manage themselves on a server where they have purchased web hosting for a monthly fee. If you purchase a web hosting account separate from WordPress.com, then you can get full access to all of the code, including PHP files. Here at WordPress.com, there is an optional paid upgrade that allows you to add your own custom CSS, however, you cannot modify theme HTML files or any PHP files.

    For more information on the differences, see http://en.support.wordpress.com/com-vs-org/

    To learn about how CSS editing works at WordPress.com, you should start by reading this:
    http://en.support.wordpress.com/custom-design/editing-css/

    Using custom CSS, you can move existing elements around on the page. This means, that if you can add the Twitter icon you want to see in the header to a widget, then you can move it into the header area. In order to do it, you need to add the widget first and then look at the HTML to find the unique identifier for that widget and then use that identifier in the CSS.

    Here is an example using the search widget currently at the top of your sidebar:

    #search-2 {
    	position: fixed;
    	top: 0;
    	width: 313px;
    	height: 32px;
    	z-index: 999;
    	background: #c1002b;
    }
    
    .logged-in #search-2 {
    	top: 32px;
    }

    The “#search-2” part is the unique identifier.

The topic ‘How to Place Twitter/Flickr Icon in Header?’ is closed to new replies.