CSS Styling

With some themes, the Linkposts Table will look terrific right out of the box, but you may need or want to make formatting adjustments.

A table listing and describing all available Linkposts CSS selectors is available below. You can override the plug-in styles in your theme stylesheet by specifying the table’s unique table ID (which is set automatically for widgets and optionally set in other installation methods), you can use a CSS processor like Jetpack’s Edit CSS or Simple Custom CSS, or you can use the ADD CSS form under “Custom Styling.”

LPA Additional CSS

LPA Additional CSS

The plug-also comes with some optional styles that can be added by deleting a few lines from the ADD CSS form. The included optional styles demonstrate how to add an image icon to a “loop” table, how to create a “gradient” effect on a Link-Posts table – as in many of the “custom” screenshots.

EXAMPLES:

Create Alternating Odd/Even Linkpost Background Shading

Show All “Quotes” instead of Initially Hiding Them…

…and get rid of the plus-minus-links while we’re at it:

In other words: It can be as simple as adding the above styles, or targeted versions of them, to convert a Link-Posts table to a more conventional “archive” page.

Use one of the alternative “+/-” image files

Add a Link Icon to Table Titles

Keep the Date Headers from Displaying the First Time that They Appear on a Table

Float Post-Date to Right if Category and Tag Lists Hidden

Custom Format a Link-Posts Template or “Loop” Table for Desktop and Mobile Screen-Sizes

lpa_custom_thumbnails_side_

The following CSS (in conjunction with other theme elements) is used to produce the above tables:

The possibilities are endless, of course. If you want to explore them, or need help, contact me, and I will ensure you get what you want, at a reduced design fee!

TABLE OF CSS SELECTORS

SelectorPurposeNotes
#cks_lpa-table-[identifier]Unique ID for each Link-Post tableIdentifier set automatically for widgets, at installation for templates; in shortcode versions will be PostID or as designated.
.cks_lpa-tableOverarching CSS class for Link-Post tables
.cks_lpa-table-templateOverarching CSS class for Link-Post tables added to WordPress “templates” via function
.cks_lpa-table-widgetOverarching CSS class for Link-Post Widget tables
.cks_lpa-table-scOverarching CSS class for Link-Post tables added via shortcode
.cks_lpa-table-[table-title]Table title into lowercase-with-dashes “suffix” for class selector
.cks_lpa-table-no-quoteCSS class for Link-Post tables set to “titles only”/”keep closed” (no post excerpt or content)
.cks_lpa-table-titleOverarching CSS class for Link-Post table titlesApplied to h2 element.
.cks_lpOverarching CSS class for Link-Posts in table
.cks_lp[-count]Open or closed link-post in order displayedApplied to link-post div in both “states”
.cks_lp-no-commentsFor Link-Post with comments-count-link set to hidden
.cks_lp.odd, cks_lp.evenDistinguish alternating Link-Posts
.cks_lp.use-thumb, .cks_lp.hide-thumbIf thumbnails are set to “on” vs “off”
.cks_lp.no-quoteIf excerpts/content are set to “off” or “closed
.cks_lp.has-thumb, .cks_lp-has-no-thumbIf Link-Post has a thumbnail image
.cks_lp.has-add-lt-scIf Link-Post shortcode is present in Link-Post
.cks_lp.[category-slug]Formats Link-Posts from particular category“Slug” is the lower-case with dashes and no unacceptable characters version of the category name – can be set under Posts/Categories and also found in category URLs
.cks_lp-titleFormats individual Link-Post titlesApplied to div element.
.cks_lp-title-linkFormats individual Link-Post title linksApplied to a element.
.cks_lp-authorFor formatting the source author name as it appears in the Link-Post titleUsed by jQuery script – requires consistent “[author]:” formatting and applied custom styles.
.cks_lp-sourceFor formatting the source site name as it appears in the Link-Post titleUsed by jQuery script – requires consistent “-[source]” formatting and applied custom styles.
.cks_lp-commentsFormats the comments-count-link in Link-Post title
.cks_lp-closedFor Link-Posts in “closed” state
#lp-quote-closed-[identifier]Specific Link-Post in “minus” or “closed” stateUsed for jQuery Function.
.cks_lp-plus-minusFormats the +/- toggle divApplied to div element.
.cks_lp-plusFormats the same +/- div only in “closed” stateApplied to div element.
.cks_lp-plus-no-quote, .cks_lp-plus-minus-no-quote, .cks_lp-plus-minus-link-no-quoteFormats +/open symbols when link-posts set to “no quote” (no content or excerpt)Applied to div and aelements.
.cks_lp-minusFormats the same +/- div only in “open” stateApplied to div element.
.cks_lp-plus-minus-linkFormats the +/- linkApplied to a element.
.cks_lp-commentsFormats comment-count/links div in tableApplied to div element.
.cks_lp-comments-linkFormats the link element itselfApplied to a element.
.cks_lp-termsFormats the category and tag links togetherApplied to div element.
.cks_lp-catsFormats the category links separatelyApplied to span element.
.cks_lp-tagsFormats the tag links separatelyApplied to span element.
.cks_lp-post-dateFormats the post date-time separatelyApplied to div element.
.cks_lp-openFormats Link-Posts in “open” state
#cks_lp-quote-open-[identifier]Specific Link-Post in “minus” or “open” state Used for jQuery Function.
.cks_lp-quote-openFormats the content of the opened Link-PostApplied to div element.
.cks_lp-blockquoteFormats the blockquote in a Link-PostAdded by Press This using “Extended” settings only
.cks_lp-source-linkFormats the source link in a Link-PostApplied to p element – added by Press This using “Extended” settings only
.cks_lp-minus-bottomTargets the +/- link in the opened Link-PostApplied to a element.
.cks_lp-comment-link-bottomTargets the comment link in opened Link-PostApplied to a element.
.cks_linkbackFormats the “footer”Applied to div element, defaults to “link on right to Link-Posts category”
.cks_linkback-leftFormats the left-side linkApplied to a element, hidden by default.
.cks_linkback-rightFormats the right-side linkApplied to a element, shown by default.
.cks_lpa-table-dateFormats the date-time sub-titleShortcode tables only: Applied to h3 element
.cks_lpa-table-sc-date-beforeFormats the the “span” prior to the Table Date timeShortcode tables only: Applied within the h3 element
.cks-plugins-creditFormat the optional credit/link-backApplied to div element.