Community Forums › Forums › Internationalization and Translations › Altitude Pro Navigation with WPML Flag Language Selector
Tagged: Altitude Pro, flag, multi-language, Translate, widget, wpml
- This topic has 14 replies, 3 voices, and was last updated 6 years, 9 months ago by
Erik D. Slater.
-
AuthorPosts
-
June 6, 2015 at 12:37 am #155056
Vasilis
MemberHey awesome people,
I'm trying to add a flag language selector function from WPML on my Altitude Pro theme.
Did some research and came up to this function which seems to work ok, but needs a small detail to be perfect.
The website is => http://cleancar.me
The function I've been using to show the flag language selector near the navigation bar is below:
//* Flags Language Selector WPML
add_filter( 'genesis_nav_items' , 'flags_selector' , 10 , 2 );
add_filter( 'wp_nav_menu_items' , 'flags_selector' , 10 , 2 );
function flags_selector($menu, $args){
$args = (array)$args;
$flags = '';
if ( $args['theme_location'] != 'primary' )
return $menu;
$lang = icl_get_languages('skip_missing=0&orderby=code');
if( !empty($lang) ) {
$flags .= '<div id="flags-selector">';
foreach( $lang as $l ) {
$flags .= '<div class="flag-item">';
if( !$l['active'] )
$flags .= '';
$flags .= '<img src="'. $l['country_flag_url']
. '" height="12" alt="' . $l['language_code']
. '" width="18" title="' . $l['translated_name']
. '" />';
if ( !$l['active'] )
$flags .= '';
$flags .= '</div>';
}
$flags .= '</div>';
}
return $menu . $flags;
}And here is the CSS I'm using for this:
/* Flag Language Selector
------------------------------------------------------------ */#flags-selector {
float: right;
padding-top: 5px;
}.flag-item {
display: inline;
padding: 4px;
}I would like to place the flags next to each other and all of them after the last button of the navigation bar
WPML documentation suggests this:
function language_selector_flags(){
$languages = icl_get_languages('skip_missing=0&orderby=code');
if(!empty($languages)){
foreach($languages as $l){
if(!$l['active']) echo '';
echo '';
if(!$l['active']) echo '';
}
}
}which does not work....
Any ideas on this would be highly appreciated!
Kind Regards
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 12:49 am #155057Erik D. Slater
MemberIt's the CSS for .genesis-nav-menu a that's screwing you up a bit here.
Keep #flags-selector as you currently have it.
Replace .flag-item with the following:
.flag-item { float: left; } .flag-item a { padding-top: 4px; }
Then tweak as required 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 12:56 am #155058Vasilis
MemberAWESOME!
Thank you Erik!!!
That did the trick.
Do you know how I can fix the scrolling black navigation bar after this?
Try scrolling down and see how the flags change position again...
Kindly appreciated!
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 1:12 am #155060Erik D. Slater
MemberHAH!! Didn't spot that one 🙂
In the code I proposed for .flag-item a, change
padding-top: 4px;
topadding-top: 4px !important;
Sorry about that 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 1:26 am #155062Vasilis
MemberOk that fixed the second flag,
Still both of them scroll down as a whole,
Should I add the same code to the first part of the CSS , #flags-selector...etc
THANK YOU!!!
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 1:38 am #155068Erik D. Slater
MemberRiiiiiiiight 🙂
Give this a whirl:
.site-header.dark #flags-selector { padding-top: 17px; }
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 1:42 am #155069Erik D. Slater
MemberAlso, lines 164 to 168 in style.css (the transition definitions) ... add #flags-selector to that list, i.e.
a,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.site-header.dark,
#flags-selector {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 2:50 am #155076Vasilis
MemberKINDLY APPRECIATED!!!
Added all of the new CSS lines.
Unfortunately no result...
Any ideas?
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 3:17 am #155081Erik D. Slater
MemberFor #flags-selector,
padding-top: 27px !important;
needs to bepadding-top: 27px;
. The !important bit here is preventing the magic from happening 🙂
Erik D. Slater: Digital Platform Consultant • LinkedInJune 6, 2015 at 3:22 am #155082Vasilis
MemberAwesome DONE!
I can't express how much I thank you 🙂
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 6, 2015 at 3:30 am #155086Erik D. Slater
MemberThanks man 🙂
Of course ... there is still your Simple Social Icons issue to sort out ...
Erik D. Slater: Digital Platform Consultant • LinkedInAugust 17, 2016 at 3:41 am #191427Kitty
ParticipantI am trying to find out if Altitude Pro is compatible with WPML. Can you confirm that?
August 17, 2016 at 4:01 am #191430Erik D. Slater
Memberellafitz: By "WPML", are you referring to the https://wpml.org/ plugin?
Also, this may help: https://wpml.org/forums/topic/using-the-studiopress-genesis-altitude-pro-child-theme/.
Generally speaking, there shouldn't be an issue with multilingual support for the Genesis child themes.
Was there something specific that you were looking at or found, and which you think might be an issue?
Erik D. Slater: Digital Platform Consultant • LinkedInAugust 18, 2016 at 5:24 am #191518Kitty
ParticipantHi Erik,
Yes I mean WPML.org
And I do have an issue: on activating WPML plugin my blogposts and pages do not show up in de admin.
Only content from widgets are shown.If I deactivate WPML Multilingual CMS they appear again in admin and in frontend.
Could you please assist?
Or should I perhaps enter a new ticket?
Regards,
KittyAugust 18, 2016 at 5:57 am #191519Erik D. Slater
MemberOr should I perhaps enter a new ticket?
Yessy ... since this will allow others to contribute to the discussion 🙂
Erik D. Slater: Digital Platform Consultant • LinkedIn -
AuthorPosts
- You must be logged in to reply to this topic.