Bit of CSS Help
-
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
Thanks
ColinThe blog I need help with is: (visible only to logged in users)
-
-
First you need to download the image:
http://s1.wp.com/wp-content/themes/pub/digg3/images/bg_header_overlay.pngUse 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?
Thanks
Colin -
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.
-
-
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.
-
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.
-
Thanks guys, i’m satisfied with removing the RSS toolbar, site looks much better.
Regards
Colin -
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.