layout.css

Same filename in this branch
  1. 7.x themes/bartik/css/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

Stark layout method

To avoid obscuring CSS added to the page by Drupal or a contrib module, the Stark theme itself has no styling, except just enough CSS to arrange the page in a traditional "Header, sidebars, content, and footer" layout.

This layout method works reasonably well, but shouldn't be used on a production site because it can break. For example, if an over-large image (one that is wider than 20% of the viewport) is in the left sidebar, the image will overlap with the #content to the right. The exception to this is IE6 which will just hide the navigation block completely in these instances due to a positioning bug.

File

themes/stark/layout.css

View source
  1. /**
  2. * @file
  3. * Stark layout method
  4. *
  5. * To avoid obscuring CSS added to the page by Drupal or a contrib module, the
  6. * Stark theme itself has no styling, except just enough CSS to arrange the page
  7. * in a traditional "Header, sidebars, content, and footer" layout.
  8. *
  9. * This layout method works reasonably well, but shouldn't be used on a
  10. * production site because it can break. For example, if an over-large image
  11. * (one that is wider than 20% of the viewport) is in the left sidebar, the
  12. * image will overlap with the #content to the right. The exception to this
  13. * is IE6 which will just hide the navigation block completely in these
  14. * instances due to a positioning bug.
  15. */
  16. #content,
  17. #sidebar-first,
  18. #sidebar-second {
  19. float: left;
  20. display: inline;
  21. position: relative;
  22. }
  23. #content {
  24. width: 100%;
  25. }
  26. body.sidebar-first #content {
  27. width: 80%;
  28. left: 20%; /* LTR */
  29. }
  30. body.sidebar-second #content {
  31. width: 80%;
  32. }
  33. body.two-sidebars #content {
  34. width: 60%;
  35. left: 20%;
  36. }
  37. #sidebar-first {
  38. width: 20%;
  39. left: -80%; /* LTR */
  40. }
  41. body.two-sidebars #sidebar-first {
  42. left: -60%; /* LTR */
  43. }
  44. #sidebar-second {
  45. float: right; /* LTR */
  46. width: 20%;
  47. }
  48. .section {
  49. margin: 10px;
  50. }

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