Skip to main content

How to Design Your Own Custom Lasso Displays with CSS

Learn about the Lasso CSS classes you can use to make your Lasso displays look and feel exactly how you want!

Written by Andrew Fiebert

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{}

Additionally, for table-related elements, the following CSS classes can be customized:

  • .table-vertical (table alignment and structure for desktop views)

  • .product-name (styles for product title text)

  • .badge-text (badge text styling for displays)

Using these classes, you can further refine the appearance of Lasso's table displays.

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.

To customize font sizes specifically for Lasso table elements, such as header row titles or product names, extra care should be given to specificity for both desktop and mobile displays.

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)

  • You could also remove .lasso-cactus entirely, but it is good practice to continue using CSS specificity to avoid any conflicts with other displays/themes you might be using

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

For table displays, you can apply font size customizations to badge text, header row titles, product names, and price text. Here's an example code snippet:

/* Badge Text */
.lasso-display-table .table-vertical.include-badge .cell.has-badge-text .badge-text-wrapper .badge-text,
.lasso-display-table .table-vertical-mobile.template-1 .mobile-box.has-badge-mobile .badge {
    font-size: 15px !important;
}

/* Header Row Titles and Product Names */
.lasso-display-table table td a.product-name,
.lasso-display-table .table-vertical-mobile.template-1 .lasso-title,
a.lasso-title {
    font-size: 15px !important;
}

/* Price Text */
.lasso-display-table .table-vertical .lasso-price-value {
    font-size: 15px !important;
}

Modify the font-size values as needed, ensuring the changes apply correctly across different layouts.

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: 767.99px) {
.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)

  • You could also remove .lasso-cactus entirely, but it is good practice to continue using CSS specificity to avoid any conflicts with other displays/themes you might be using

  • 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:

Troubleshooting CSS Conflicts

As every WordPress blog and theme is typically a unique case, conflicts with CSS are always a possibility.

Below we'll set out some troubleshooting steps you can take to figure out where conflicts might be happening.

Check Customizer Additional CSS

One of the first places to look is your Additional CSS field inside the WordPress Customizer for your active theme:

You may find code here that is unspecific CSS and causing issues with your Lasso displays, or there is code here for Lasso style elements that you were unaware of:

Check Theme style.css in Theme File Editor

Some WordPress users or those who have had custom theme work or are using a child theme could be using the style.css file of the theme in use.

It's a good idea to check there, too, to find any conflicting style code.

You'll find it under the submenu Appearance > Theme File Editor:

Check Lasso Custom CSS Box

As explained earlier, you can add Custom CSS inside Lasso's Settings by adding &css=true to the URL inside Lasso Settings > Display.

Example:

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

You might find code here that you, your developer, or the Lasso team added to customize styles which could be conflicting.

Common CSS Conflicts & Problems

Let's look at the most common issues we see with style conflicts.

Using Global Styling on HTML Tags

The main reason this happens is because your theme is adding styles to global HTML attributes.

Examples of those might be:

  • <p>

  • <ul>

  • <li>

  • <img>

If you have CSS style coded somewhere that is applying broadly to any of these, then it could be affecting all your Lasso displays, too!

The best way to fix this is by using very specific CSS class styling.

If you want to change only parts of a Lasso display, you should use our predefined CSS classes that all begin with lasso-.

If you want to change styling on more common post blocks like paragraphs (<p>), lists (<ul> and <li>) , and images (<img>) then you'll want to make sure to use CSS specificity.

The required code could change drastically depending on your theme, but here's an example of how I might specify that bulleted lists only inside regular post content should have a unique bullet list item type:

main article .entry-content ul li {
list-style-type: circle !important;
}

This would change the bullet type for my standard bulleted lists into a circle.

Since Lasso uses lists inside certain display types, like Tables, the code above should apply only to your regular content lists rather than Lasso's use of them so you won't end up with bullet points in your displays.

The more commonly used global style is added like this, which we don't want to do because it's not using CSS specificity:

li {
list-style-type: circle !important;
}

This would potentially apply to every list item in all uses in your code, which we don't want!

If you ever need to apply styling to a specific block in WordPress only, you can use the WordPress native Additional CSS Classes field under Advanced block settings:

Then I could add custom CSS code to my Customizer or style.css files to alter only that block which has this class:

.my-specific-class {
font-size: 3rem !important;
color: red !important;
}

Related Articles
Did this answer your question?