Tagged: ,

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • October 23, 2013 at 9:51 pm #179961
    headbentdesign

    Hey guys,

    I would like to adjust the size, margins, etc for the main menu while in the French translation. Is there a place where I can add custom css code for only the French elements? Trying to wrap my brain around this. Pretty much everything broke (menu, titles, etc) when I translate. I can easily fix this, but I’m just not sure where and how. Am I making sense? Not sure how I would create different media queries for only the French translation elements.

    Thanks for any help guy.

    Sincerely,

    Patrick

    October 24, 2013 at 4:42 am #180068
    Ismael

    Hi headbentdesign!

    You can switch to the French language on the dashboard then place the css on Enfold > Styling > Quick CSS.

    Regards,
    Ismael

    October 24, 2013 at 9:21 pm #180385
    headbentdesign

    Oh really?! It will work like that!? Sweet! If this works we need to make this resolution available for others because I spent nearly the entire day yesterday trying to figure this out. I will be back to confirm that it worked for me.

    Thank you Ismael

    October 24, 2013 at 9:35 pm #180387
    headbentdesign

    Ismael, this does not work. Tried it 3 times. Refreshed browser, etc.

    Can you explain in more detail? Maybe I’m missing something.

    Thank you.

    October 24, 2013 at 9:37 pm #180390
    Josue

    Hi!

    You can target the HTML document when in french, with something like this:

    html[lang='fr']{ .. }

    Cheers!
    Josue

    October 24, 2013 at 9:41 pm #180393
    headbentdesign

    Hi Josue,

    I’m not a developer and I have no idea where to add that code. Sorry man, but what’s easy for you may not be so easy for me. If we were using Photoshop, then I’m sure we’d have a great time, but please, . . . can you be more specific. I’m literally a month past deadline with this person. I will hire someone to translate from now on. Complex.

    Cheers,
    Pat

    October 24, 2013 at 9:45 pm #180394
    Josue

    Hey Pat!

    I meant that you can add that prefix to any CSS rule and that will only be applied to the french version of the site.

    Example:

    html[lang='fr'] p{
font-size: 14px;
}
html[lang='fr'] h2{
color:red;
}

    Regards,
    Josue

    October 25, 2013 at 7:03 am #180515
    headbentdesign

    Josue,

    I finally ahd a chance to get to this, and it unfortunately doesn’t work.

    I tried adding the html[lang=’fr’] string to numerous css rules and nothing would happen. I have searched deeply all over the web, as well as the Kreisi and WPML forumes, but nothing.

    It’s mainly the main navigation. It (broke) after translating it. Because the French translation made the menu items longer, it cause the menu to break. So, I’m trying to customize the (fr) version of the menu.

    Man, I’m stuck here.

    October 25, 2013 at 7:09 am #180516
    Josue

    Hi!

    Can you post a link to your French site?

    Regards,
    Josue

    October 25, 2013 at 7:19 am #180520
    headbentdesign

    Sure Josue! Thanks for the amazingly quick response!

    http://goo.gl/TPII2v

    -Pat

    October 25, 2013 at 10:59 am #180573
    Dude

    Hi!

    You can try following code instead

    
html[lang="fr-FR"] p{
font-size: 14px;
}

    If it still doesn’t work you can use the code from here: http://wpml.org/forums/topic/body-class-based-on-language/#post-18785 (insert it into the functions.php theme file) to add the language shortcode to the body classes. Afterwards you shoud be able to style your website with

    
body.fr_FR p{
font-size: 14px;
}

    Regards,
    Peter

    October 25, 2013 at 10:29 pm #180835
    headbentdesign

    Hello Dude! Thanks for your help. The first code example didn’t work.

    For the second one :

    
body.fr_FR p{
font-size: 14px;
}

    . . . where in the functions.php folder should I place this? :

    <?php
add_filter('body_class', 'append_language_class');
function append_language_class($classes){
  $classes[] = ICL_LANGUAGE_CODE;  //or however you want to name your class based on the language code
  return $classes;
}
?>

    Thank you.

    October 26, 2013 at 7:03 am #180946
    headbentdesign

    Dude, I could not get the second option to work either.

    From the research I read up on, I’m not supposed to nest <?php takes inside <?php tags correct?

    So I simply added the code snipped (without) the opening and closing .php tags like this :

    
add_filter('body_class', 'append_language_class');
function append_language_class($classes){
  $classes[] = ICL_LANGUAGE_CODE;  //or however you want to name your class based on the language code
  return $classes;
}

    Is this ok? I didn’t happen to see any closing ?> tags anywhere in the functions.php file.

    I’m really trying here Dude. I’m not as advanced as a developer as you. Thanks for your patience.

    October 26, 2013 at 8:57 pm #181094
    Josue

    Hi!

    Yes, that would be ok, did it work?

    When a file is filled with pure PHP (like functions.php), there is no need for a closing tag.

    Regards,
    Josue

    October 26, 2013 at 9:15 pm #181095
    headbentdesign

    Unfortunately Josue, it did not work.

    I greatly appreciate you guys taking the time to help me with this. I know it’s a bit outside common support scope. I will be outsourcing things like this from now on until I get better at it because it’s pushing the project way past deadline.

    Where do we go from here brother?

    Sincerely,
    Pat

    October 26, 2013 at 9:18 pm #181096
    headbentdesign

    Just to be clear, I tried numerous css styling options and none of them would apply. I tried refreshing browser, etc. I tried using the !important declaration as well. no luck.

    October 27, 2013 at 10:13 pm #181273
    headbentdesign

    What’s next fellas? Any suggestions?

    I can’t style the French translations. All whacky looking.

    Thank you.

    Patrick

    October 28, 2013 at 7:16 am #181430
    Ismael

    Hey!

    Can you please post the login details here? Set it as a private reply. Have you tried the following suggestions on custom.css file?

    Best regards,
    Ismael

    October 28, 2013 at 8:29 am #181454
    headbentdesign

    Hello Ismael,

    No I haven’t tried the custom.css file. Just the Quick CSS window.

    Let me try a couple of the suggestions using the custom.css file.

    I will get right back to you if it doesn’t work.

    Cheers,
    Pat

    October 28, 2013 at 8:55 am #181461
    headbentdesign

    Ismael, Ismael, Ismael, Ismael!!! That worked!

    Adding the custom code to the custom.css file directly on my server did the trick!

    The code that DUDE gave me was what worked :

    
html[lang="fr-FR"] p{
font-size: 14px;
}

    Thank you Josue, Dude, and Ismael for all your help!!

    Love you guys.

    -Pat

    October 28, 2013 at 9:24 am #181475
    Dude

    Hey!

    Glad it worked :)

    Regards,
    Peter

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Media queries and custom CSS for French translations (WPML)’ is closed to new replies.