-
AuthorPosts
-
April 17, 2017 at 7:54 am #778575
Hi,
Our website has two languages: English and Farsi (RTL language); we are using WPML for that.
Now, in Farsi version, our widgets are not aligned in RTL, please let me know how.
Thanks,
SadeghApril 17, 2017 at 10:15 am #778593Hey Sadegh,
Try to add this css in Quick CSS (located in Enfold > General Styling):
#top.rtl #main .sidebar_left .sidebar { padding-top: 45px; }
Just adjust the top padding as you see fit. Hope this helps :)
Best regards,
NikkoApril 17, 2017 at 11:56 am #778637Hi
I used the code and it doesn’t work for meApril 17, 2017 at 7:35 pm #778886Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.rtl .news-excerpt { padding-right: 50px; }
Best regards,
YigitApril 18, 2017 at 7:41 am #779111Dear Yigit,
Thanks but it didn’t help.
April 18, 2017 at 9:13 am #779133Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
NikkoApril 18, 2017 at 9:40 am #779146Hi Nikko,
Please find the login credentials in private box.April 18, 2017 at 2:32 pm #779317Hi,
They show up fine on my end, attached a screenshot in private content field.
Please flush browser cache and refresh your page a few times – http://wiki.scratch.mit.edu/wiki/Hard_Refresh
Best regards,
YigitApril 19, 2017 at 7:33 am #779824Dear Yigit,
Thanks but I wanted them to be “aligned right” (they are now aligned left)Thanks,
SadeghApril 19, 2017 at 1:44 pm #779957Hi,
Oh, sorry. Please add following code to Quick CSS as well :)
.rtl .news-headline, .rtl .news-excerpt { text-align: right; }
Best regards,
YigitApril 23, 2017 at 6:37 am #781893Hi dear Yigit,
Thanks a lot for the code, it’s solved the issue.
/
However, a question is still exist for me. We are using WPML plugin so our website has two languages. Then at the back-end, we can choose “Enfold Child Option” for any of our two languages, Farsi or English.
Each one of these languages, has its custom codes in General Styling tab. The question is, is there any way we could combine all these codes together in style.css child but still avoid the conflicts between two languages?Regards,
Sadegh- This reply was modified 7 years, 6 months ago by Sadegh.
April 23, 2017 at 9:07 am #781904Hi,
You can set a exclusive body class for each language adding the follow custom code at your functions.php
// Add specific CSS class by filter add_filter('body_class','my_class_names'); function my_class_names($classes) { // add 'class-name' to the $classes array if(ICL_LANGUAGE_CODE == 'en'){ $classes[] = 'class-name'; }elseif(ICL_LANGUAGE_CODE == 'fr'){ $classes[] = 'class-name'; } // return the $classes array return $classes; }
Just change the ‘en’ and the ‘fr’ by your languages and the ‘class-name’.
Best regards,
John TorvikMay 2, 2017 at 9:40 am #786245Hi John,
Thanks for the details. So I have to add these codes to my child theme function.php, right?
> But after that, how can I assign class-name to each languages in style.css?May 2, 2017 at 2:20 pm #786361Hi,
Yes, you should add the code to functions.php file of your child theme in Appearance > Editor
Let us say you named your classes as “class-name-en” and “class-name-fr”, then you can target each languages as following
.class-name-en .main_menu { display: none; } .class-name-fr .main_menu { display: none; }
If you have two languages and only one is RTL, then you can use following as well
.rtl .main_menu { display: none; }
Best regards,
YigitMay 3, 2017 at 3:31 pm #787191Thanks a lot dear Yigit for the detail.
Yes, we have an English version and Farsi (RTL language) version.For instance, right now we have these codes under our general tab:
body { font-family: "IRANSans" !important; } fieldset label { font-family: "IRANSans" !important;} input[type="submit"], h1, h4, h5, h3, h2 { font-family: "IRANSans" !important;} input[type='text'], input[type='email'], textarea{ font-family: 'IRANSans' !important;} #top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'!important;} @media only screen and (max-width: 767px){ #header_meta .sub_menu { min-width: 560px; background: rgba(0, 0, 0, 0); padding-left: 0; padding-top: 0px; right: 30%; position: relative !important; top: 15px; } }
So, should I add them into the style.css with the below changes:
.rtl body { font-family: "IRANSans" !important; } .rtl fieldset label { font-family: "IRANSans" !important;} .rtl input[type="submit"], h1, h4, h5, h3, h2 { font-family: "IRANSans" !important;} .rtl input[type='text'], .rtl input[type='email'], .rtl textarea{ font-family: 'IRANSans' !important;} .rtl #top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'!important;} .rtl @media only screen and (max-width: 767px){ #header_meta .sub_menu { min-width: 560px; background: rgba(0, 0, 0, 0); padding-left: 0; padding-top: 0px; right: 30%; position: relative !important; top: 15px; } }
- This reply was modified 7 years, 6 months ago by Sadegh.
May 3, 2017 at 3:40 pm #787204Hi,
Your code should be as following
.rtl body { font-family: "IRANSans" !important; } .rtl fieldset label { font-family: "IRANSans" !important;} .rtl input[type="submit"], h1, h4, h5, h3, h2 { font-family: "IRANSans" !important;} .rtl input[type='text'], .rtl input[type='email'], .rtl textarea{ font-family: 'IRANSans' !important;} .rtl #top .avia-font-entypo-fontello, .rtl body .avia-font-entypo-fontello, html.rtl body [data-av_iconfont='entypo-fontello']:before { font-family: 'entypo-fontello'!important;} @media only screen and (max-width: 767px){ .rtl #header_meta .sub_menu { min-width: 560px; background: rgba(0, 0, 0, 0); padding-left: 0; padding-top: 0px; right: 30%; position: relative !important; top: 15px; } }
Best regards,
Yigit- This reply was modified 7 years, 6 months ago by Yigit.
May 7, 2017 at 2:43 pm #789089Hi dear Yigit,
Thanks, I’ve done that but our custom font-face font didn’t show up after that in our RTL page
Is there anything I didn’t take care of ?May 7, 2017 at 9:49 pm #789209Hi,
How are you loading the “IRANSans” font?
Best regards,
BasilisMay 8, 2017 at 6:52 am #789332Hi Basilis,
We are using font-face command as below:@font-face { font-family: 'IRANSans'; src: url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.eot'); src: url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.eot?#iefix') format('embedded-opentype'), url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.woff2') format('woff2'), url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.woff') format('woff'), url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.ttf') format('truetype'), url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.svg#IRANSans') format('svg'); }
May 8, 2017 at 12:09 pm #789466Hi Sadegh!
I checked your website and it seems like you added @font-face in Style.css file of your child theme and it does work fine on RTL pages. Attached a screenshot in private content field. Have you figured it out already?
Best regards,
YigitMay 8, 2017 at 12:28 pm #789489Hi dear Yigit,
> Actually I have changed all the codes back to prevent the RTL pages from that issue.
I had added your given codes (From This Post), but after that, our RTL pages couldn’t load the custom font.May 8, 2017 at 1:32 pm #789554Hi,
@font-face is not added on those codes. Therefore, it is normal. You can simply keep the @font-face in your custom CSS code and apply them only on certain RTL elements using the codes i posted above :)
Best regards,
YigitMay 9, 2017 at 2:36 pm #790291Hi Yigit,
So you mean I should use the font-face code as below?@font-face { .rtl font-family: 'IRANSans'; src: url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.eot'); src: url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.eot?#iefix') format('embedded-opentype'), url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.woff2') format('woff2'), url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.woff') format('woff'), url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.ttf') format('truetype'), url('http://maga.co.ir/wp-content/themes/enfold-child/fonts/IRANSansweb.svg#IRANSans') format('svg'); }
I think it relates to these below codes:
.rtl body { font-family: "IRANSans" !important; } .rtl fieldset label { font-family: "IRANSans" !important;} .rtl input[type="submit"], h1, h4, h5, h3, h2 { font-family: "IRANSans" !important;}
I have put them on the style.css but the problem was still exist.
- This reply was modified 7 years, 6 months ago by Sadegh.
May 9, 2017 at 8:00 pm #790544Hi,
Can you uplaod the font please to the main root, example:
and try to link it from there after please?
Thank you
Best regards,
BasilisMay 10, 2017 at 6:55 am #790868Hey Basilis,
Isn’t there any other way rather than uploading font to the main root?May 11, 2017 at 4:51 pm #791730Hi,
I want to test if that is an issue with the ay u are embeding forms, if you can try it we can start locating the issue slowly./
Best regards,
BasilisAugust 23, 2017 at 7:28 am #842889Hi,
Thanks, the issue is already solved.(you may now close the thread please)
Thanks
SadeghAugust 23, 2017 at 9:27 am #842936Hi,
Glad that it’s fixed. Thanks for using Enfold :)
Best regards,
Nikko -
AuthorPosts
- The topic ‘Widgets are not RTL’ is closed to new replies.