Hey Elliot,

that sounds nice, but apparently there are these little spacing lines between the horizontalt icons. If I put your code into quick CSS, the left margin actually is 20 px, but the icons are “glued” to these spacing lines on the right.

Can the icons be centered within these spacings?

Still with your code snippet, Google Page Speed complains the icons are still too close together in mobile view:

Hey Rikard,

in which php file belongs the code to activate this option? on the documentation site isn’t mentioned which php and where the code has to be put in..

And with “own icons” I meant icons, which I have on my computer. I have to use these ones (https://www.dropbox.com/s/f5nj32xsu9a3xhe/Bildschirmfoto%202015-12-11%20um%2012.01.16.png?dl=0) for a customer site.

Is there a way to use really own icons or can I only add these Fontello ones?

Thanks!
Daniel

Hey Elliott,

That’s good to know, but what can I do now? Could you take a look at my functions.php code?

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions in this file.
// =============================================================================

// Custom Class for every element

add_theme_support('avia_template_builder_custom_css');

add_action('wp_footer', 'add_custom_script');

function change_shortcodesjs() {
   wp_dequeue_style( 'avia-base' );
   wp_enqueue_style( 'avia-base-child', get_stylesheet_directory_uri().'/css/base.css', array(), '2', 'all' );
}
if(!is_admin()){
add_action( 'wp_enqueue_scripts', 'change_shortcodesjs', 100 );
}

function change_aviajs() {
   wp_dequeue_script( 'avia-default' );
   wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'change_aviajs', 100 );

add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);

function avia_replace_standard_icon($icons)
{
$icons['mobile_menu']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue811');
return $icons;
}

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );
function enfold_customization_modify_thumb_size( $size ) {
	$size['entry_with_sidebar'] 	= array('width'=>854, 'height'=>569);
	return $size;	
}

?>

Thx!

Sure, I can manually update all CSS, but that was not the goal of my question.
My plugin use its own CSS a lot, thousand of lines, and I want my plugin works completely and correctly on any WP site. When using Enfold, not only the search bar is bad displayed, but almost everything: fonts are smaller in list mode, right click menu on file item is huge rather than small, icons borders has disappeared, and so on …
Manually update all CSS files and add !important after each line is a huge work, and would not be clean.
How can I force my own CSS plugin files to be used in priority ? I’m sure many plugin developpers already had that problem.
Thanks.

Thank you Yigit for your help, almost everything is ok !
Except:

>>>>#3 – Price font size — – It is currently set to 18px
Yes, my code work, but it also changes the price size everywhere on the site. I would just modify the price size
in the of the individual product page (not on related products, not on the shop overview, etc.)

>>>># 4- Big Image product size: Please add following code to Quick CSS and adjust
What is the image dimensions normally? (by default)
Because I have the impression that my image looks blurred when I increases the image size with your code.

>>>>#5- Related products size: Please add following code to Quick CSS and adjust:
That work ! I can set it to 6 columns now, great ! But now the space are not equally distributed.
To adjust the space I tried to add this code (margin: 0px 0px 0px 19px !important;) to equally distribute tumbnails in the space and that seems to work except when I resize down the windows: the 6th thumbnail fall in a other line…

I had to remove the code that Ismael provided above from my child theme’s functions.php because the parse error below shows up and the site goes down so I can’t leave it in since I need an operable site. Any idea why this error is showing up and what I can do to make this work? Since the new custom icons I uploaded also use the same charcodes and the entypo-fontello font, do I need to add something into the code that distinguishes what font is being used? Maybe that’s why I’m getting this error?

I think if you can help me modify the code to show what font-family is being used then it might work?

Open Button: font: lineicons /ue816
Close Button: font: lineicons2 /ue816

Parse error: syntax error, unexpected ‘font_icons’ (T_STRING) in /home/content/p3nexnas05_data03/72/2104972/html/wp-content/themes/enfold-child/functions.php on line 61

• This reply was modified 10 years, 8 months ago by djshortkut.

Hi Ismael,

Thank you so much for actually going through my site and creating an example. While no words can express my gratitude, it is not exactly what I’m looking for. I will not be using a menu at all. The effect that you created on the “film portfolio” image is perfect, although there is no way for me to put that image exactly where I want it, how can I control where it is positioned.

In a perfect world:

1. I want to add an image using the image tab in the content section of the advanced layer slider
2. I would like that image to have a link which I can add in the Link section of the advanced layer slider
3. I want to give the image a unique “attribute ID” like “image-123”
4. I want to add a code block on the page where the advance layer slider is shown and add the code that will:
Show original image, then show 2nd image upon hover, and back to original when not hovering.

In a previous post, you replied with this for a similar problem:

************************************************************************************************************************************
Hey!

OK. On the frontpage, we created a new section with the code block element inside. You can add the icon css modifications inside the code block: http://alextomaszewski.com/wp-admin/post.php?post=389&action=edit

We modified the hover state of the imdb icon for example, using this code inside the code block element:

img#imdb-icon:hover {
background: blue !important;
}
You can do the same for the other icons. Add a unique id in the attributes panel then place the css code in the code block.

Best regards,
Ismael
********************************************************************************************************************

Instead of the background changing, I want the picture to switch to a different picture upon hover.

What is the code for that?

Thanks again Ismael! You’re the best!

Benjamin

Hi Ismael,

I wanted to add this Yelp icon to the social media icons below the main menu, so the link you sent me didn’t have all the necessary steps. Here’s what I did:

1. Downloaded Yelp icon from Fontello, set custom code to UE899
2. Uploaded zip file using Iconfont Manager
2. Added this code to enfold’s functions.php (first I added it to the child functions.php which is what caused the blank icon I previously noted):

add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
function avia_add_custom_icon($icons)
{
$icons['yelp']	 = array( 'font' =>'fontello', 'icon' => 'ue899');
return $icons;
}

add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
function avia_add_custom_social_icon($icons)
{
$icons['Yelp'] = 'yelp';
return $icons;
}

Now, when I view my site I see a pencil icon instead of the yelp icon. Can you help me get this sorted?

Thank you,
Liz

Hi Yigit

Thanks for your replay and release notes. After a lot of search on the website, I found the last update i did over wrote my custom.cc file which had all the margins and padding remove for tables, tabs & dropdown boxes. I found a backup copy and restore things back to normal, i think i will install the child theme to stop this from happening again.

below is the contents of the custom.css file, i know alot of this can now be changed in the new version of the theme.

/*SOCIAL MEDIA ICONS SECTION */
/*#top #wrap_all .av-social-link-facebook a{ color: #fff; background-color: #3B5998; text-decoration: none; }*/
/*#top #wrap_all .av-social-link-twitter a{ color: #fff; background-color: #4099ff; text-decoration: none; }*/
/*#top #wrap_all .av-social-link-mail a{ color: #fff; background-color: #ffcc00; text-decoration: none; }*/
/*#top #wrap_all .av-social-link-youtube a{ color: #fff; background-color: #c4302b; text-decoration: none; }*/
/*#top #wrap_all .av-social-link-pinterest a{ color: #fff; background-color: #C92228; text-decoration: none; }*/
#top #wrap_all .social_bookmarks li:hover a{ background-color: transparent; color: #fff; }
.social_bookmarks li { margin-right: 5px; }
/* Social Icon spacing */
/* SCREEN RESPONSIVE SECTION THIS IS TO MAKE THE LOGO AND MENU WORK TOGETHER LOL */
@media only screen and (max-width: 640px)
{
.responsive .logo a, .responsive .logo img
{ width:100%; height: auto !important; float:left; margin:0; padding:0; top:0; }
#advanced_menu_toggle { top: 52px; }
.responsive #header .social_bookmarks { top: 55%; margin:0; padding:0; left: -15%; }
.responsive.html_header_top #header_main .social_bookmarks { display: block; top: 55%; margin:0; padding:0; left: -15%; }
}

/* LAYOUTS & CONTAINERS SECTION */
.avia-team-member { margin:5px; }
.content, .sidebar { padding-top: 5px; padding-bottom: 0px; }
/* this is the spacing on the main page */
.inner_sidebar { margin-left: 10px; margin-right: 0px; padding:0px; }
.togglecontainer { margin: 0px 0px; padding: 0px; }
/* this is the Accordion box on the page */
.js_active .toggle_content { padding: 3px; margin: 0px; border-color: #c0c0c0; } /* corsa rossa */
/* this is for the Accordion content details */
.js_active .toggler { border-color: #c0c0c0; background-color: #222222} /* corsa rossa */
/* this is the Accordion title border area */
.tabcontainer { margin:0px 0px; }
/* this is for the content of the Tab box */
.js_active .tab_content { padding: 5px; margin: 0px; }
/* this is the content of the Tab box expanded */
.js_active .top_tab .tab { border-color: #d20000; } /* corsa rossa */
.js_active .active_tab_content { border-color: #d20000; } /* corsa rossa */
/* this is for the Tab titles and expanded tabs borders */
.av-special-heading { margin-top: 0px; }
/* this is for the Special Heading text */
.special-heading-inner-border { border-top-width: 2px; border-top-style: none; }
/* this is for the Special Heading line style */
.hr { border: none; margin: 0px 0 !important; height: 15px; clear: both; }
span.hr-inner, .hr-inner-style { border-color: #ffffff!important; }
/* this is for the Horizontal Rule */
.avia_textblock { padding: 5px 0px 0px 0px; margin: 0px; }
table { margin: 0px; }
th { padding: 0px; margin: 0px; border: none; }
td { padding: 5px; margin: 0px; border: none; }
tr th:first-child, tr td:first-child { border-left-style: none; margin: 0px; }
tr:first-child th, tr:first-child td { border-top-style: none; margin: 0px; }

.single-post .post-entry .big-preview { display:none !important; }
/* This stops the preview image being displayed in the post */
/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */
@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
}

I put some rem statements in to remind me of what it changed lol

maybe useful content for other users.

thanks again for you reply

regards
Aleks

This is my functions file:
<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/

function avia_remove_debug() {
remove_action(‘wp_head’,’avia_debugging_info’,1000);
}
add_action( ‘init’, ‘avia_remove_debug’);

This is my Style.CSS
/*

Theme Name: Ospods
Description: Handbuild Pods in Shropshire
Version: 1.0
Author: Paul Seager
Author URI: http://www.paulseager.co.uk
Template: enfold
*/

/*Add your own styles here:*/

I am still seeing loads of references to enfold throughout the code…? and still seeing the debug info?
</style>
<link rel=’stylesheet’ href=’http://www.ospods.co.uk/wp-admin/load-styles.php?c=1&dir=ltr&load=dashicons,admin-bar,wp-admin,buttons,wp-auth-check&ver=4.2.2&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-media-style-css’ href=’http://www.ospods.co.uk/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/css/avia-media.css?ver=4.2.2&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’open-sans-css’ href=’//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.2.2′ type=’text/css’ media=’all’ />
<!–[if lte IE 7]>
<link rel=’stylesheet’ id=’ie-css’ href=’http://www.ospods.co.uk/wp-admin/css/ie.min.css?ver=4.2.2&#8242; type=’text/css’ media=’all’ />
<![endif]–>
<link rel=’stylesheet’ id=’layerslider-global-css’ href=’http://www.ospods.co.uk/wp-content/themes/enfold/config-layerslider/LayerSlider/static/css/global.css?ver=5.3.2&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’thickbox-css’ href=’http://www.ospods.co.uk/wp-includes/js/thickbox/thickbox.css?ver=4.2.2&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia_sidebar-css’ href=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/css/avia_sidebar.css?ver=2.2&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia_admin-css’ href=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/css/avia_admin.css?ver=2.2&#8242; type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia_colorpicker-css’ href=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/css/avia_colorpicker.css?ver=2.2&#8242; type=’text/css’ media=’all’ />
<script type=”text/javascript”>
window._wpemojiSettings = {“baseUrl”:”http:\/\/s.w.org\/images\/core\/emoji\/72×72\/”,”ext”:”.png”,”source”:{“concatemoji”:”http:\/\/www.ospods.co.uk\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.2″}};
!function(a,b,c){function d(a){var c=b.createElement(“canvas”),d=c.getContext&&c.getContext(“2d”);return d&&d.fillText?(d.textBaseline=”top”,d.font=”600 32px Arial”,”flag”===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement(“script”);c.src=a,c.type=”text/javascript”,b.getElementsByTagName(“head”)[0].appendChild(c)}var f,g;c.supports={simple:d(“simple”),flag:d(“flag”)},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener(“DOMContentLoaded”,g,!1),a.addEventListener(“load”,g,!1)):(a.attachEvent(“onload”,g),b.attachEvent(“onreadystatechange”,function(){“complete”===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>

<script type=’text/javascript’>
/* <![CDATA[ */
var avia_framework_globals = avia_framework_globals || {};
avia_framework_globals.frameworkUrl = ‘http://www.ospods.co.uk/wp-content/themes/enfold/framework/&#8217;;
avia_framework_globals.installedAt = ‘http://www.ospods.co.uk/wp-content/themes/enfold/&#8217;;
avia_framework_globals.ajaxurl = ‘http://www.ospods.co.uk/wp-admin/admin-ajax.php&#8217;;
/* ]]> */
</script>

<script type=’text/javascript’>
/* <![CDATA[ */
var userSettings = {“url”:”\/”,”uid”:”1″,”time”:”1431703688″,”secure”:””};/* ]]> */
</script>
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-admin/load-scripts.php?c=1&load%5B%5D=jquery-core,jquery-migrate,utils,plupload&ver=4.2.2′></script&gt;
<!–[if lt IE 8]>
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-includes/js/json2.min.js?ver=2011-02-23′></script&gt;
<![endif]–>
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_media_advanced.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_dynamic_templates.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_mega_menu.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_edit_dynamic_templtes.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_sidebar.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_option_pages.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_media.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_colorpicker.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_media_wp35.js?ver=2.2′></script&gt;
<script type=’text/javascript’ src=’http://www.ospods.co.uk/wp-content/themes/enfold/framework/js/avia_advanced_form_elements.js?ver=2.2′></script&gt;

<script type=’text/javascript’>
/* <![CDATA[ */
var avia_shortcode_preview = ‘ee35f6b907’;
/* ]]> */
</script>

<!–
Debugging Info for Theme support:

Theme: Enfold
Version: 3.1.5
Installed: enfold
AviaFramework Version: 2.2
AviaBuilder Version: 0.8
– – – – – – – – – – –
ChildTheme: Ospods
ChildTheme Version: 1.0
ChildTheme Installed: enfold

ML:256-PU:35-PLA:2
WP:4.2.2
Updates: disabled
–>

Hi Elliott, many thanks for your reply.

regarding the answers:

1. bummer. why not can’t it be done on a sofisticated way?

2. yes but how can i make the balloon icons with images inside it?

3. didn’t helped, still overlays, see attached file.

4. thanks! works like a charm!

5. i followed the guide and it place the flags right below the logo. i want to place it on the “Extra elements” section in the other side of the phone number.

6. sending the link on private, the partner element is in the bottom.

7. sending the link on private. the slider changes his size as well. i want it to be fixed without croping or zooming images.

8. OK.

9. i did created my own page and add the “social icons” but it was showing it on different lines and no all of them aligned one the same line.

10. already tried it but i want to use the hovver effect, and once i remove the hyperlink (even on a blank) it disables the hover effect from the icon.

11. will check it later.

Thanks!

Ben