Icon box woth secondary color

Hi,

This produces the background color, please add it to Quick CSS or to /css/custom.css file

#top .iconbox {

background: rgba(110, 128, 128, 0.49) !important;

}

You can play around with the colors and transparency levels here to find what you like best.

Thanks,

Nick

Hi,

It is not humanly possible to memorize every customization on every page of all 25+ themes created by Kriesi. Our expertise allows us to hear your issue and based on experience to find a solution.

There is a setting when you add icon boxes to chose between the two types. On the page you showed one setting is the top box, and another setting is for the bottom box. http://www.clipular.com/c?5984183=nP5u95YY68zTnjdZQ7M-p3K48II&f=.png

”Icons” is a deceptive word for what those objects are, and I think the word ‘glyphs’ better describes them. They are actually letters in a font, so normally they use the background color of the surface they are displayed on. You can see this for yourself by selecting a glyph/icon from the url you included, and then pasting it into a text editor.There is a finite number of these glyphs, but more are created by font designers.

So your question “How do we create those icon boxes with secondary background color?”

Go to Enfold > Styling … These settings http://www.clipular.com/c?5979214=wbrivr4adQ4g86CNba80vyKmb0c&f=.png produce this look http://www.clipular.com/c?5981208=QQxKvMUsOUltUkXuW9UQEHceyWs&f=544f41686b75de40fc3a238eeae84636

So you can match the colors to see what causes what. Obviously if you leave the color completely out of the setting, the glyph will take a background color of anything below it including an image.

—

If you want the direct css to be able to change the colors, here it is ( http://www.clipular.com/c?5983163=jwLi-AjivmSQAOy2kDhl86kB-TA&f=.png ) <– css blocks explained in image

Icon Position Setting : Left (on the above link to image, it is CSS BLOCK 1)

/*---background,color,border color of the settings:left glyph---*/

#top .iconbox_icon.heading-color.avia-font-entypo-fontello {

background-color:rgb(174,255,181);

color:rgb(205,6,255);

border-color:rgb(41,11,255);

border-width:1px;

border-style: solid;

}

—

Icon Position Setting : Top (on the above link to image, it is CSS BLOCK 2)

/*---background color of the box itself (orange)---*/

/*---shadow around the box itself (raspberry)---*/

#top .iconbox_top .iconbox_content {

background:rgb(233,122,37);

box-shadow: 2px 2px 3px 2px rgb(160,49,49);

}

/*---background,color,border color of the circle and of the glyph---*/

#top .main_color.iconbox_top .iconbox_icon {

background-color:rgb(174,255,181);

color:rgb(205,6,255);

border-color:rgb(41,11,255);

border-width:1px;

border-style: solid;

}

*If you want to make every icon box on a page to have its own colors, you will need to use CSS with firebug or Chrome Developer Tools to look at the code ***after*** creating the boxes to get their individual ID numbers and add those to the above css. To learn more about CSS, a highly recomended resource is CSS Beginner Tutorial or 5 Baby Steps to Become a CSS Sorcerer

I hope this answers your question :)

Thanks,

Nick