Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #179961

    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

    #180068

    Hi headbentdesign!

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

    Regards,
    Ismael

    #180385

    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

    #180387

    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.

    #180390

    Hi!

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

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

    Cheers!
    Josue

    #180393

    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

    #180394

    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

    #180515

    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.

    #180516

    Hi!

    Can you post a link to your French site?

    Regards,
    Josue

    #180520

    Sure Josue! Thanks for the amazingly quick response!

    http://goo.gl/TPII2v

    -Pat

    #180573

    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

    #180835

    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.

    #180946

    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.

    #181094

    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

    #181095

    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

    #181096

    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.

    #181273

    What’s next fellas? Any suggestions?

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

    Thank you.

    Patrick

    #181430

    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

    #181454

    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

    #181461

    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

    #181475

    Hey!

    Glad it worked :)

    Regards,
    Peter

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.