RTL This

How to Change DISQUS’s Threaded Comments to RTL

nightS — Sat, 12 Nov 2011 11:20:04 +0000

Asad. shows you how.

Quick Tip: RTLing the CSS3 "box-shadow" property

nightS — Wed, 21 Sep 2011 19:49:29 +0000

Here's a quick tip when RTLing one of the new and cool CSS3 properties: box-shadow.

What

The syntax of the box-shadow is as follows:

box-shadow: none | <shadow> [ , <shadow> ]*
= inset? && [ <length>{2,4} && <color>? ]

Example:

box-shadow: -5px -5px 5px 5px #888;

LTR

The first and second values define the horizontal and vertical offset of the shadow respectively, the other 2 values are for the blur and spread distances of the shadow and the last one is obviously for the color of the shadow.

How

When RTLing, what you need to focus on is the first value: the horizontal offset of the shadow. Multiply that by a -1 and you'll get the RTLed shadow.

So after RTLing, the previous example will be:

box-shadow: 5px -5px 5px 5px #888;

RTL

It's that simple!

Why?

The reason of that is because, according to the specification:

An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only: it is clipped inside the border-box of the element.

So a positive horizontal offset value will offset the shadow to the left and a negative value will offset it to the right.

Happy RTLing =)

RTLing WP Theme: Keko

nightS — Fri, 01 Jul 2011 19:18:05 +0000

We RTLed a new nice Wordpress theme: Keko =)

It has very nice colors, structure and name too =)
RTLing this one was simple: Created a rtl.css with the RTLed styles from style.css and flipped 3 images which can be found at images/rtl.
Download it through the link below and enjoy =)
...and share any RTL bugs if you find any

This work by "Micheal Kelsinger" is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

Theme Files:

keko.zip

RTLing WP-Theme: WP-Creativix:

nightS — Tue, 07 Jun 2011 08:13:58 +0000

It's clearly obvious(from the 1+ year old poll) that CMS templates are the most wanted here. So today I managed to RTL a WordPress theme: WP-Creativix..

This nice and simple theme has this nice feature of changing the theme color and has a cool featured posts slider in the homepage. Plus there are two page templates for a Blog or a Portfolio Layout. All in this one free WP theme.

To RTL this theme I applied the following:

Generate the rtl.css out of the exisitng stylesheets

Don't get fooled by the small style.css , the real styles are in the style.php file(pretty smart to enable the color changing option). Also there's the images/rtl folder to include the flipped images used in the CSS

RTL the slider JS

The scripts/slider.js has been updated to support RTL and also index.php and header.php to support these changes.

Other updates

I updated some HTML related stuff in header.php and header-portfolio.php (replaced the href="/" with href="<?php echo get_settings('home'); ?>". I also added a class to the listing in tpl_portfolio.php for an evenly distributed list (3 in a row)

Disable typeface for Arabic text

I have commented out the <script> tags for the typeface library(it renders text via JavaScript instead of images) since it didn't work for Arabic characters. The <script> tags are in the header.php and header-portfolio.php files :

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/typeface-0.14.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/juni_regular.typeface.js"></script>

Now they're commented:

<!--<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/typeface-0.14.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/juni_regular.typeface.js"></script>-->

Download it now =)

Well, nevermind the above. Just download the theme below.

Any bugs or comments you need to share, make sure you mention them in the comments

Thanks BM for the request

Theme Files:

creativix.zip

Ther RTLer

nightS — Thu, 31 Mar 2011 07:20:18 +0000

Remember the WordPress plugin:The RTLer? Well its author l0uy re-released yesterday the tool as a standalone web service so you can RTL any CSS you need.
But remember, it gives you an overridden RTLed CSS you include in addition to the LTR version, like below:

<!-- Your LTR CSS here -->
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<!-- The generated RTLed CSS here -->
<link rel="stylesheet" type="text/css" href="rtl.css" media="all" />

Check it out: l0uy.rtler()

How to RTL your Tumblr Theme

nightS — Tue, 18 Jan 2011 12:57:05 +0000

Tumblr is a pretty interesting mini-blogging platform that's getting really popular recently. But with RTL, it's horrible! In the text editor, you cannot even right align your text and it strips off any inline styles if you try to add it yourself (I know!! totally unacceptable). In this tutorial I'll show you how to RTL your Tumblr theme completely or have it bidirectional.

RTLing any Tumblr theme

Despite the poor and sad RTL support the Tumblr editor has, we have full access to the theme HTML/CSS template. So in order to RTL any Tumblr theme, all we need to do, is finding that template HTML/CSS and flip its CSS. Here's how:

Go to your Tumblr Blog dashboard and click Customize Appearance in the toolbox on the right
In the customization toolbar at the left of the page, click Edit HTML. This toolbar will now turn into some HTML code, this is what we want. Take it and save it somewhere as a backup(in case you delete something in an accident)
You'll find the CSS of the theme inside the head tag. Just go through it by flipping the directional rules(Refer to this tutorial for detailed steps)
Once you're done, click the Update Preview button, recopy the code and save it locally on your computer(because if you disable the custom HTML you'll lose these changes) and then Save & Close (on the top right of the toolbar)

Unfortunately I couldn't find any ready RTL Tumblr themes online(please do send me any links if you find any) so I guess it's our only way to get RTL Tumblr themes.

Adding RTL support to a Tumblr theme

Now this might be a more popular type of Tumblr blogs in the area. I personally post in both Arabic and English in my Tumblr blog so I need it to be bidirectional to some extent where I can -at least- control the text direction of the Arabic/English text selectively. Follow the below steps to add RTL support:

As we did in the first 3 steps in the previous section above, "Customize Appearance" of your Tumblr theme and then enable the Edit HTML option.
Search in the HTML between {block:Posts} and {/block:Posts} for div(s) with the class "post":
```
<div class="post">
```
..and add the class {TagsAsClasses} with the braces as below:
```
<div class="post {TagsAsClasses}">
```
What this does is adding CSS classes to the post blocks dynamically according to the tags you add to your post (see where we're going with this?)
Now choose a special class for your RTL content, I chose "arabic" to tag my arabic posts for example.
We'll need to add a custom class named .arabic and add our RTL rules to it. While we're still in the customization page, switch to the Advanced section in the toolbar(the last one at the bottom) and add the below in the "Add Custom CSS" block
```
.arabic  /*or whatever class you wish to use*/
{
direction:rtl;
text-align:right;
font-size:1.1em;/*arabic fonts tend to render smaller*/
}
```
Now you're all ready to use your little RTL system we created. Create a new post, and just tag it with "arabic" or whatever class you choose. And Voila!

So to wrap it up, we used the {TagsAsClasses} dynamic tag Tumblr offers to differentiate posts from one another even if they're of the same type. And by using also the custom CSS we can add, we created an instant RTLing process which gave us a somehow bidirectional Tumblr blog.
I also found an Arabic RTLed Tumblr post talking about this second solution; check it out.

RTLing OpenCart Default Theme

nightS — Tue, 02 Nov 2010 12:22:11 +0000

OpenCart is a powerful open source shopping cart system. It has many features that enables you to setup your e-commerce business easily. Although the system is multilingual and templatable, its default theme doesn't support RTL. Here's how to add it..

1. Set your language to an RTL one

We'll go for Arabic. Go to your Admin Dashboard, go to the Languages page through the System > Localization > Languages, then click Insert to add your new Language. Below is how I added the Arabic language
Go to your language folder in <opencart_root>/catalog/language. It should include at least the english folder; copy that folder to another one named arabic, and rename the english.php file in the new folder to arabic.php (as we specified the Directory and Filename in the previous step)
Open the newly renamed arabic.php file to find a list of localized variables. In our RTLing process, we only care about the direction which can be found at line #4 as:
```
$_['direction'] = 'ltr'
```
change the value to be:
```
$_['direction'] = 'rtl'
```
and also update the
```
$_['code'] = 'en'
```
to be
```
$_['code'] = 'ar'
```
Now go to your Front End to make sure it's working, you'll see the language selection now includes both languages and the Arabic version now only flips the text direction. That is because the template added the dir='rtl' in the html based on the $_['direction'] = 'rtl' in our language installation.

2. RTL the theme

Now that we prepared our multilingual OpenCart system. It's time to make it multidirectional.

Open the default theme directory. It's at <opencart_root>/catalog/view/theme/default/
In the stylesheet folder, you'll find 2 CSS files: stylesheet.css and ie6.css. Copy these to rtl.stylesheet.css and rtl.ie6.css respectively and RTL the directional rules while ommiting the non directional ones ( e.g display:inline; ). (use the third method explained in the tutorial on how to RTL your CSS).

3. Enable the RTLed theme

Once you're done, all what we have to do is including these RTLed CSS in the template when an RTL language is being used. This is usually done in the ,<head> section. So..

Open the header.tpl file that can be found at <opencart_root>/catalog/view/theme/default/template/common/

You'll find that the stylesheet.css is being added at line #19. Add your RTLed file after it if the direction is rtl like this:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/stylesheet.css" />
<?php if($direction=='rtl'){?>
   <link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/rtl.stylesheet.css" />
<?php }?>

Apply the same method to the ie6.css link at line #21 like this:

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
<?php if($direction=='rtl'){?>
   <link rel="stylesheet" type="text/css" href="catalog/view/theme/<?php echo $template; ?>/stylesheet/rtl.ie6.css" />
<?php }?>

4. Enjoy it!

And that's it =) You can download the RTLed default theme(but not localized) below. Should you find any bugs or better suggestions on how to achieve this, please do mention it in the comments form below.

Note:There are some cool folks who localized the whole thing to Arabic over here. But it totally replaces the default theme to strictly use the RTL layout and you can't use the theme in a multilingual site. You can use their language files with the theme we just RTLed to get a multilingual and bidirectional theme

Source:

Download RTLed Theme

RTLing WP-Theme: Multichrome

nightS — Tue, 05 Oct 2010 08:26:44 +0000

A new Wordpress theme as been RTLed: Multichrome

This one has been a bit tricky since it included RTLing some JavaScript in addition to RTLing the CSS. The theme uses the jQuery plugin jCaoursel Lite which didn't have RTL support and I had to RTL the plugin(will post it soon) then use the new option to make it work.

Also I've disabled the cufón for the Arabic language(check header.php, I've added a small if) because the fonts didn't work with Arabic characters.

Download the RTLed theme below and ...Enjoy =)

Theme Files:

multichrome.zip

RTLing WP-Theme: zBench

l0uy — Thu, 16 Sep 2010 17:59:28 +0000

"Remember the RTLer? that tool which flips your css from left to right!" "well, how does that thing works exactly?" "Here's how..."

zBench, one of the best themes available on the WP.org themes directory, with that nice layout and light design. It's ideal for small and personal blogs, it has custom RSS, twitter and facebook links to add in the header too.... awesome isn't it?

There's one bad thing about that theme: no RTL support! Here's how the theme looks when changing the blog language to Arabic:

Ok, so no RTL. how is the RTLer gonna help me with that? let's begin shall we?

1. Install the RTLer

First of, lets head into the RTLer tool page, Tools » RTLer. (i've assumed that you've already installed it)

2. RTL your WP theme

Now, we need to do some clicks, just select the theme you want to RTL from the drop down menu (zBench in this case) and check the "Save" checkbox, then all you need to do is clicking that RTL button.

and we will get a success message.

and voila! it's just that simple... here's how the RTLed zBench looks like:

Perfect isn't it!? ;)

Theme Files:

zbench.zip

WordPress Plugin: Admin Locale

nightS — Mon, 06 Sep 2010 08:41:59 +0000

To change the language of a WordPress site, just update the WPLANG constant in your wp-config.php file:

define ('WPLANG', 'ar'); //changes the language of the site to Arabic

But this will change the language of both of your Front End and Back End. Separating these two was not possible if it weren't for this WP plugin by Louay(same author of The RTLer): Admin Locale.

Install the plugin and:

Just go to Settings » General and choose your language.

Note: Of course you'll need to install a localized version of WordPress so you can get the language files. Arabic WordPress can be downloaded from http://ar.wordpress.org

Enjoy =)

RTL This

How to Change DISQUS’s Threaded Comments to RTL

Tags:

Quick Tip: RTLing the CSS3 "box-shadow" property

What

How

Why?

Tags:

RTLing WP Theme: Keko

Tags:

RTLing WP-Theme: WP-Creativix:

Generate the rtl.css out of the exisitng stylesheets

RTL the slider JS

Other updates

Disable typeface for Arabic text

Download it now =)

Tags:

Ther RTLer

Tags:

How to RTL your Tumblr Theme

RTLing any Tumblr theme

Adding RTL support to a Tumblr theme

Tags:

RTLing OpenCart Default Theme

1. Set your language to an RTL one

2. RTL the theme

3. Enable the RTLed theme

4. Enjoy it!

Tags:

RTLing WP-Theme: Multichrome

Tags:

RTLing WP-Theme: zBench

1. Install the RTLer

2. RTL your WP theme

Tags:

WordPress Plugin: Admin Locale

Tags: