layout.css

Same filename in this branch
  1. 7.x themes/stark/layout.css
Same filename in other branches
  1. 9 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  2. 9 core/themes/olivero/css/layout/layout.css
  3. 9 core/themes/seven/css/layout/layout.css
  4. 9 core/themes/claro/css/layout/layout.css
  5. 9 core/themes/bartik/css/layout.css
  6. 9 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  7. 8.9.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  8. 8.9.x core/themes/seven/css/layout/layout.css
  9. 8.9.x core/themes/claro/css/layout/layout.css
  10. 8.9.x core/themes/stark/css/layout.css
  11. 8.9.x core/themes/bartik/css/layout.css
  12. 10 core/profiles/demo_umami/themes/umami/css/layout/layout.css
  13. 10 core/themes/olivero/css/layout/layout.css
  14. 10 core/themes/claro/css/layout/layout.css
  15. 10 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
  16. 11.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
  17. 11.x core/themes/olivero/css/layout/layout.css
  18. 11.x core/themes/claro/css/layout/layout.css
  19. 11.x core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
/* ---------- Basic Layout Styles ----------- */

html,
body,
#page  {
  height: 100%;
}
#page-wrapper {
  min-height: 100%;
  min-width: 960px;
}
#header div.section,
#featured div.section,
#messages div.section,
#main,
#triptych,
#footer-columns,
#footer {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
#header div.section {
  position: relative;
}
.region-header {
  float: right; /* LTR */
  margin: 0 5px 10px;
}
.with-secondary-menu .region-header {
  margin-top: 3em;
}
.without-secondary-menu .region-header {
  margin-top: 15px;
}
#secondary-menu {
  position: absolute;
  right: 0; /* LTR */
  top: 0;
  width: 480px;
}
#content,
#sidebar-first,
#sidebar-second,
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last,
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
  display: inline;
  float: left; /* LTR */
  position: relative;
}
.one-sidebar #content {
  width: 720px;
}
.two-sidebars #content {
  width: 480px;
}
.no-sidebars #content {
  width: 960px;
  float: none;
}
#sidebar-first,
#sidebar-second {
  width: 240px;
}
#main-wrapper {
  min-height: 300px;
}
#content .section,
.sidebar .section {
  padding: 0 15px;
}
#breadcrumb {
  margin: 0 15px;
}
.region-triptych-first,
.region-triptych-middle,
.region-triptych-last {
  margin: 20px 20px 30px;
  width: 280px;
}
#footer-wrapper {
  padding: 35px 5px 30px;
}
.region-footer-firstcolumn,
.region-footer-secondcolumn,
.region-footer-thirdcolumn,
.region-footer-fourthcolumn {
  padding: 0 10px;
  width: 220px;
}
#footer {
  width: 940px;
  min-width: 920px;
}

File

themes/bartik/css/layout.css

View source 
  1. 

  2. /* ---------- Basic Layout Styles ----------- */

  3. 

  4. html,

  5. body,

  6. #page  {

  7.   height: 100%;

  8. }

  9. #page-wrapper {

  10.   min-height: 100%;

  11.   min-width: 960px;

  12. }

  13. #header div.section,

  14. #featured div.section,

  15. #messages div.section,

  16. #main,

  17. #triptych,

  18. #footer-columns,

  19. #footer {

  20.   width: 960px;

  21.   margin-left: auto;

  22.   margin-right: auto;

  23. }

  24. #header div.section {

  25.   position: relative;

  26. }

  27. .region-header {

  28.   float: right; /* LTR */

  29.   margin: 0 5px 10px;

  30. }

  31. .with-secondary-menu .region-header {

  32.   margin-top: 3em;

  33. }

  34. .without-secondary-menu .region-header {

  35.   margin-top: 15px;

  36. }

  37. #secondary-menu {

  38.   position: absolute;

  39.   right: 0; /* LTR */

  40.   top: 0;

  41.   width: 480px;

  42. }

  43. #content,

  44. #sidebar-first,

  45. #sidebar-second,

  46. .region-triptych-first,

  47. .region-triptych-middle,

  48. .region-triptych-last,

  49. .region-footer-firstcolumn,

  50. .region-footer-secondcolumn,

  51. .region-footer-thirdcolumn,

  52. .region-footer-fourthcolumn {

  53.   display: inline;

  54.   float: left; /* LTR */

  55.   position: relative;

  56. }

  57. .one-sidebar #content {

  58.   width: 720px;

  59. }

  60. .two-sidebars #content {

  61.   width: 480px;

  62. }

  63. .no-sidebars #content {

  64.   width: 960px;

  65.   float: none;

  66. }

  67. #sidebar-first,

  68. #sidebar-second {

  69.   width: 240px;

  70. }

  71. #main-wrapper {

  72.   min-height: 300px;

  73. }

  74. #content .section,

  75. .sidebar .section {

  76.   padding: 0 15px;

  77. }

  78. #breadcrumb {

  79.   margin: 0 15px;

  80. }

  81. .region-triptych-first,

  82. .region-triptych-middle,

  83. .region-triptych-last {

  84.   margin: 20px 20px 30px;

  85.   width: 280px;

  86. }

  87. #footer-wrapper {

  88.   padding: 35px 5px 30px;

  89. }

  90. .region-footer-firstcolumn,

  91. .region-footer-secondcolumn,

  92. .region-footer-thirdcolumn,

  93. .region-footer-fourthcolumn {

  94.   padding: 0 10px;

  95.   width: 220px;

  96. }

  97. #footer {

  98.   width: 940px;

  99.   min-width: 920px;

  100. }

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