CSS Custom Properties & Selectors

ID Post Grid uses CSS custom properties for all its colors, spacing, and transitions. Override these in your theme’s stylesheet to adapt the entire grid without fighting specificity.

Global Custom Properties

These are defined on :root and can be overridden in your theme CSS:

Property	Default	Description
--id-pg-primary	#0073aa	Primary color for buttons, links, and active states.
--id-pg-primary-hover	#005a87	Hover state for the primary color.
--id-pg-text	#333	Main text color (titles, excerpts).
--id-pg-text-light	#666	Secondary text color (dates, meta).
--id-pg-border	#ddd	Border and divider color.
--id-pg-bg	#fff	Card background color.
--id-pg-bg-light	#f7f7f7	Light background (image placeholders).
--id-pg-radius	4px	Default border radius.
--id-pg-transition	0.3s ease	Transition timing for hover effects.

Example Override

:root {
  --id-pg-primary: #e91e63;
  --id-pg-primary-hover: #c2185b;
  --id-pg-radius: 8px;
}

Instance-Level Properties

These are set as inline styles on individual grid instances:

• --id-pg-columns — The column count (set from the columns attribute).
• --id-pg-gap — The grid gap in pixels (set from the grid_gap attribute).
• --id-pg-btn-color — Custom button color (set from the button_color attribute).

CSS Class Reference

Selector	Description
.id-post-grid-wrapper	Outermost wrapper. Contains controls, grid, and load more button.
.id-post-grid-controls	Container for search input and filter buttons.
.id-post-grid-search	Search input wrapper.
.id-post-grid-search-input	The search text input.
.id-post-grid-filter	Filter buttons wrapper.
.id-post-grid-filter-btn	Individual filter button. Active button has .active class.
.id-post-grid	The CSS Grid container holding post items.
.id-post-grid-item	Individual post article element.
.id-post-grid-item-featured	The featured post item (spans full width).
.id-post-grid-item-image	Image container within a post item.
.id-post-grid-item-content	Content area (title, excerpt, meta, read more).
.id-post-grid-item-meta	Meta line containing date and category.
.id-post-grid-item-title	Post title heading.
.id-post-grid-item-excerpt	Excerpt text container.
.id-post-grid-item-read-more	Read more link. Button variant adds .id-post-grid-rm-btn.
.id-post-grid-load-more	The load more button.
.id-post-grid-no-results	No results message (hidden by default).
.id-post-grid-loading	Loading spinner overlay.