style-rtl.css

html {
  direction: rtl;
}

/**
 * Generic elements
 */
body {
  direction: rtl;
}

ul,
.block ul,
ol {
  padding: 0 1.5em 0 0;
}

ul.menu,
.item-list ul {
  margin: 0.35em -0.5em 0 0;
}

ol li,
ul li,
ul.menu li,
.item-list ul li,
li.leaf {
  margin: 0.15em .5em 0.15em 0;
}

ul li.collapsed {
  list-style-image: url(images/menu-collapsed-rtl.gif);
}

ul.inline li {
  padding: 0 0 0 1em;
}

ol.task-list {
  margin-left: 0;
  margin-right: 0;
}

ol.task-list li {
  padding: 0.5em 2em 0.5em 1em;
}

ol.task-list li.active {
  background: transparent url(images/task-list.png) no-repeat 97px 50%;
}

ol.task-list li.done {
  background: transparent url(../../misc/watchdog-ok.png) no-repeat 100% 50%;
}

ol.task-list li.active {
  margin-right: 0;
  margin-left: 1em;
}

dl {
  margin: 0.5em 1.5em 1em 0;
}

dl dt {
}

dl dd {
  margin: 0 1.5em .5em 0;
}

.messages li {
  padding: 0 1.3 0 0;
}

.form-button,
.form-submit {
  margin: 0 0 0 0.5em;
}

.region-header h2 {
  margin: 0 0 0 1em;
}

#wrapper {
  background: #edf5fa url("images/body.png") repeat-x 50% 0;
}

#branding img {
  padding-right: 0;
  padding-left: 20px;
  float: right;
}

#wrapper #container #center {
  float: right;
}

body.sidebar-first #center {
  margin-left: 0;
  margin-right: -210px;
}
body.sidebar-second #center {
  margin-left: -210px;
  margin-right: 0;
}

/* And add blanks left and right for the sidebars to fill */
body.sidebar-first #squeeze {
  margin-left: 0;
  margin-right: 210px;
}
body.sidebar-second #squeeze {
  margin-left: 210px;
  margin-right: 0;
}

#wrapper #container .sidebar {
  float: right;
}

#sidebar-first .block {
  padding: 0 0 0 15px;
}

#sidebar-second .block {
  padding: 0 15px 0 0;
}



#sidebar-first .block-region {
  margin: 0 0 0 15px;
}

#sidebar-second .block-region {
  margin: 0 15px 0px 0;
}

/* Now we add the backgrounds for the main content shading */
#wrapper #container #center #squeeze {
  background: #fff url("images/bg-content.png") repeat-x 50% 0;
}

#wrapper #container .breadcrumb {
  position: absolute;
  top: 15px;
  left: 0;
  right: 35px;
  z-index: 3;
}

/**
 * Primary navigation
 */
ul.main-menu {
  float: left;
  width:70%;
}

ul.main-menu li {
  float: right;
}

/**
 * Secondary navigation
 */
ul.secondary-menu {
  float: left;
  clear: left;
  margin-left: 16em;
}

ul.secondary-menu li {
  float: right;
}

ul.primary {
  float: right;
}
ul.secondary {
  clear: both;
  text-align: right;
}
h1.with-tabs {
  float: right;
  margin: 0 0 0 2em;
}

ul.primary li a,
ul.primary li.active a,
ul.primary li a:hover,
ul.primary li a:visited,
ul.secondary li a,
ul.secondary li.active a,
ul.secondary li a:hover,
ul.secondary li a:visited {
  margin: 0 1px 0 0;

}
ul.primary li a:after {
  /* Fix Firefox 2 RTL bug. */
  content: " ";
}

ul.links li, ul.inline li {
  padding-left: 1em;
  padding-right: 0;
}

.node .links,
.comment .links {
  text-align: right;
  padding-right: 0;
}

.user-picture,
.comment .submitted {
  padding-left: 0;
  float: left;
  clear: left;
  padding-right: 1em;
}

.new {
  float: left;
}

.indented {
  margin-left: 0;
  margin-right: 25px;
}

html.js fieldset.collapsible .fieldset-legend {
  padding-left: 0;
  padding-right: 2em;
  background: url("images/menu-expanded.gif") no-repeat 100% 50%;
}

html.js fieldset.collapsed .fieldset-legend {
  background: url("images/menu-collapsed-rtl.gif") no-repeat 100% 50%;
}

/**
 * Vertical tabs.
 */
div.vertical-tabs {
  margin-left: 5%;
  margin-right: 15em;
}

/**
 * Syndication Block
 */
#block-node-syndicate h2 {
  float: right;
  padding-right: 0;
  padding-left: 20px;
}

#block-node-syndicate img {
  float: left;
}

#block-node-syndicate .content {
  clear: left;
}

/**
 * Login Block
 */
#user-login-form ul {
  text-align: right;
}
#user-login-form .openid-links {
  padding-left: 0;
  padding-right: 0.5em;
}
#user-login-form .openid-links li.user-link {
  padding-left: 0;
  padding-right: 1em;
}

div.admin .left {
  float: right;
}

div.admin .right {
  float: left;
}

/* Fix Opera, IE6 and IE7 header width */
#wrapper #container #header {
  position: relative;
  width: 100%;
}

#wrapper #container #header #logo-floater {
  width: 100%;
  left: 0;
  top:0;
}

/**
 * Fixes for IE7 - Does not break other browsers
 */

/* Position:relative on these breaks IE7. */
ul.primary li a,
ul.primary li.active a,
ul.primary li a:hover,
ul.primary li a:visited,
ul.secondary li a,
ul.secondary li.active a,
ul.secondary li a:hover,
ul.secondary li a:visited {
  position: static;
}

/* Fix right and left cloumns position breaking on window resize */
#container {
  position: relative;
}

#center {
  position: relative;
}

#sidebar-second {
  position: absolute;
  right: 0;
}

/**
 * Apply hasLayout to elements in IE7, using standard property "min-height"
 * (see http://www.satzansatz.de/cssd/onhavinglayout.html)
 */

/* Fix background bleed in center column. */
#squeeze,
#squeeze .right-corner {
  min-height: 1%;
}

File

View on git.drupalcode.org

themes/garland/style-rtl.css

View source 
  1. 

  2. html {

  3.   direction: rtl;

  4. }

  5. 

  6. /**

  7.  * Generic elements

  8.  */

  9. body {

  10.   direction: rtl;

  11. }

  12. 

  13. ul,

  14. .block ul,

  15. ol {

  16.   padding: 0 1.5em 0 0;

  17. }

  18. 

  19. ul.menu,

  20. .item-list ul {

  21.   margin: 0.35em -0.5em 0 0;

  22. }

  23. 

  24. ol li,

  25. ul li,

  26. ul.menu li,

  27. .item-list ul li,

  28. li.leaf {

  29.   margin: 0.15em .5em 0.15em 0;

  30. }

  31. 

  32. ul li.collapsed {

  33.   list-style-image: url(images/menu-collapsed-rtl.gif);

  34. }

  35. 

  36. ul.inline li {

  37.   padding: 0 0 0 1em;

  38. }

  39. 

  40. ol.task-list {

  41.   margin-left: 0;

  42.   margin-right: 0;

  43. }

  44. 

  45. ol.task-list li {

  46.   padding: 0.5em 2em 0.5em 1em;

  47. }

  48. 

  49. ol.task-list li.active {

  50.   background: transparent url(images/task-list.png) no-repeat 97px 50%;

  51. }

  52. 

  53. ol.task-list li.done {

  54.   background: transparent url(../../misc/watchdog-ok.png) no-repeat 100% 50%;

  55. }

  56. 

  57. ol.task-list li.active {

  58.   margin-right: 0;

  59.   margin-left: 1em;

  60. }

  61. 

  62. dl {

  63.   margin: 0.5em 1.5em 1em 0;

  64. }

  65. 

  66. dl dt {

  67. }

  68. 

  69. dl dd {

  70.   margin: 0 1.5em .5em 0;

  71. }

  72. 

  73. .messages li {

  74.   padding: 0 1.3 0 0;

  75. }

  76. 

  77. .form-button,

  78. .form-submit {

  79.   margin: 0 0 0 0.5em;

  80. }

  81. 

  82. .region-header h2 {

  83.   margin: 0 0 0 1em;

  84. }

  85. 

  86. #wrapper {

  87.   background: #edf5fa url("images/body.png") repeat-x 50% 0;

  88. }

  89. 

  90. #branding img {

  91.   padding-right: 0;

  92.   padding-left: 20px;

  93.   float: right;

  94. }

  95. 

  96. #wrapper #container #center {

  97.   float: right;

  98. }

  99. 

  100. body.sidebar-first #center {

  101.   margin-left: 0;

  102.   margin-right: -210px;

  103. }

  104. body.sidebar-second #center {

  105.   margin-left: -210px;

  106.   margin-right: 0;

  107. }

  108. 

  109. /* And add blanks left and right for the sidebars to fill */

  110. body.sidebar-first #squeeze {

  111.   margin-left: 0;

  112.   margin-right: 210px;

  113. }

  114. body.sidebar-second #squeeze {

  115.   margin-left: 210px;

  116.   margin-right: 0;

  117. }

  118. 

  119. #wrapper #container .sidebar {

  120.   float: right;

  121. }

  122. 

  123. #sidebar-first .block {

  124.   padding: 0 0 0 15px;

  125. }

  126. 

  127. #sidebar-second .block {

  128.   padding: 0 15px 0 0;

  129. }

  130. 

  131. 

  132. 

  133. #sidebar-first .block-region {

  134.   margin: 0 0 0 15px;

  135. }

  136. 

  137. #sidebar-second .block-region {

  138.   margin: 0 15px 0px 0;

  139. }

  140. 

  141. /* Now we add the backgrounds for the main content shading */

  142. #wrapper #container #center #squeeze {

  143.   background: #fff url("images/bg-content.png") repeat-x 50% 0;

  144. }

  145. 

  146. #wrapper #container .breadcrumb {

  147.   position: absolute;

  148.   top: 15px;

  149.   left: 0;

  150.   right: 35px;

  151.   z-index: 3;

  152. }

  153. 

  154. /**

  155.  * Primary navigation

  156.  */

  157. ul.main-menu {

  158.   float: left;

  159.   width:70%;

  160. }

  161. 

  162. ul.main-menu li {

  163.   float: right;

  164. }

  165. 

  166. /**

  167.  * Secondary navigation

  168.  */

  169. ul.secondary-menu {

  170.   float: left;

  171.   clear: left;

  172.   margin-left: 16em;

  173. }

  174. 

  175. ul.secondary-menu li {

  176.   float: right;

  177. }

  178. 

  179. ul.primary {

  180.   float: right;

  181. }

  182. ul.secondary {

  183.   clear: both;

  184.   text-align: right;

  185. }

  186. h1.with-tabs {

  187.   float: right;

  188.   margin: 0 0 0 2em;

  189. }

  190. 

  191. ul.primary li a,

  192. ul.primary li.active a,

  193. ul.primary li a:hover,

  194. ul.primary li a:visited,

  195. ul.secondary li a,

  196. ul.secondary li.active a,

  197. ul.secondary li a:hover,

  198. ul.secondary li a:visited {

  199.   margin: 0 1px 0 0;

  200. 

  201. }

  202. ul.primary li a:after {

  203.   /* Fix Firefox 2 RTL bug. */

  204.   content: " ";

  205. }

  206. 

  207. ul.links li, ul.inline li {

  208.   padding-left: 1em;

  209.   padding-right: 0;

  210. }

  211. 

  212. .node .links,

  213. .comment .links {

  214.   text-align: right;

  215.   padding-right: 0;

  216. }

  217. 

  218. .user-picture,

  219. .comment .submitted {

  220.   padding-left: 0;

  221.   float: left;

  222.   clear: left;

  223.   padding-right: 1em;

  224. }

  225. 

  226. .new {

  227.   float: left;

  228. }

  229. 

  230. .indented {

  231.   margin-left: 0;

  232.   margin-right: 25px;

  233. }

  234. 

  235. html.js fieldset.collapsible .fieldset-legend {

  236.   padding-left: 0;

  237.   padding-right: 2em;

  238.   background: url("images/menu-expanded.gif") no-repeat 100% 50%;

  239. }

  240. 

  241. html.js fieldset.collapsed .fieldset-legend {

  242.   background: url("images/menu-collapsed-rtl.gif") no-repeat 100% 50%;

  243. }

  244. 

  245. /**

  246.  * Vertical tabs.

  247.  */

  248. div.vertical-tabs {

  249.   margin-left: 5%;

  250.   margin-right: 15em;

  251. }

  252. 

  253. /**

  254.  * Syndication Block

  255.  */

  256. #block-node-syndicate h2 {

  257.   float: right;

  258.   padding-right: 0;

  259.   padding-left: 20px;

  260. }

  261. 

  262. #block-node-syndicate img {

  263.   float: left;

  264. }

  265. 

  266. #block-node-syndicate .content {

  267.   clear: left;

  268. }

  269. 

  270. /**

  271.  * Login Block

  272.  */

  273. #user-login-form ul {

  274.   text-align: right;

  275. }

  276. #user-login-form .openid-links {

  277.   padding-left: 0;

  278.   padding-right: 0.5em;

  279. }

  280. #user-login-form .openid-links li.user-link {

  281.   padding-left: 0;

  282.   padding-right: 1em;

  283. }

  284. 

  285. div.admin .left {

  286.   float: right;

  287. }

  288. 

  289. div.admin .right {

  290.   float: left;

  291. }

  292. 

  293. /* Fix Opera, IE6 and IE7 header width */

  294. #wrapper #container #header {

  295.   position: relative;

  296.   width: 100%;

  297. }

  298. 

  299. #wrapper #container #header #logo-floater {

  300.   width: 100%;

  301.   left: 0;

  302.   top:0;

  303. }

  304. 

  305. /**

  306.  * Fixes for IE7 - Does not break other browsers

  307.  */

  308. 

  309. /* Position:relative on these breaks IE7. */

  310. ul.primary li a,

  311. ul.primary li.active a,

  312. ul.primary li a:hover,

  313. ul.primary li a:visited,

  314. ul.secondary li a,

  315. ul.secondary li.active a,

  316. ul.secondary li a:hover,

  317. ul.secondary li a:visited {

  318.   position: static;

  319. }

  320. 

  321. /* Fix right and left cloumns position breaking on window resize */

  322. #container {

  323.   position: relative;

  324. }

  325. 

  326. #center {

  327.   position: relative;

  328. }

  329. 

  330. #sidebar-second {

  331.   position: absolute;

  332.   right: 0;

  333. }

  334. 

  335. /**

  336.  * Apply hasLayout to elements in IE7, using standard property "min-height"

  337.  * (see http://www.satzansatz.de/cssd/onhavinglayout.html)

  338.  */

  339. 

  340. /* Fix background bleed in center column. */

  341. #squeeze,

  342. #squeeze .right-corner {

  343.   min-height: 1%;

  344. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.