CSS introduction

CSS (Cascading Style Sheets) controls how elements on a webpage look. In WP Affiliate Links, CSS is an advanced option that gives you powerful customization tools. However, it can also break your layouts, so avoid it if you’re not familiar with CSS.

This reference shows which selectors are available, so you can add CSS directly in the plugin settings and style all your blocks at once. Keeping overrides inside the plugin makes cleanup easier than spreading them across WordPress settings or individual posts.

Our blocks are built with flexbox for responsive design across different screen sizes. If you make major layout changes, be sure to test them for responsiveness on various devices.

Overrides

CSS overrides you add in the plugin settings load after the default WP Affiliate Links CSS. This makes it easy to replace styles without worrying about selector specificity. If you use a caching plugin, clear or bust the cache to see changes. The demo block in the settings should update right away, unaffected by caching.

Selectors

We provide a wide range of selectors for flexible customization. Some control the structure of displays, while others are specific to themes.

Classes

• .wpal-container

  • The plugin content element selector. Used for both card and gallery displays as the WP Affiliate Links content element on a page.

• .wpal-card

  • The card display element selector.

• .wpal-card-inner

  • The primary card layout class.

• .wpal-gallery

  • The primary display element selector.

• .wpal-gallery-inner

  • The container selector for each product within a gallery display.

• .wpal-image-block

  • The primary image container for card and gallery displays.

• .wpal-image-flex

  • Flex wrapper for the image container to help with sizing.

• .wpal-image

  • Flex wrapper for the image container to help with sizing and centering.

• .wpal-image-img

  • The image element selector.

• .wpal-content

  • The flexbox container for all non image content.

• .wpal-content-inner

  • The primary content layout class.

• .wpal-text-container

  • The flexbox container for the title and description.

• .wpal-title

  • The title element selector.

• .wpal-description

  • The description element selector.

• .wpal-button-container

  • The flexbox container for the button bounding box.

• .wpal-button

  • The button element bounding box.

• .wpal-button-inner

  • The button element selector.

Themes

The theme classes are used to add styles to all displays. It’s unlikely these will be valuable for overrides, but they are available if needed.

• .wpal-theme-classic
• .wpal-theme-martini