WP-Nexus

Appearance

Style Editor ​

The WP-Nexus style editor lets you visually configure CSS styles for every widget element. It supports responsive design with breakpoints, element states (hover, focus, active), and expression-based visibility rules.

Overview ​

Every widget in WP-Nexus has a Styles panel in the right sidebar. The panel is organized into sections:

  1. Layout -- Display, flexbox, grid, and positioning.
  2. Spacing -- Margin and padding.
  3. Size -- Width, height, min/max dimensions.
  4. Typography -- Font, text color, size, weight, alignment.
  5. Background -- Background color, image, gradient.
  6. Border -- Border width, color, radius.
  7. Effects -- Opacity, box shadow, transform.

How Styles Are Applied ​

Styles are compiled into CSS classes at render time. Each element gets a unique class name with its styles applied inline in a <style> block. This approach:

  • Avoids inline style attributes (better for CSP compliance).
  • Supports responsive breakpoints via @media queries.
  • Supports pseudo-states (:hover, :focus, etc.) which cannot be done with inline styles.

Responsive Design ​

Styles can be set per breakpoint:

  • Desktop (default) -- min-width: 1024px
  • Tablet -- 768px to 1023px
  • Mobile -- Below 768px

Element States ​

Styles can vary by state:

  • Default -- Normal appearance.
  • Hover -- When the mouse hovers over the element.
  • Focus -- When the element has keyboard focus.
  • Active -- While being clicked/pressed.
  • Custom -- Expression-based CSS classes (e.g., applied when a condition is true).

Visibility Rules ​

Elements can be shown or hidden based on visibility rules:

  • Always visible -- The default.
  • Expression -- Show/hide based on an expression (e.g., row.status == 'active').
  • Logged in -- Only show to authenticated users.
  • Logged out -- Only show to anonymous visitors.

Further Reading ​