All Collections
Customizing Displays
How to Design Your Own Custom Lasso Displays with CSS
How to Design Your Own Custom Lasso Displays with CSS

A set of CSS classes to customize Lasso displays.

Andrew avatar
Written by Andrew
Updated today

All Lasso displays are designed not to conflict with any CSS. We use very specific CSS classes to avoid problems with your own code.

This makes it easy to customize the theme you choose to start with.

Understanding Lasso's Single Display HTML Structure

A typical Lasso single display will be made up of <div>'s with the following CSS class names in its structure, in this order:

  • wp-block-affiliate-plugin-lasso class is the top-level div container that holds the display

  • lasso-anchor-id-XXXX-XXXXX ID is a controlling anchor ID used for jump links

  • lasso-container class is the first we need to know about for styling as it holds the Lasso display contents and sets up the containing box sizing, spacing, and even some font styles

  • lasso-display class is for the third/final inner layer of containing divs which we will use for many CSS edits

  • lasso-cactus class is the particular theme used in the display, so if we are using a certain theme for single displays then usually want to style with it included in any edits.

  • lasso-url-example-unique-slug-here is a placeholder class suggestive of this particular product link's unique slug

  • lasso-badge class controls the styling for the badge text that appears over the corner of single displays when set

  • lasso-box-1 class controls the first flexbox area that contains the divs below it

  • lasso-image class is always assigned to an <a> (hyperlink) tag which surrounds the product image

  • lasso-title class controls style on the heading title of the product

  • lasso-price class is the div containing price elements

  • lasso-price-value class is the inner pricing area div

  • discount-price class is the discounted price area, if it exists

  • latest-price class is the specific current price div

  • lasso-amazon-prime class displays the Prime logo on Amazon product displays

  • lasso-description class contains the product description as set in either the product's defaults or via shortcode

  • lasso-fields class controls the section surrounding custom fields

  • lasso-fields-single class is for one custom field name in this case

  • lasso-stars class surrounds the area where star ratings will appear

  • lasso-stars-value class for the specific number rating (e.g. 5.0)

  • lasso-box-2 class controls the second flexbox area containing the divs below

  • lasso-button-1 class controls the styling of the first/primary button

  • lasso-button-2 class controls the styling of the secondary button

  • lasso-box-3 class controls the third flexbox area

  • lasso-disclosure class surrounds the disclosure text and styles it

  • lasso-date class surrounds the product data update timestamp and styles it

This may help you to understand what each class does and how to get started customizing it.

Complete List of Lasso CSS classes

Here's a list of all the CSS classes you can change:

Main Display Wrappers

.lasso-container{}
.lasso-display{}
.lasso-grid-wrap{}
.lasso-grid-row{}

Flexbox Grid Boxes

.lasso-box-1{}
.lasso-box-2{}
.lasso-box-3{}
.lasso-box-4{}
.lasso-box-5{}
.lasso-box-6{}

Lasso Themes

.lasso-cactus{}
.lasso-cutter{}
.lasso-flow{}
.lasso-geek{}
.lasso-lab{}
.lasso-llama{}
.lasso-money{}
.lasso-splash{}

Product Details

.lasso-title{}
.lasso-price{}
.lasso-description{}
.lasso-image{}
.lasso-button-1{}
.lasso-button-1:hover{}
.lasso-button-2{}
.lasso-button-2:hover{}
.lasso-disclosure{}
.lasso-date{}

Flexbox Grid Layout Structure

Each display theme has a specific HTML layout and uses one of three flexbox grid structures.

Those are 2-box, 3-box, and 6-box.

Below is an example of how those grids structure for a single display.

6-Box Layout

3-Box Layout

2-Box Layout

The following video is a CSS Crash Course designed to teach you how you can style Lasso boxes using your WordPress style.css file in your own theme:

CSS Override Examples

Here are some examples of how to change simpler parts of your displays to your liking using custom CSS overrides.

Note: It's best to be more specific with your CSS classes. Not only does it reduce conflicts with any other CSS from your theme, customizer, or otherwise, but it also ensures that the CSS actually takes hold and overrides any default CSS. Learn more about CSS specificity here.

When you make CSS edits for Lasso displays, it's also a good idea to add !important; to the end of each modification to ensure it gets priority over any other default CSS.

Change the Font of Lasso Product Title Headings

If you want to modify your Lasso product display's title heading font styles across all single displays, this code gives you options to do that:

.lasso-container .lasso-display.lasso-cactus a.lasso-title {
font-size: 2rem !important;
color: #5E36CA !important;
}

To change the font size, edit the font-size's value, 2rem, to a size you want.

rem stands for "root em" and is a unit measurement of the font size of your root HTML. It's nice to use since it sizes relative to your main body font typically for a consistent UX. You can also try em, or px!

To change the font color, edit the color's value, #5E36CA, to you desired hex color code. You can use a color picker like this one to get the hex code.

Notes for this code:

  • Make sure to replace lasso-cactus with your theme name (see Lasso Themes CSS Classes)

  • Ensure that the lasso-display and lasso-cactus classes are joined together like .lasso-display.lasso-cactus and NOT .lasso-display .lasso-cactus

Change the Image Size on Image-Only Single Displays

If you're using the type="image" shortcode on some or all of your single displays, you can use this code to adjust the sizing:

@media (max-width: 767.98px) {
.lasso-container.lasso-image-container .lasso-image.image-style img {
width: 80% !important;
max-width: 80% !important;
}
}
@media (min-width: 768px) {
.lasso-container.lasso-image-container a.lasso-image.image-style img {
width: 50% !important;
max-width: 50% !important;
}
}

Notes for this code:

  • It's in two parts, the first section covers mobile and the second for desktops

  • Pick a percentage number out of 100 and update both the width and max-width values. The example above will make the image stretch to 80% of its container for mobile, but 50% for desktop.

Remove Button Hover Effects

This code will button effect when hovering over the buttons in a single display:

.lasso-container .lasso-display.lasso-cactus .lasso-button-1:hover, .lasso-container .lasso-display.lasso-cactus .lasso-buton-1:hover {
box-shadow: none !important;
transform: none !important;
}

Notes for this code:

  • Replace lasso-cactus with your theme name (see Lasso Themes CSS Classes)

  • Ensure that the lasso-display and lasso-cactus classes are joined together like .lasso-display.lasso-cactus and NOT .lasso-display .lasso-cactus

How to Add CSS Overrides

The best way to apply CSS overrides to Lasso displays is to use our very own Custom CSS box inside Lasso.

You won't see it by default, but simply navigate to Lasso's Settings > Display and then edit the end of the URL in your address bar to append: &css=true

The full URL will look like this:

https://www.example.com/wp-admin/edit.php?post_type=lasso-urls&page=settings-display&css=true

Once done, you'll see the new Custom CSS box:

Once you've added your custom CSS, make sure to hit the Save Changes button and you'll be all set:

Did this answer your question?