Help get this topic noticed by sharing it on Twitter, Facebook, or email.

Advanced widget customisation using CSS

We’ve tried to provide plenty of options for tailoring how your widget looks via the customisation page, but if you need to go a bit further, and understand css, here’s how you can really take control of its presentation.

The HTML for the widget gets ‘injected’ into your page by our javascript. This means its part of the page and you can style it with your own css. The FeedGrabbr css that has the default widget styles gets added at the end of the page element, so if you’re going to override any of those default styles, your css needs to come after that.

Some examples:
Say you want a slimmer header:

.feedgrabbr_widget .fg_wid_header {height:22px}

or a background image behind the stories:

.fg_wid_cont {background:url(yourimage.jpg)}

On the Feedgrabbr homepage we have some css to add a drop shadow to the widget:

.fg_widget_in {box-shadow: 0px 2px 18px rgba(0,0,0,0.5)}
3 people like
this idea
+1
Reply