Clickfunnels CSS Snippets

01-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 contain different snippets of code that do specific things. 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.

02-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 */

03-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; }


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


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

04-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; }


/**
 * Add an icon in the center of images inside a specific section (such a play button for thumbnails)
 */
#SECTION-ID .elImageWrapper:after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	left: 50%;
	top: 50%;
	margin-left: -20px;
	margin-top: -20px;
	background: url('URL_TO_THE_IMAGE');
	background-size: contain;
}


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

05-clickfunnels-membership.css

/**
 * Change color of module's headlines, change the number inside "nth-child" to whatever number of module you want to set the color to 
 */ 
#SIDEBAR-MENU-ID > ul > li:nth-child(1) > div { 
	background-color: #YOUR_COLOR !important; 
} 


/**
 * Change the background of the lessons in the menu when hovered
 */
a.activeMemberNav {
	background: #YOUR_COLOR !important;
}


/**
 * Change the color of the arrow of the current lesson
 */
a.activeMemberNav:before {
	opacity: 1;
	color: #YOUR_COLOR !important;
}

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