Hi this is the css code that will push them apart, but it all depends on how many column there are. This code assumes its 3 or 4 column portfolio. And ofcourse you can play with these values yourself. Initially the first one was 33.3% and the second 25%

#top .no_margin.av_one_third {

width: 31.3%;

}

#top .no_margin.av_one_fourth {

width: 23.5%;

}

Thanks,

NIck

Hi,

Anything is possible. Can you be a bit more specific about what specifically changing into what else. If you can take a snapshot of the demo portfolio page and on http://www.imgur.com (or other image storage) there are objects like little arrows you can add to the snapshot to better flush out your thought as well as convey your idea to the support team better; then just paste the link to the image here

Please try this css. You can add it to Quick CSS located in Enfold > Styling at the bottom of the page or to the /css/custom.css

#top .grid-content, #top .grid-entry-excerpt, #top .grid-entry-title {

background-color: grey;

}

#top .grid-entry-excerpt {

color: white;

}

#top .grid-entry-title {

color:yellow;

}

Thanks,

Nick

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