Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23192

    How do we create those iconboxes with secondary background color?

    http://www.kriesi.at/themes/enfold/shortcodes/iconbox/?skin=Vine

    #118887

    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

    #118888

    But will this go for all icon boxes? Your demo shows a page with both transparent and colored icon boxes. How to get it like that?

    #118889

    Hi,

    You can target a specific iconbox. You can do that by adding the avia-builder selector.

    #top .iconbox.avia-builder-el-5 {
    background: rgba(110, 128, 128, 0.49) !important;
    }

    Please try to inspect each of your iconboxes and look for the avia-builder selector. I think it is the only way you can specify a different color for each iconbox.

    Regards,

    Ismael

    #118890

    So your demo page has customizations you dont even know about? http://www.kriesi.at/themes/enfold/shortcodes/iconbox/?skin=Vine

    Is avia-builder-el-5 the icon box with top icon?

    #118892

    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

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Icon box woth secondary color’ is closed to new replies.