Bit of CSS Help

  • Author
  • #582549

    Hi could someone please help me with the following:

    On my site, there is a Entries RSS | Comments RSS section under the banner that I’d either like to completely remove, or change the background colour of the box (I think the icon used is bg_header_overlay) ..

    Hope this makes sense


    The blog I need help with is


    I think it would be worth mentioned that I’m using Digg3 Theme!?



    First you need to download the image:

    Use an image editing application to make it shorter (eliminating the grey strip), upload it to your blog via Media > Add New, and copy its URL. Then add this to your CSS:

    #header-overlay img, #syndication, #searchbox {display:none;}
    #header-overlay {background:url(‘IMAGE URL HERE’);}
    #header {height: 200px;}

    Note: 200px is a rough estimate: will probably need to be a bit different.


    Dear panaghiotisadam

    your advice was super, thanks. The only thing I did different is not bothered with the second CSS line and instead loaded the image via the header interface.

    Very good.

    So you’ve got me thinking. Would it be possible to adapt the #syndication and use it for my social media icons, i.e facebook, twitter etc?



    You’re welcome.

    You can do what you’re looking for by putting the right code in a text widget and positioning the content in front of the grey strip (or where the grey strip was). To test this, try the following:

    Copy the URLs of any image and any webpage. Add this in a text widget:

    <div id="mysyndi">
    <a href="WEBPAGE URL HERE" target="_blank"><img src="IMAGE URL HERE" height="24" /></a>

    Then temporarily remove the CSS you’ve added and add this instead:

    #syndication, #searchbox {display:none;}
    #mysyndi {position:absolute;top:264px;left: 344;z-index: 11;}

    But I’m no CSS expert. When thesacredpath or hallluke drop by, they might be able to refine this or suggest a better alternative.


    Haha that is clever! It worked!

    * bows slowly!



    You’re welcome again. But I just checked your blog and found that my solution is imperfect: for non wp-com users (and logged-out users), the icons will show up lower than they should be. So, as I said, thesacredpath or hallluke will need to improve on this.



    Your theme doesn’t have any classes in the HTML that can be used to set a different CSS rule for logged in vs non-logged in users so there doesn’t seem to be a workaround.


    @luke: Can’t we position the widget in relation to another header element instead of absolutely?


    Thanks guys, i’m satisfied with removing the RSS toolbar, site looks much better.




    Good shout! If you include the following line of CSS the absolutely positioned text widget will have it’s screen position based on the container div which should mean you can set one position which will work regardless of a visitor being loggen in to WordPress or not. You may need to add some padding to the bottom of the header to make room for the widget and you will probably want to remove the default widget styles.

    #container {position:relative;}

The topic ‘Bit of CSS Help’ is closed to new replies.