Clickfunnels CSS Snippets

Clickfunnels CSS Snippets.md

Introduction

This is a series of code snippets that will help you customize your Clickfunnels pages with CSS code.

Instructions

Each one of the files below contains a different snippet of code that does a specific thing. Everything inside the /* and /* is a comment.

Once you find the snippet that does what you want to achieve, just copy the entire thing and paste it into your "SETTINGS > CUSTOM CSS" in your funnel step.

clickfunnels-buttons.css

/** 
 * Remove radius for buttons 
 */
.elButton { border-radius: none !important; }


/**
 * Remove borders for all the buttons 
 */
.elButton { border: none !important; }


/**
 * Hover animation for buttons (makes them a little bit bigger when hovered) 
 */
.elButton { transition: all .3s; }
.elButton:hover { transform: scale(1.05); }


/**
 * Add a border to all the buttons
 *
 * This is the structure of the "border" property:
 *
 * border: thickness type color;
 *
 * The "thickness" is in pixels.
 * 
 * Theres 5 "type"s:
 *     - solid
 *	   - dashed
 *	   - dotted
 *     - double
 *     - groove
 *
 * Experiment with the types to see which one you like!
 */
.elButton { border: 1px solid #fff; }


/**
 * Add a play button to images inside a specific section
 */
#SECTION-ID .elImageWrapper:after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	left: 50%;
	top: 50%;
	margin-left: -20px;
	margin-top: -20px;
	background: url('https://funnelspirations.com/hosted/images/4c/b76cc0dc3b11e7a20933d990e7532c/play-btn.png');
	background-size: contain;
}

/**
 * Convert all buttons into pill buttons 
 */
.elButton { border-radius: 50px !important; }


/* Code by https://christiancisneros.me */

clickfunnels-images-videos.css

/**
 * Add border radius to all images
 */
.elImageWrapper img {
	border-radius: 5px !important;
}

/**
 * Add a border to all the videos on the page
 */
.elVideo { border: 2px solid #YOUR_COLOR; }


/* Code by https://christiancisneros.me */

clickfunnels-misc.css

/**
 * Add a color overlay above your background in any specific section
 *
 * Important note: YOUR_COLOR needs to be in rgba format, like this: 
 * 
 * rgba(0, 0, 0, .85)
 *
 * The last number (.85) is the opacity of your overlay. You 
 * can use any number from 0 to 1, the higher the number, the
 * more opaque the overlay.
 * 
 */
#SECTION-ID {
	position: relative;
}

#SECTION-ID:before {
  	position: absolute;
  	display: block;
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: 0;
  	content: '';
  	background: YOUR_COLOR;
}


/**
 * The Grammarly extension adds some weird spacing and numbers in the pages, this code gets rid of those
 */
grammarly-btn { display: none !important; }


/**
 * Make a row inside a specific section to be full width
 */
#SECTION-ID .containerInner {
	width: 100% !important;
}


/**
 * Make all rows in a page span the full width of the screen
 */
.containerInner {
	width: 100% !important;
}


/* Center the background of any section */
#SECTION-ID {
	background-position: center !important;
}


/**
 * Add a shadow to any element
 *
 * For this we're using the "box-shadow" property. The structure is:
 *
 * box-shadow: offset-x offset-y blur color;
 *
 * offset-x and offset-y mean how far from the element the shadow will be in
 * the x axis and the y axis. Just play with the numbers!
 */
#CSS-ID-SELECTOR {
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25) !important;
}


/**
 * Hide the CF badge 
 */
.nodoBadge{ display: none; }


/* Code by https://christiancisneros.me */