Note: Customers on our Advanced plan or higher get done-for-you CSS customizations. Reach out to our team ([email protected]) if that's you or you want to upgrade!
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 displaylasso-anchor-id-XXXX-XXXXX
ID is a controlling anchor ID used for jump linkslasso-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 styleslasso-display
class is for the third/final inner layer of containing divs which we will use for many CSS editslasso-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 sluglasso-badge
class controls the styling for the badge text that appears over the corner of single displays when setlasso-box-1
class controls the first flexbox area that contains the divs below itlasso-image
class is always assigned to an<a>
(hyperlink) tag which surrounds the product imagelasso-title
class controls style on the heading title of the productlasso-price
class is the div containing price elementslasso-price-value
class is the inner pricing area divdiscount-price
class is the discounted price area, if it existslatest-price
class is the specific current price divlasso-amazon-prime
class displays the Prime logo on Amazon product displayslasso-description
class contains the product description as set in either the product's defaults or via shortcodelasso-fields
class controls the section surrounding custom fieldslasso-fields-single
class is for one custom field name in this caselasso-stars
class surrounds the area where star ratings will appearlasso-stars-value
class for the specific number rating (e.g. 5.0)lasso-box-2
class controls the second flexbox area containing the divs belowlasso-button-1
class controls the styling of the first/primary buttonlasso-button-2
class controls the styling of the secondary buttonlasso-box-3
class controls the third flexbox arealasso-disclosure
class surrounds the disclosure text and styles itlasso-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)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 usingEnsure that the
lasso-display
andlasso-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: 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
andmax-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 usingEnsure that the
lasso-display
andlasso-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;
}