Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Bit of CSS Help

  1. electricpedals
    Member

    Hi could someone please help me with the following:

    http://electricpedals.com/

    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

    Thanks
    Colin

    The blog I need help with is electricpedals.com.

  2. electricpedals
    Member

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

    Cheers

  3. panaghiotisadam
    Member

    First you need to download the image:
    http://s1.wp.com/wp-content/themes/pub/digg3/images/bg_header_overlay.png

    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.

  4. electricpedals
    Member

    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?

    Thanks
    Colin

  5. panaghiotisadam
    Member

    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>
</div>

    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.

  6. electricpedals
    Member

    Haha that is clever! It worked!

    * bows slowly!

    Colin

  7. panaghiotisadam
    Member

    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 wp.com users), the icons will show up lower than they should be. So, as I said, thesacredpath or hallluke will need to improve on this.

  8. hallluke
    Member

    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.

  9. panaghiotisadam
    Member

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

  10. electricpedals
    Member

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

    Regards
    Colin

  11. hallluke
    Member

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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.