LebGeeks

A community for technology geeks in Lebanon.

You are not logged in.

#1 December 22 2012

Nabs
Member

Wordpress RTL, how?

I want to use the latest, or maybe the version before that, of Wordpress. My dilemma is someone who wants Wordpress to be in English, but the site's front end in Arabic. So, the layout, the posts, the orientation, all right-to-left, but the panel itself intact. So, I cannot use Arabic Wordpress. Anybody knows how to flip-mirror the twenty-eleven or twenty-twelve theme?

Offline

#2 December 22 2012

Ayman
Member

Re: Wordpress RTL, how?

For RTL support within your theme you'll either have to customize your default theme CSS to support RTL text or just use any of the other themes that support RTL.

Last edited by Ayman (December 22 2012)

Offline

#3 December 22 2012

Nabs
Member

Re: Wordpress RTL, how?

Yes, but how?

Offline

#4 December 22 2012

Astex
Member

Re: Wordpress RTL, how?

twenty-twelve theme already contains rtl css.

Offline

#5 December 22 2012

Nabs
Member

Re: Wordpress RTL, how?

@Astex, could you please let me know how it's done? If it's not much trouble? How do I activate it?

Last edited by Nabs (December 22 2012)

Offline

#6 December 22 2012

rtp
Member

Re: Wordpress RTL, how?

appearance => editor
you need to add one line

direction:rtl; /* this is the line you need to add */

you need to add it for the css that contains the html tag

below is an example

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
direction:rtl; /* this is the line you need to add */
}

not sure if it will work, you can test it and tell me of the result.


Edit
You might need to press Control + F5 to see the changes since the css most probably will be cached in the browser.
so if you refresh your page and can't see the changes try Control + F5

Last edited by rtp (December 22 2012)

Offline

#7 December 22 2012

Astex
Member

Re: Wordpress RTL, how?

I added this line: <link rel="stylesheet" href="<?php print get_stylesheet_directory_uri() . '/rtl.css'; ?>" type="text/css" /> under the head tag in the header.php of twentytwelve theme and converted the style.css to RTL with CSS Janus and it worked for me, but I'm not sure if this is the correct way. I think that buying a premium theme is much better. You can find some themes with rtl support at themeforest.net (themes like GoodNews and Carmen)

Offline

#8 December 22 2012

Nabs
Member

Re: Wordpress RTL, how?

@Astex, that line worked for most of the twenty-twelve theme. Will try again, but thanks. Will keep you updated.

Offline

#9 December 22 2012

Nabs
Member

Re: Wordpress RTL, how?

@rtp, what about Twenty-Eleven for Wordpress 3.4.2? Any way to flip that as well?

Last edited by Nabs (December 22 2012)

Offline

#10 December 22 2012

Kassem
Member

Re: Wordpress RTL, how?

Nabs wrote:

@rtp, what about Twenty-Eleven for Wordpress 3.4.2? Any way to flip that as well?

Everything can be flipped. It's all HTML and CSS after all. If you know basic CSS then you can definitely flip any theme you choose. You should start by reading how to style a page to support an RTL layout. From there, use the knowledge you've learned to style the Twenty-Eleven theme or any other theme you choose.

Offline

#11 December 22 2012

Nabs
Member

Re: Wordpress RTL, how?

@Kassem, thanks mate, but I have memory issues. I can't learn new stuff. Appreciated though!

Offline

#12 December 23 2012

Astex
Member

Re: Wordpress RTL, how?

Nabs wrote:

@Astex, that line worked for most of the twenty-twelve theme. Will try again, but thanks. Will keep you updated.

try using css janus (or any other app) which will convert the css automatically to rtl and keep that line in the header. This is what the theme looked like at the end. I'm using wordpress 3.5 and twenty-twelve theme.

Offline

#13 December 23 2012

Nabs
Member

Re: Wordpress RTL, how?

@Astex, I tried CSSjanus, it didn't flip the whole thing. Posts remained LTR. What exactly did you do, please?

Offline

#14 December 23 2012

Astex
Member

Re: Wordpress RTL, how?

I flipped the theme's css with css janus and added that line of code to the header which flipped the posts alignment.

Offline

#15 December 23 2012

Nabs
Member

Re: Wordpress RTL, how?

Doesn't the Twenty-Twelve theme come with an RTL Stylesheet? Can't we get that in use? (Gonna try what you just suggested still).

What line flips the posts, please?

Last edited by Nabs (December 23 2012)

Offline

#16 December 23 2012

Astex
Member

Re: Wordpress RTL, how?

Nabs wrote:

Doesn't the Twenty-Twelve theme come with an RTL Stylesheet? Can't we get that in use? (Gonna try what you just suggested still).

What line flips the posts, please?

<link rel="stylesheet" href="<?php print get_stylesheet_directory_uri() . '/rtl.css'; ?>" type="text/css" />

Offline

#17 December 23 2012

Nabs
Member

Re: Wordpress RTL, how?

Sorry I keep bothering, Astex. Should I use both CSSjanus and that line you just posted, or just that line? Where do I put it?

Offline

#18 December 23 2012

Astex
Member

Re: Wordpress RTL, how?

yes both of them, that line will activate the rtl.css in the themes folder (this will only flip the posts) and cssjanus will flip the rest.

Last edited by Astex (December 23 2012)

Offline

#19 December 23 2012

Nabs
Member

Re: Wordpress RTL, how?

OK, so I put the CSS code in CSSjanus, run, get the code and replace it, and add that line you wrote in the header.php file. Is that correct?

Update: Worked. Thanks, mate!

Last edited by Nabs (December 23 2012)

Offline

#20 December 23 2012

Astex
Member

Re: Wordpress RTL, how?

yes, that's what I did, but I'm not sure if it's the correct way.

Offline

#21 December 23 2012

Nabs
Member

Re: Wordpress RTL, how?

OK, please bear with me, Astex. I flip-mirrored the site like you told me, it works. No, I'm using Arabic letters. Got a few questions, using the Twenty Twelve theme:

1. Where can I increase the size of font in the main menu?
2. Would like to increase the height and width of the header image.
3. Decrease the white and grey padding on top.

That's all for now. Thanks upfront.

Offline

#22 December 23 2012

Nabs
Member

Re: Wordpress RTL, how?

.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 18px !important;
	font-size: 0.857142857rem;
	line-height: 1.42857143;

Added the !important next to font size. That made it override and work.

What about page width? Any ideas?

Last edited by Nabs (December 23 2012)

Offline

#23 December 24 2012

Astex
Member

Re: Wordpress RTL, how?

To change the page width edit these values (line 1366 style.css)

.site {
		margin: 0 auto;
	        max-width: 960px;
		max-width: 68.571428571rem;
		overflow: hidden;
}

To reduce the grey padding edit these (line 1915 style.css)

body .site {
		padding: 0 40px;
		padding: 0 2.857142857rem;
		margin-top: 48px;
		margin-top: 3.428571429rem;
		
        margin-bottom: 48px;
		margin-bottom: 3.428571429rem;
		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
	}

concerning the header's image, you can use any height and the max width will be the value you set for the page's width.
Note: I'm using Twenty-Twelve v.1, the line number's may vary in others versions.

Last edited by Astex (December 24 2012)

Offline

#24 December 24 2012

Nabs
Member

Re: Wordpress RTL, how?

@Astex, thank you so much for you help. I tried those before, they didn't work. I re-tried after you posted, changed the values multiple times. Turns out some of them work and others don't. But those are the parts of the CSS that need to be edited, yup. Thank you. Alright, the site's looking close to as intended. 3 more tweaks left, if you don't mind:

- Can I put a second pages menu below the header? Because there are too many page names on the main bar and it has split into 2 lines. Any way I could take that second line below the header image?

- Can I edit the hover effect, make it look a bit like that of the previous version? You know, black box around the label?

Last edited by Nabs (December 24 2012)

Offline

Board footer