-
Posts
-
Hi guys,
1st of all – thanks for this superb template. I’m absolutely new in web-design but your template allows great results for everyone!
One of the issues I have is related to the WPML plugin. I think a lot of customer want to use this plugin and decided to buy ENFOLD as it’s supposed to be WPML ready/friendly. It’s very hard when it comes to WPML customizations to find up-to-date information THAT REALLY WORK. So it would be great to have a summarized up-to-date topic (maintained by kriesi) to monitor the latest WPML customization possibilities.
From my side, I managed to get rid of these flags and to change the displayed country names. But that’s it. I would love to have the WPML switcher on our website like on this site
For this I must be able to
– set the border between the menu items
– increase the space to the WPML switcher
– change the font color for the menu items (optional)
– change the font size for the menu items (optional)Could you teach how to make this possible?
Cheers
RobertI did some changes by my own. still need to know about
– the borders between the WPML langage codes in the main menu
– the padding from the language codes to the new border
– the distance of the 1st langage code to the menu items
– the font color and text-decoration of the active/current language codethat’s my current Quick CSS:
.language_flag img {
display: none !important;
}.av-main-nav > li:first-child .avia-menu-text{ border-left: 0; }
.av-main-nav > li:last-child .avia-menu-text{ border-left: 0; }
.avia-menu-fx{ display: none; }
.av-main-nav > li > a > .avia-menu-text{ border-left: 1px solid #666666; padding-left: 20px; }.header_color .main_menu ul:first-child > li > a { font-size: 14px!important; color: black!important; }
.header_color .main_menu ul:first-child > li > a:hover { color: #1e73be! important; text-decoration: underline; }
.header_color .sub-menu > li:hover > a {
color: #1e73be! important; text-decoration: underline;
}.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #1e73be! important; text-decoration: underline; }
Hi!
Thank you for using Enfold.
Can you please provide a screenshot on how you want the switcher to look like? You can use imgur, dropbox etc. Additionally, for future reference, please avoid bumping the thread because it will only take us longer to respond on your inquiry. Thanks.
Best regards,
IsmaelHi Ismael,
I don’t get you with “bumping”. I was providing additional information since I got things solved by my own so you could sort out some points I was asking for. So I had the intention to save time.
The way I want to look the menu bar incl. switcher is exactly as it is on the mentioned page
http://www.eos.info/Best
RobertHi!
Yes, I know. Since we answer questions from oldest to newest, bumping makes your inquiry appear new and it will probably take us longer to respond on your inquiry. Replies in the forum can take up to 24 hours during the week, but oftentimes we are able to get to questions much quicker than that. We request that our users wait patiently while we work our way through the forum as we can assure you that all questions will be addressed as soon as possible. Anyway, we thank you for providing more info.
How did you add the flags? Looks like it is not using the default theme flag configuration. Please remove the modification then add this on functions.php:
add_action('init', 'avf_add_flags'); function avf_add_flags() { add_action( 'ava_inside_main_menu', 'avia_wpml_language_switch', 10); }Use this on Quick CSS:
.language_flag img { display: none !important; } .language_code { display: block !important; text-transform: uppercase; } #header_meta ul.avia_wpml_language_switch.avia_wpml_language_switch_extra { display: none; } .avia-menu.av-main-nav-wrap { margin-right: 100px; } #top ul.avia_wpml_language_switch li { margin: 0; padding: 0 5px; border: none; border-left: 1px solid; height: 14px; } #top ul.avia_wpml_language_switch li:first-child { border-left: none; } ul.avia_wpml_language_switch.avia_wpml_language_switch_extra { position: absolute; top: 38px; } #top ul.avia_wpml_language_switch li a { position: relative; top: -12px; } li.language_en.avia_current_lang span.language_code { text-decoration: underline; color: red; }Best regards,
IsmaelHi Ismael,
I replaced the code, but doesn’t look better.
What you mean by “How did you add the flags?”. There shouldn’t have been any. I deactivated
the flags in the WPML menu and used the same code as you:.language_flag img {
display: none !important;
}Did you mean the code? It’s easy to edit the translation for the language in the WPML menu.
Anyway, I set it back to default.Best
RobertHi!
The code above works fine on our installation. Please post the login details here. We would like to check it.
Regards,
IsmaelHey!
You added the code with an extra closing curly brace. Please remove that. If possible, give us admin rights to edit the functions.php file.
add_action('init', 'avf_add_flags'); function avf_add_flags() { add_action( 'ava_inside_main_menu', 'avia_wpml_language_switch', 10); }}Replace it with:
add_action('init', 'avf_add_flags'); function avf_add_flags() { add_action( 'ava_inside_main_menu', 'avia_wpml_language_switch', 10); }Cheers!
IsmaelHi Ismael,
I can’t see the extra closing curly brace! There is only one I see in my notepad editor.
I was also able to do changes on the functions.php with the user I gave you already. The user should have admin rights already.
Am I doing something wrong?Best
RobertHey!
I still can’t edit the functions.php. Please add this:
CODE REMOVEDIt is not working because you didn’t enable the Header Secondary Menu. This code should override that.
Best regards,
IsmaelHi Ismael,
I did the change. No positive impact. I did the change with FileZilla on the FTP with the user I gave you. Are you able to connect?
Best
RobertHi!
Please check the site now. All you need to do is to change the color values, adjust position on the Quick CSS field then apply it on the English version of the site.
Cheers!
IsmaelHi,
thanks so far! Combining your changes with the settings I had, it’s pretty much how I want it.
But…the language code is not shown on the mobile menu (e.g. iphone).
Is there a way to influence the speed of the language code offset when scrolling down
so it behaves the same as the rest of the menu items?(is there a reason why you removed the latest code dealing with the issue of an inactive secondary menu?)
Best
RobertHey Robert!
Check it now, i modified the js/avia.js file in order to include the WPML menu in the mobile menu + make the language desktop menu items to scroll at the same speed of the main menu. I’d suggest making a backup of this file or use a child theme so it survives updates, here’s the mods:
Line 330, to include language switcher menu inside mobile menu:
mobile_advanced = menu.clone().attr({id:"mobile-advanced", "class":""}).append($('.avia_wpml_language_switch').children().clone()),Line 1436, to make scroll animation affect language switcher menu:
elements = $('#header_main .container:first, #header_main .main_menu ul:first-child > li > a:not(.avia_mega_div a, #header_main_alternate a), .avia_wpml_language_switch span.language_code'),Cheers!
JosueHi Josue,
thank you so much. The scroll speed works fine now.
1. the switcher top position is now different than the main menu (offset). Seems like you eliminated the quick-css “top” settings.
How to dynamically (all browsers, resolutions and devices) orientate it the same way as the main menu?2. the switcher font size seems to be smaller than the main menu, isn’t it? How/Where to correct it?
3. in my iphone6 menu I see the language now three times. 1. native language, 2. translated language, 3. language code
How to limit it to code only?Cheers
RobertHi!
I’m not sure what Josue edited on avia.js so I’ll ask him to take a look. I think it’s working when I left it, might need additional css changes to show the language code on mobile.
Best regards,
IsmaelHey!
1, 2. I couldn’t really note it, use this code in Quick CSS to adjust that:
.avia_wpml_language_switch li span { position: relative; top: 2px; font-size: 12px; }3. Add this:
#mobile-advanced .language_native, #mobile-advanced .language_translated { display: none !important }Cheers!
JosuePerfect now! Thanks a lot! Also for providing the avia.js changes, cause this would have been my last question now ;)
Best regards
Robert
- The topic ‘WPML Customization’ is closed to new replies.