You are not logged in.
Pages: 1
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?
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)
Yes, but how?
twenty-twelve theme already contains rtl css.
@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)
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)
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)
@Astex, that line worked for most of the twenty-twelve theme. Will try again, but thanks. Will keep you updated.
@rtp, what about Twenty-Eleven for Wordpress 3.4.2? Any way to flip that as well?
Last edited by Nabs (December 22 2012)
@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.
@Kassem, thanks mate, but I have memory issues. I can't learn new stuff. Appreciated though!
@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.
@Astex, I tried CSSjanus, it didn't flip the whole thing. Posts remained LTR. What exactly did you do, please?
I flipped the theme's css with css janus and added that line of code to the header which flipped the posts alignment.
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)
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" />
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?
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)
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)
yes, that's what I did, but I'm not sure if it's the correct way.
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.
.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)
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)
@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)
Pages: 1