chrisgalard · February 20, 2023 10:18 · May 3, 2018 · May 3, 2018 · May 3, 2018 · May 3, 2018
diff --git a/04-clickfunnels-images-videos.css b/04-clickfunnels-images-videos.css
@@ -12,7 +12,7 @@
 
 
 /**
- * Add a play button to images inside a specific section
+ * Add an icon in the center of images inside a specific section (such a play button for thumbnails)
  */
 #SECTION-ID .elImageWrapper:after {
 	content: '';
@@ -23,7 +23,7 @@
 	top: 50%;
 	margin-left: -20px;
 	margin-top: -20px;
-	background: url('https://funnelspirations.com/hosted/images/4c/b76cc0dc3b11e7a20933d990e7532c/play-btn.png');
+	background: url('URL_TO_THE_IMAGE');
 	background-size: contain;
 }
 

diff --git a/01-Clickfunnels CSS Snippets.md b/01-Clickfunnels CSS Snippets.md
@@ -4,6 +4,6 @@ This is a series of code snippets that will help you customize your Clickfunnels
 
 ## Instructions
 
-Each one of the files below contain different snippets of code that do specific things. Everything inside the **/*** and **/*** is a comment.
+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.
diff --git a/Clickfunnels CSS Snippets.md → 01-Clickfunnels CSS Snippets.md b/Clickfunnels CSS Snippets.md → 01-Clickfunnels CSS Snippets.md
diff --git a/clickfunnels-misc.css → 02-clickfunnels-misc.css b/clickfunnels-misc.css → 02-clickfunnels-misc.css
diff --git a/clickfunnels-buttons.css → 03-clickfunnels-buttons.css b/clickfunnels-buttons.css → 03-clickfunnels-buttons.css
diff --git a/clickfunnels-images-videos.css → 04-clickfunnels-images-videos.css b/clickfunnels-images-videos.css → 04-clickfunnels-images-videos.css
diff --git a/clickfunnels-membership.css → 05-clickfunnels-membership.css b/clickfunnels-membership.css → 05-clickfunnels-membership.css
diff --git a/clickfunnels-buttons.css b/clickfunnels-buttons.css
@@ -38,22 +38,6 @@
 .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 
  */

diff --git a/clickfunnels-images-videos.css b/clickfunnels-images-videos.css
@@ -11,4 +11,21 @@
 .elVideo { border: 2px solid #YOUR_COLOR; }
 
 
+/**
+ * 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;
+}
+
+
 /* Code by https://christiancisneros.me */
diff --git a/clickfunnels-membership.css b/clickfunnels-membership.css
@@ -20,4 +20,6 @@ a.activeMemberNav {
 a.activeMemberNav:before {
 	opacity: 1;
 	color: #YOUR_COLOR !important;
-}
+}
+
+/* Code by https://christiancisneros.me */
diff --git a/Clickfunnels CSS Snippets.md b/Clickfunnels CSS Snippets.md
@@ -4,6 +4,6 @@ This is a series of code snippets that will help you customize your Clickfunnels
 
 ## 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.
+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.
diff --git a/clickfunnels-membership.css b/clickfunnels-membership.css
@@ -0,0 +1,23 @@
+/**
+ * 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;
+}
diff --git a/add-border-radius-to-images.css b/add-border-radius-to-images.css
@@ -1,6 +0,0 @@
-/**
- * Add border radius to all images
- */
-.elImageWrapper img {
-	border-radius: 5px !important;
-}

diff --git a/add-border-to-videos.css b/add-border-to-videos.css
@@ -1,4 +0,0 @@
-/**
- * Add a border to all the videos on the page
- */
-.elVideo { border: 2px solid #YOUR_COLOR; }

diff --git a/clickfunnels-images-videos.css b/clickfunnels-images-videos.css
@@ -0,0 +1,14 @@
+/**
+ * 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 */
diff --git a/remove-grammarly-code.css b/remove-grammarly-code.css
diff --git a/center-section-background.css b/center-section-background.css
@@ -1,6 +0,0 @@
-/* Center the background of any section */
-#SECTION-ID {
-	background-position: center !important;
-}
-
-/* Code by https://christiancisneros.me */

diff --git a/clickfunnels-buttons.css b/clickfunnels-buttons.css
@@ -57,4 +57,7 @@
 /**
  * Convert all buttons into pill buttons 
  */
-.elButton { border-radius: 50px !important; }
+.elButton { border-radius: 50px !important; }
+
+
+/* Code by https://christiancisneros.me */
diff --git a/clickfunnels-misc.css b/clickfunnels-misc.css
@@ -0,0 +1,78 @@
+/**
+ * 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 */
diff --git a/element-shadow.css b/element-shadow.css
@@ -1,15 +0,0 @@
-/**
- * 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;
-}
-
-/* Code by https://christiancisneros.me */

diff --git a/full-width-all-rows.css b/full-width-all-rows.css
@@ -1,8 +0,0 @@
-/**
- * Make all rows in a page span the full width of the screen
- */
-.containerInner {
-	width: 100% !important;
-}
-
-/* Code by https://christiancisneros.me */

diff --git a/full-width-row.css b/full-width-row.css
@@ -1,8 +0,0 @@
-/**
- * Make a row inside a specific section to be full width
- */
-#SECTION-ID .containerInner {
-	width: 100% !important;
-}
-
-/* Code by https://christiancisneros.me */

diff --git a/hide-badge.css b/hide-badge.css
@@ -1,4 +0,0 @@
-/**
- * Hide the CF badge 
- */
-.nodoBadge{ display: none; }

diff --git a/remove-grammarly-code.css b/remove-grammarly-code.css
@@ -1,4 +0,0 @@
-/**
- * The Grammarly extension adds some weird spacing and numbers in the pages, this code gets rid of those
- */
-grammarly-btn { display: none !important; }

diff --git a/section-overlay.css b/section-overlay.css
@@ -1,30 +0,0 @@
-/**
- * Add a color overlay above your background in any specific section
- */
-#SECTION-ID {
-	position: relative;
-}
-
-#SECTION-ID:before {
-  	position: absolute;
-  	display: block;
-  	width: 100%;
-  	height: 100%;
-  	top: 0;
-  	left: 0;
-  	content: '';
-  	background: YOUR_COLOR;
-}
-
-/**
- * Comment: 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.
- * 
- */
-
-/* Code by https://christiancisneros.me */

diff --git a/add-buttons-borders.css b/add-buttons-borders.css
@@ -1,19 +0,0 @@
-/**
- * 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; }

diff --git a/animate-buttons-hover.css b/animate-buttons-hover.css
@@ -1,5 +0,0 @@
-/**
- * Hover animation for buttons (makes them a little bit bigger when hovered) 
- */
-.elButton {	transition: all .3s; }
-.elButton:hover { transform: scale(1.05); }

diff --git a/clickfunnels-buttons.css b/clickfunnels-buttons.css
@@ -0,0 +1,60 @@
+/** 
+ * 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; }
diff --git a/images-play-button.css b/images-play-button.css
@@ -1,15 +0,0 @@
-/**
- * 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;
-}

diff --git a/pill-buttons.css b/pill-buttons.css
@@ -1,4 +0,0 @@
-/**
- * Convert all buttons into pill buttons 
- */
-.elButton { border-radius: 50px !important; }

diff --git a/remove-buttons-borders.css b/remove-buttons-borders.css
@@ -1,6 +0,0 @@
-/**
- * Remove borders for all the buttons 
- */
-.elButton { border: none !important; }
-
-/* Code by https://christiancisneros.me */

diff --git a/remove-buttons-radius.css b/remove-buttons-radius.css
@@ -1,4 +0,0 @@
-/** 
- * Remove radius for buttons 
- */
-.elButton { border-radius: none !important; }

diff --git a/add-border-radius-to-images.css b/add-border-radius-to-images.css
@@ -0,0 +1,6 @@
+/**
+ * Add border radius to all images
+ */
+.elImageWrapper img {
+	border-radius: 5px !important;
+}
diff --git a/add-border-to-videos.css b/add-border-to-videos.css
@@ -0,0 +1,4 @@
+/**
+ * Add a border to all the videos on the page
+ */
+.elVideo { border: 2px solid #YOUR_COLOR; }
diff --git a/add-buttons-borders.css b/add-buttons-borders.css
@@ -0,0 +1,19 @@
+/**
+ * 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; }
diff --git a/animate-buttons-hover.css b/animate-buttons-hover.css
@@ -0,0 +1,5 @@
+/**
+ * Hover animation for buttons (makes them a little bit bigger when hovered) 
+ */
+.elButton {	transition: all .3s; }
+.elButton:hover { transform: scale(1.05); }
diff --git a/center-section-background.css b/center-section-background.css
@@ -0,0 +1,6 @@
+/* Center the background of any section */
+#SECTION-ID {
+	background-position: center !important;
+}
+
+/* Code by https://christiancisneros.me */
diff --git a/element-shadow.css b/element-shadow.css
@@ -0,0 +1,15 @@
+/**
+ * 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;
+}
+
+/* Code by https://christiancisneros.me */
diff --git a/hide-badge.css b/hide-badge.css
@@ -0,0 +1,4 @@
+/**
+ * Hide the CF badge 
+ */
+.nodoBadge{ display: none; }
diff --git a/images-play-button.css b/images-play-button.css
@@ -0,0 +1,15 @@
+/**
+ * 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;
+}
diff --git a/pill-buttons.css b/pill-buttons.css
@@ -0,0 +1,4 @@
+/**
+ * Convert all buttons into pill buttons 
+ */
+.elButton { border-radius: 50px !important; }
diff --git a/remove-buttons-borders.css b/remove-buttons-borders.css
@@ -0,0 +1,6 @@
+/**
+ * Remove borders for all the buttons 
+ */
+.elButton { border: none !important; }
+
+/* Code by https://christiancisneros.me */
diff --git a/remove-buttons-radius.css b/remove-buttons-radius.css
@@ -0,0 +1,4 @@
+/** 
+ * Remove radius for buttons 
+ */
+.elButton { border-radius: none !important; }
diff --git a/Clickfunnels CSS Snippets.md b/Clickfunnels CSS Snippets.md
@@ -1,6 +1,6 @@
 # Introduction
 
-This is a series of code snippets that will help you customize your Clickfunnels page with CSS code.
+This is a series of code snippets that will help you customize your Clickfunnels pages with CSS code.
 
 ## Instructions
 

diff --git a/full-width-all-rows.css b/full-width-all-rows.css
@@ -3,4 +3,6 @@
  */
 .containerInner {
 	width: 100% !important;
-}
+}
+
+/* Code by https://christiancisneros.me */
diff --git a/full-width-row.css b/full-width-row.css
@@ -3,4 +3,6 @@
  */
 #SECTION-ID .containerInner {
 	width: 100% !important;
-}
+}
+
+/* Code by https://christiancisneros.me */
diff --git a/remove-grammarly-code.css b/remove-grammarly-code.css
@@ -0,0 +1,4 @@
+/**
+ * The Grammarly extension adds some weird spacing and numbers in the pages, this code gets rid of those
+ */
+grammarly-btn { display: none !important; }
diff --git a/section-overlay.css b/section-overlay.css
@@ -0,0 +1,30 @@
+/**
+ * Add a color overlay above your background in any specific section
+ */
+#SECTION-ID {
+	position: relative;
+}
+
+#SECTION-ID:before {
+  	position: absolute;
+  	display: block;
+  	width: 100%;
+  	height: 100%;
+  	top: 0;
+  	left: 0;
+  	content: '';
+  	background: YOUR_COLOR;
+}
+
+/**
+ * Comment: 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.
+ * 
+ */
+
+/* Code by https://christiancisneros.me */
diff --git a/readme.md → Clickfunnels CSS Snippets.md b/readme.md → Clickfunnels CSS Snippets.md
diff --git a/full-width-row.css b/full-width-row.css
@@ -0,0 +1,6 @@
+/**
+ * Make a row inside a specific section to be full width
+ */
+#SECTION-ID .containerInner {
+	width: 100% !important;
+}
diff --git a/readme.md b/readme.md
@@ -1,10 +1,8 @@
 # Introduction
----
 
 This is a series of code snippets that will help you customize your Clickfunnels page 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.
 

diff --git a/full-width-all-rows.css b/full-width-all-rows.css
@@ -0,0 +1,6 @@
+/**
+ * Make all rows in a page span the full width of the screen
+ */
+.containerInner {
+	width: 100% !important;
+}
diff --git a/readme.md b/readme.md
@@ -0,0 +1,11 @@
+# Introduction
+---
+
+This is a series of code snippets that will help you customize your Clickfunnels page 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.