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,

Yes. I have an idea that you haven’t looked well for the Xing glyph, since I was able to find it. http://www.clipular.com/c?5946811=zM1_Hm9yLKqfAg_cXwIOP0xZTlY&f=.png (the one with the outline in center) /

.

Just go to that website fontello.com and this glyph is in Zocial.

Now you need to pick the size, and select that one glyph and click download button and you got it.

In the theme the location of current glyph files is in there: /config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello-charmap.php

—

I would follow these instructions regarding how to add a stand alone glyph as I haven’t deal with fonts much, so reading up as i go.. will ask.. instructions ->. http://css-tricks.com/html-for-icon-font-usage/

Thanks,

Nick

Hi,

Please open up /includes/admin/register-admin-options.php and find line 803 that looks like

'Behance' 	=> 'behance',

and somewhere in that block of social networks, add

'Xing' 	=> 'xing',

===

Please open up /config-templatebuilder/avia-shortcodes/team.php and fine line 300, and between lines 300 and 301 (or in that block of social networks) paste the code below.

'xing',

=====

In file functions.php at the base of the theme find line 141 and follow the instructions on lines 117-121 about finding the symbol for Xing

'tumblr' 	=> '',			//219

and here you will need to go and get a code from the entypo icon fonts. After finding the code to the xing icon that looks same as the codes you see in that block all the way up to line 141 you add

'xing' 	=> '',			//except instead of 62229 you add the code for xing from entypo icon fonts.

===

Please add the following css to Quick CSS or to /css/custom.css

#top .avia-team-member .xing:hover     { color:#345574; }

#top .social_bookmarks_xing:hover    a{color:#fff; background-color:#345574; }

Thanks. Let us know how it goes.

Thanks,

Nick

Hi,

IE8/9 – The theme uses a lot of css3, and IE8 always had problems displaying… well everything, but especially its alergic too cool looking css transitions. I think that besides employees forced to use IE8 at the office, the rest of the loyal users expect the web to be a weird , gloomy, and always semi-broken place with lots of error popups. I think its misplaced nostalgia , but I am always worried that if too many websites start optimizing for IE8, that might spook the nostalgic users into downgrading further to IE7 or 6 heaven forbid.

=====

Wow. Charged you $100 just to blame the theme. Gotta get in on this racket, but can’t, since Kriesi despises greedy charlatans with a support department acting like a robot on a loop – blaming everybody else. Only programmers, an expensive technical staff, can properly support WordPress, an expense that too many companies balk at paying. On that note,.. lets see what we got here…,

=====

On ie9 some map comes up on your homepage i don’t see with other browsers. http://i.imgur.com/sjnju0Q.png … Might be your missing browser. See and you worried about IE optimizations!

=====

Please look at the top of styles.css. The current version of the theme is 1.41 . If that’s not what your’s show on top of styles.css, then please download the updated version from themeforest.net, make a backup of your site, and using ftp overwrite your current site with the update.

===

Look in functions-enfold.php in the root of theme, for line 568 and add // two forward slashes in front of the line just as shown below

//add_action('admin_menu', 'avia_check_updates', 1, 1);

Please see if the error went away. By the way, are you even able to login to the admin backend, because this error should be on every page of the backend.? Reread what you wrote. Hmmm.. Renegade javascript for sure.

=============

Right now you are probably in the top 3 of all wordpress sites i did support for .. yes, for sure … in the total number of .js and .css files attached to your site. It’s amazing there isn’t a single javascript error or even a warning.

Is cloudflare compressing them correctly? (would you please disable cloudflare while doing this and empty the cache). then please disable every single plugin you have with the exception of that magic multiple listing . All others disabled! logout as admin, Clear the cache,, and browse the site to see if maps/widgets are being displayed correctly now.

If none of this works you can send me login credentials , but please disable cloudflare, make sure its not doing anything more that what a normal DNS does. My email is usjahm (at) gmail (dot) com.

Thanks,

Nick

Hi,

I made a video tutorial about this topic https://vimeo.com/channels/aviathemes/66091327 . It will probably take another hour or so for it to be posted on that link. It’s not quite your issue, but I had no problems with a bit of css to stretch lots of things.

Thanks,

Nick

Hi,

Add this to your custom.css to fix the nice square issue

#top.single .fullsize .template-blog .blog-meta {

width: 100%;

}

About the blurriness… I am not too good with that. My world is blurry, had laser eye surgery but forgot to take off my contacts. AHem. You can try this code and see if it does anything

#top .avia_textblock{

webkit-perspective: none;

-webkit-backface-visibility: hidden;

-webkit-text-stroke: 0.24px

}

I am still looking at the other one. Please reply in 7 hours or so if you hear nothing.

Thanks,

Nick

Hey,

(Read what Peter wrote above first)

I did a trace on the message you quoted and its a 1 year old forum post( http://wordpress.org/support/topic/plugin-lightbox-plusinline ) by the developer of the plugin, but since that time there are quite a few other posts, including video tutorials http://philipgledhill.co.uk/lightbox-plus-video-guide/

But first things first. Remove Jetpack. Also remove all plugins except mailchimp and that lightbox. ALL of them.

Then you need to upgrade the theme. I can see you are not using the latest framework version and there were lots of changes. when you finish updating, and only have mailchimp and the lightbox on, let me know.

Thanks,

Nick

No problem. Enjoy the theme!

Thanks,

Nick

Hi,

I see what you mean I think it may be a bug indeed. I played around with it, and I think making this change does the trick

Please ***make a backup*** and open up /config-templatebuilder/avia-template-builder/assets/js/avia-table.js and find line 147-150 that looks like

{

var template = $scope.find('.avia-template-row .avia-table-cell:eq(1)');

row.find('.avia-table-cell:not(.avia-table-cell-style.avia-table-cell, .avia-table-cell-delete.avia-table-cell)').html(template.html());

}

and change it to look like (from line 162)

{

$table.find('.avia-table-row .avia-table-cell:not(.avia-delete-row .avia-table-cell):nth-child('+(index + 1)+')').removeClass(classNames).addClass(newClass);

}

then find line 135 which looks like

var select		= $(this),

delete it, and paste the block of code below in its place (from lines 155-158)

var select		= $(this),

current		= select.parents('.avia-table-cell:eq(0)'),

elements 	= select.parents('.avia-table-row:eq(0)').find('.avia-table-cell'),

index 		= elements.index(current),

Please let us know how it worked out. It seems to work, but Kriesi will need to do his magic here since this is out of my depth.

Thanks,

Nick

Hi,

Nice colors. Looks good.

1) “there is a faint line that appears at the top of the menu which spans the entire width of the menu” Umm.. I can guess without seeing code, but not sure what else will be affected.

#top .container_wrap {

border-top-width: 0px;

}

2) Css to change padding between menu items. Change 13 to 10 in the css.

#top .main_menu ul:first-child > li > a {

padding: 0 13px;

}

3) Just recreate the html structure of the orange thing and the line from the top of the menu and add it to wherever you want to. Since we are talking abstract here, not much more I can offer. Show me the page with code and I can give a better answer.

Thanks,

Nick

Hi,

How did you make this? Because this is showing up as a portfolio ( http://hollenberg.tv/blog/ ) not as a blog. Can you explain.

Also what page is set as a blog in Enfold > Theme Options ?

On Settings > Reading …. the ”Your latest posts” is set as the top option, correct?

—-

Please open up functions.php located in the base folder of the theme and find line 79 that looks like this

$avia_config['imgSize']['portfolio']  = array('width'=>495, 'height'=>400 )

and change it to look like this

$avia_config['imgSize']['portfolio']  = array('width'=>248, 'height'=>186, 'crop'=>true );

As I said something is wrong with the way you are doing this because that page may say its a blog, but it is not, that’s why we are changing the size here for the portfolio. Just remember that changing this doesn’t automatically change the images. For that you will need to install the Simple Image Sizes plugin ( http://wordpress.org/extend/plugins/simple-image-sizes/ ) and regenerate the current images (or re-upload them). To test , you can just delete one of the big images that you wanted cropped and reupload it again.

=================

Please look at this video https://vimeo.com/channels/aviathemes/64996057 , as to how to add Advanced Layout Editor to Posts. Once you have it there, you can chose whether to display an image or not on your individual posts.

Thanks,

Nick

Hi,

Your link is dead.

http://www.clipular.com/c?5676122=5jLI2E7Bmphfva-j22vHx9RKtLQ&f=.png

Thanks,

Nick

Glad that Dude showed you the wisdom of the ancients.

Thanks,

Nick

Glad that Ismael got you back on track!

Thanks

Nick

Hi,

Your problem I think is that you have some members of list taking 1 line some 2 and others 3 lines. So you can’t set a standard height. If you can make each list member be of equal length, you can use this

#top .entry-content div li {

height: 5em;

}

if not, then use a span for each like

<li>

<span style ="line-height: 1em;">

List Item 1

</span>

</li>

Thanks,

Nick