All Lasso displays are designed not to conflict with any CSS. We use very specific CSS classes avoid problems. This makes it easy to customize depending on the theme you choose to start with.

Lasso displays are wrapped in a container <div> container and a single theme <div>. For example, <div class="lasso-display lasso-cactus">. This sets the stage for the rest of the classes.

Here's a list of all the CSS classes you can change with some example code:

/*********************************************************
	MAIN DISPLAY WRAPPERS
*********************************************************/
.lasso-container{}
.lasso-display{}
.lasso-grid-wrap{}
.lasso-grid-row{}

/*********************************************************
	GRID BOXES (USES FLEXBOX)
*********************************************************/
.lasso-box-1{}
.lasso-box-2{}
.lasso-box-3{}
.lasso-box-4{}
.lasso-box-5{}
.lasso-box-6{}

/*********************************************************
	THEMES
*********************************************************/
.lasso-cactus{}
.lasso-cutter{}
.lasso-lab{}
.lasso-llama{}
.lasso-money{}
.lasso-splash{}

/*********************************************************
	CONTENT
*********************************************************/
.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{}

NOTE: In the Single and Grid displays there are a few links: title, image, buttons.

Display Layouts in HTML

Each display theme has a specific HTML layout. Right now, there are 3 different layouts: 2-box, 3-box, and 6-box. Here's how they're laid out in flexbox DIVs:

6-Box Layout

3-Box Layout

2-Box Layout

Again, these are ALL the CSS classes for Lasso Displays. 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 simple examples of how to change the layout.

/* ALWAYS INCLUDE THE THEME CLASS NAME FOLLOWED BY THE CONTENT CLASS NAME */

/* REMOVING BUTTON HOVER EFFECT EXAMPLE */
.lasso-cactus .lasso-button-1:hover{box-shadow: none !important; transform: none !important;}