Bit of CSS Help

• 

  electricpedals · Member · Mar 12, 2011 at 1:02 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  electricpedals · Member · Mar 12, 2011 at 1:11 pm

  • Copy link

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

  Cheers

• 

  panaghiotisadam · Member · Mar 12, 2011 at 3:31 pm

  • Copy link

  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.

• 

  electricpedals · Member · Mar 12, 2011 at 4:47 pm

  • Copy link

  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

• 

  panaghiotisadam · Member · Mar 12, 2011 at 7:35 pm

  • Copy link

  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.

• 

  electricpedals · Member · Mar 12, 2011 at 7:56 pm

  • Copy link

  Haha that is clever! It worked!

  * bows slowly!

  Colin

• 

  panaghiotisadam · Member · Mar 12, 2011 at 9:57 pm

  • Copy link

  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.

• 

  hallluke · Member · Mar 12, 2011 at 11:37 pm

  • Copy link

  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.

• 

  panaghiotisadam · Member · Mar 13, 2011 at 6:00 am

  • Copy link

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

• 

  electricpedals · Member · Mar 13, 2011 at 9:58 am

  • Copy link

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

  Regards
  Colin

• 

  hallluke · Member · Mar 13, 2011 at 10:34 am

  • Copy link

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