CSS styles for right to left( Arabic) sites

[elmalak]

Congratulations on the release of the new Events Calendar 3.0
I am using mine on an Arabic site and to get it to look nice I had to change some css styles to be suitable for Arabic( right to left sites).
Hope they prove useful for other users.
Mamdouh

/* Events Calendar Styles in Arabic*/

.tribe-events-event-meta .tribe-events-meta-group, .tribe-events-event-meta .column, .tribe-bar-submit, .tribe-bar-search-filter, .tribe-bar-date-filter, #tribe-events-header .tribe-events-sub-nav li, #tribe-events-footer .tribe-events-sub-nav .tribe-events-nav-previous {
float: right; text-align: right;
}
#tribe-events-header .tribe-events-sub-nav .tribe-events-nav-next, #tribe-events-footer .tribe-events-sub-nav .tribe-events-nav-next {
float: left;
margin-right: 5px;
text-align: left;
}

.datepicker td span{
float: right;
}

For these styles to work, you have you set up a stylesheet override by creating a file called tribe-events.css and placing it in YOUR_THEME/tribe-events/ (see our themer’s guide for complete details)?
Thanks to @barry for this tip!

[Jonah]

Thanks for sharing this Mamdouh! I’m sure it will help others.

[elmalak]

You’re welcome Jonah!
I know a lot of users suffer with this point and wanted to make it easier for them to use the plugin in Arabic sites.

Keep up the good work.
Mamdouh

[Leah]

Thank you Mamdouh!

[elmalak]

Hi,
A quick update;
after updating to v. 3.0.2 my Arabic styles are all getting overwritten by the plugin’ own styles and everything is back to the left to right alignment again.

Do I need to manually edit the plugin’s own css file for this to work or what?
I usually add my style to the theme’s css file.

Thanks,
Mamdouh

[Jonah]

Hi Mamdouh,

Adding the styles to your theme’s CSS should be fine as long as they’re specific enough. You’ll need to look at how things are being overwritten to know how or what you need to make more specific. For more info: http://css-tricks.com/specifics-on-css-specificity/

I hope that helps but let me know if you have any other questions.

– Jonah

[elmalak]

Hi Jonah,
I understand what you’re saying, but the point is those rule worked just fine in version 3.0 however, after updating to 3.0.1 or 3.0.2 they are no more working, so did anything change in these versions in how the css is getting called?

I am using the exact same rules but the ones with the plugin take precedence over mine right now which wasn’t the case at first, so am I missing something?

[Jonah]

Hi Mamdouh,

Had you added the CSS to your themes style.css file or somewhere else?

– Jonah

[elmalak]

Yes, that’s it, at the end of my theme’s style.css file.

[Jonah]

Hi Mamdouh,

Do you have some specific examples you can point us to so I can see where and why the CSS is not being applied?

Thanks,
Jonah

[elmalak]

If you look at this page for June 2013,
http://www.eps-assiut.com/events/2013-06/

.tribe-bar-date-filter is shown as float: left; whereas I’ve used a float: right; in the style.css file and same thing applies for all the css rules I’ve shared at the top of this post.

All my styles above are there but overwritten by the plugin’s own styles.

[Barry]

Hi Mamdouh,

Sadly Jonah has departed for pastures new – but I’ll be happy to try and help if I can in his stead.

Have you set up a stylesheet override by creating a file called tribe-events.css and placing it in YOUR_THEME/tribe-events/ (see our themer’s guide for complete details)?

I didn’t see that in place when I visited your site – but it might offer a better way to enforce your own rules.

[elmalak]

Hi Barry,
Thank you for pointing out this method, I wasn’t aware of it.
I just tired it and now my styles are working properly.

Many thanks,
Mamdouh

[Barry]

Excellent, in that case I’ll close this thread – if there is anything else please don’t hesitate to create new threads and one of the team will be happy to help 🙂

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts