Layout & CSS Guides | Pluck On Demand

Our widgets are designed to inherit the look of your own pages; yet as every site uses different Cascading Style Sheets (CSS) and HTML conventions, results may vary.

If you want to change the layout of your widgets, add the style classes detailed below to your own stylesheet. You may change the fonts, borders, colors, and other elements; styles you add will override the ones that come through with the widgets.

If you don't use CSS on your website, see the Tips & Tricks section.

Back to top

Example:

Removing the border from articles' thumbnail images

.podArticleInfo img { border:none !important; }

Example:

Changing the font size of article headlines

.podHeadline a { font-size: 18px !important; }

Example:

Changing the font size on the author byline

.podArticleInfo span { font-size:10px !important; }

[Note: In full pages (landing pages), this class is instead called .podCallout ]

Example:

Changing the font type on article summaries.

.podArticleSummary p { font-family: Helvetica; }

or

Example:

Removing the pencil and video icons next to article headlines.

.podIconArticle, .podIconVideo {background: none !important; padding-left: 0px !important;}

Example:

Changing the headline font style.

.podPageTitle { font-style: italic; }

Sometimes (especially with Wordpress), your site's theme will add bullets to the left of related articles in a Related Content widget. To make those go away, add this:

.podHeadlineWidget li {list-style-type: none !important;}

Example:

Add a dotted border around each article preview.

.podArticleSummary { border: 3px dotted #CCC; }

The full page or landing page article styles can also be formatted with CSS.

See the section called 'Tweaking the Related Content widget using CSS' for examples on how to change the appearance of full page or landing page articles.

You will need to add the .podArticleWidget parent class in front your child classes. The full article page and the Related Content widget can be styled independently, even though they share many of the same classes.

For example, the following CSS code will only modify the appearance of the full page article headline. The Related Content widget headline (in your sidebar, or wherever) will be left alone:

.podArticleWidget .podPageTitle { font-style: italic; }

If you try to override a style and it doesn't work, try adding !important to the end of the style and before the semicolon, like so: .podHeadline a {font-size: 1em !important;}

Beware, though, if you use !important for generic non-Related-Content-only styles, like p tags, it will affect your entire site.

If your site does not use Cascading Style Sheets (CSS), you can add CSS into any HTML page by inserting the CSS you want in between the <head> and </head> tags at the top of a given page, like so:

	
	<head>
	<style type="text/css">

	.podHeadline a {font-size: 1em !important;}

	</style>
	</head>

Helpful Guides

Related Content Widget Layout and CSS Guide

Matching Your Site's Visual Style

I want to change or remove the...

Customize Full Page (or Landing Page) Content

Tips and Tricks