Hi,

You both are asking very abstract questions that are difficult to answer without seeing what you have on the pages, etc.. so there are multiple possible combinations with the theme. Could you provide a url please (you can mask it with http://www.goo.gl) so that we can give you the code for you to use with your designs.

Here is the css code I use to make everything including header, body, footer, socket transparent. Please add this CSS below to Quick CSS or to /css/custom.css file.

#top #main,#top .html_stretched #wrap_all,#top .alternate_color,#top .header_color,#top .main_color,#top .header_color div,#top #header,#top .header_color .container_wrap_meta,#top .header_color .header_bg,#top .footer_color,#top .footer_color,#top .socket_color {

background-color:rgba(255,255,255,0) !important;

}

#top .container_wrap {

border-top-width:0px !important;

}

#top #header_main {

border-bottom-width: 0px !important;

}

Just please make sure that you add a background in Enfold > Styling > General. and remove the color from ‘Body Background color’ input box right above where you will upload the image on that page.

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

Hi jasmine,

I’ll tag the topic for Nick so he knows to re-up it.

Regards,

Devin

Hi Michael,

Do you mean when using the Advanced Layout Editor (drag and drop layout editor)? I’m not sure if that would be fixable or not just because of the way the save works on those items. Because they are saved separate from the visual editor data, I don’t know how wordpress treats it when previewing vs publishing.

I’ve tagged the topic for Kriesi however so that he can look further into it.

Regards,

Devin

Hi,

This was definately a rough one. I came up with the css that fixes Firefox , but it unfortunately breaks Chrome. So please do this.

Open up header.php and change line 13 that looks like

<html <?php language_attributes(); ?> class="<?php echo " html_$style ".$responsive." ".$headerS;?> ">

to look like

<html <?php language_attributes(); ?> class="<?php echo avia_get_browser('class', true) ." html_$style ".$responsive." ".$headerS;?> ">

Save that file, and now add the following CSS to Quick CSS or your /css/custom.css file

.firefox #top p a, .opera #top p a {

display:inline !important;

position:inherit !important;

}

Please let us know if this one does the trick.

Thanks,

Nick

I’ll go ahead and close the topic in that case :)

Regards,

Devin

Hi Antonio,

My guess is the autoplay on the video is causing the avia builder to run into issues. In general, its never a good idea to have videos auto play but when using the advanced editor, it attempts to run anything inside of it/display images to better help users making visual layouts (we’re looking at options for this).

Another thing to try would be to disable Jetpack and the Statcounter plugin and see if that helps. Jetpack, while feature packed is very invasive in what it effects through wordpress but perhaps one/both of them is having some conflicts with the video content or the builder in general.

I wasn’t able to reproduce any of the testimonial issues on my end however. Is it only in a specific browser or OS?

Regards,

Devin

Hi Andy

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

#top .grid-entry .inner-entry {

background: #333;

box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2); /*border on portfolio items*/

}

and

#top .grid-entry-title {

background-color: #333; /*bg of title for portfolio item*/

color: #fff; /*color of title text*/

}

The footer issue is most likely not possible without quite a bit of tweaking. Since each footer section doesn’t actually touch the one next to it, you would need to re-do that grid section to allow a line to extend past the edge of the actual widget.

Regards,

Devin