rtl version of bootstrap

Aug 2, 2012 at 2:06 PM
Edited Aug 2, 2012 at 2:08 PM

Hi joe.

I was starting a website for a client and I decided to use bootstrap skin as the starting point for a new skin design.

but the first step was creating an rtl version of the skin.

It's ready, I'll write down notes here, and will email the skin file to your gmail.

notes:

 

-dir="rtl" was added to html elements of layout.master

-specified height:55px for ul.root-nav  (line 3 of style-menu.css)
to prevent the flickring that sometimes happens when a menu item is hovered. (and it's not limited to rtl version, I think the same applies to the ltr one too)

-in data/style/qtfile/default.css, add width:100% for .qtfile .file-panel (it won't harm the ltr version, but rtl needs it)

- for faqs, I had to use a relative image url, maybe it needs to be set in data/style/common/style.css, not in style-rtl.css. well, I don't have the commit permission for data/style/common/style.css

-pagemenu is put into right container, in layout.master

-in rtl pages, when we have multi-level pages, the pagemenu goes to the right_div. ok, I put pagemenu in div_right in layout.master.
if page has some content it's ok. but when page has no content, it goes to the left! so we need to specify extra css classes for right, so that we can tell it to go floated to the right! it's done in theme.skin and an additional css rule for the .rightside class was added to style-rtl.css     (.rightside {float:right;})

-alt_container should not be on top of the menu! changed it's position in layout.master (this applies to ltr as well)

-added sitefooter class to the aside element containing copyright, then set its text-align to center.
(it's set in style-custom.css)

-and the IE6 message (ancient browser) needs localization! (nothing I could do)

Aug 3, 2012 at 1:13 PM

add the following to style-rtl.css too:

html[dir='rtl'] .floatpanel{float:right}

Aug 3, 2012 at 3:54 PM
Edited Aug 3, 2012 at 3:54 PM

and also change the following in style-rtl.css (it didn't work properly when css caching and minifying was enabled)

html[dir='rtl'] .faqs dt{
    background-position:top right;
    font-weight: bold;
    padding: 3px 30px 15px 0;
}

html[dir='rtl'] .faqs dd {
    background-position:top right;
    color: #333333;
    padding: 0 30px 5px 0;
    position: relative;
}