How-to: Dot Line divider & Icon Box custom colors

[Terry Hale]

The Circumference theme comes with some really nice, modern colors that blend well together no matter which ones you use where.

Let’s see how to extend those custom colors not defined in some classes in Circumference’s default style sheet.

The examples and styling shown here are for the Dot Line style page divider and the Icon Box styles of and . (+ to open those links in a new window.)

You can take these examples and customize other classes as well.

Let’s start with the Dot Line page divider. If you have walked through the tutorials, you know your Circumference package comes with a set of text files located in the html snippets folder. The dividers.txt file contains a list of classes that you can assign to create custom dividers on your pages.

The *** Dot Line *** section contains styling like such:

You use that code to put a Dot Line style divider on your page. In order to be able to style those in a custom Circumference color, we want to add color classes to the cir-divider-dotline and cir-dot classes above. You will need to add the following code to your child’s style sheet.

/* Dot Line Divider color styling 
   ------------------------------ */

.cir-divider-dotline.aqua {	
	border-bottom: 1px solid #25b6c3;
}
.cir-dot.aqua {
	background-color: #25b6c3;
}
.cir-divider-dotline.brown {	
	border-bottom: 1px solid #a97046;
}
.cir-dot.brown {
	background-color: #a97046;
}
.cir-divider-dotline.tan {	
	border-bottom: 1px solid #c6b274;
}
.cir-dot.tan {
	background-color: #c6b274;
}
.cir-divider-dotline.red {	
	border-bottom: 1px solid #9f3e20;
}
.cir-dot.red {
	background-color: #9f3e20;
}
.cir-divider-dotline.orange {	
	border-bottom: 1px solid #dd992a;
}
.cir-dot.orange {
	background-color: #dd992a;
}
.cir-divider-dotline.green {	
	border-bottom: 1px solid #bec244;
}
.cir-dot.green {
	background-color: #bec244;
}
.cir-divider-dotline.grey {	
	border-bottom: 1px solid #e2e5e7;
}
.cir-dot.grey {
	background-color: #e2e5e7;
}

So now, in order to create a green Dot Line divider for example, this is how you would code it on your page:

Next we will customize colors for Icon Box Heading and any Icon Box style that uses the cir-iconbox-icon class. For example, you might want an orange icon on your green Icon Box with Background Color. See your icon-boxes.txt file for reference.

/* Icon Box Heading colors 
   ----------------------- */
.cir-iconbox-heading-icon.aqua {
	color:#25b6c3;	
	border: none;
}

.cir-iconbox-heading-icon.brown {
	color:#a97046;
	border: none;
}
.cir-iconbox-heading-icon.tan {
	color:#c6b274;
	border: none;
}
.cir-iconbox-heading-icon.red {
	color:#9f3e20;
	border: none;
}
.cir-iconbox-heading-icon.orange {
	color:#dd992a;
	border: none;
}
.cir-iconbox-heading-icon.green {
	color:#bec244;
	border: none;
}
.cir-iconbox-heading-icon.grey {
	color:#e2e5e7;
	border: none;
}

/* Icon Box icon colors 
   -------------------- */
.cir-iconbox-icon.aqua {
	background-color:#25b6c3;	
	border: none;
}

.cir-iconbox-icon.brown {
	background-color:#a97046;
	border: none;
}
.cir-iconbox-icon.tan {
	background-color:#c6b274;
	border: none;
}
.cir-iconbox-icon.red {
	background-color:#9f3e20;
	border: none;
}
.cir-iconbox-icon.orange {
	background-color:#dd992a;
	border: none;
}
.cir-iconbox-icon.green {
	background-color:#bec244;
	border: none;
}
.cir-iconbox-icon.grey {
	background-color:#e2e5e7;
	border: none;
}

Apologies to Andre for misspelling the word ‘color’ so many times ha ha :whistle:

[Sushil Adhikari]

I almost believe I should hire you as theme support to make my job easier 😉

Oh, and as for the spelling of color as colour …..pffft
“Colour” is the correct way 😛
Oh, and “roof’ is “roof” not “ruff” 😛

[Terry Hale]

Tankee, sir! I appreciate the sentiment and the lightheartedness. You know how to get in touch. :blink:

Seriously, though, the more I dive into these themes, the more I understand how much skill and effort it takes to make each one unique and powerful yet easy to use and implement. Looking under the hood shows that each one has a distinct personality.

[confidential]I really enjoy sharing knowledge and presenting it in a way that is easy to follow and use, a la Andre. Circumference has had me up until 5AM the last two mornings lol! It has been a real treat and I’m super grateful I ran across these. It was the curved banner and responsiveness in Celestial that drew my eye and eventually clinched the sale.[/confidential]

[Sushil Adhikari]

Greatly appreciated…thanks Terry. Regarding the Celestial curve, I was always surprised how popular that became I thought “well, lets put a curved banner and move on”. haha.

Anyway, thanks again for the testimonial….and by the way, get some sleep !

[Author]

Posts