Customizing CSS to add FB, Twitter buttons

  • Unknown's avatar
    niblett · Member ·

    Hey guys,

    I am absolutely in LOVE with this Piano Black theme. I am pretty familiar with HTML and CSS but need some help. In my site settings, I have an option to “Enable Search” and “Enable RSS Button” at the top of my page (www.thefutileresistance.com) Below is the current, default CSS for that theme. What I am trying to do is replicate that picture for the RSS to match the exsisting default that is already there by adding a “Twitter” and “Facebook” button. off beside it, which link back to my twitter and FB page. I am handy with photoshop, what I want to do is turn off the RSS setting in the theme and just add my own icons up there with matching colors in my theme (green), how in CSS to I tell the images to be where they are in the header? Idealy, this is what I want it to look like with working links:

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Please, please, please, please do NOT paste the entire stylesheet into the forums. We can access the stylesheet easily and all it does is make navigation here in the thread difficult.

    CSS is simply a styling document used by the browser to style and position page elements. HTML links cannot be put into it – or any sort of code for that matter.

    You can put the images into a text widget and then use positioning in the CSS to move that specific text widget up and into the header area. On some themes this works well and on others not so much. It all depends on how the CSS and markup (XHTML) are organized.

  • Unknown's avatar
    niblett · Member ·

    Appologies, I’d edit it and remove it if I could! I’ll continue to play with the CSS and see if I can figure it out, examples would be awesome!

  • Unknown's avatar
    raincoaster · Member ·

    Like he said, just put them in a text widget, then you can play with the positioning. Some people find having them in the sidebar is fine.

  • Unknown's avatar
    thesacredpath · Member ·

    I’ll give you a head start. You need to add position: relative; to the #wrapper so that when you reposition the text widget it will reposition relative to the wrapper instead of relative to the browser window.

    #wrapper {
position: relative;
}

    Once you add the text widget with the icons to the sidebar (I usually put it right at the top so things are easier to see) you need to do a “view source” on your main page, find the text widget which will be under

    #page > #main > #secondary

    Look at the ID for that text widget and then specifically target that ID. Example:

    #text-widget-7 {
position: absolute;
top: 40px;
right: 90px;
}

    The values above are just placeholders. You will have to adjust as necessary to get the positioning correct.

  • The topic ‘Customizing CSS to add FB, Twitter buttons’ is closed to new replies.