layout.css
Same filename in this branch
Same filename in other branches
- 9 core/profiles/demo_umami/themes/umami/css/layout/layout.css
- 9 core/themes/olivero/css/layout/layout.css
- 9 core/themes/seven/css/layout/layout.css
- 9 core/themes/claro/css/layout/layout.css
- 9 core/themes/bartik/css/layout.css
- 9 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
- 8.9.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
- 8.9.x core/themes/seven/css/layout/layout.css
- 8.9.x core/themes/claro/css/layout/layout.css
- 8.9.x core/themes/stark/css/layout.css
- 8.9.x core/themes/bartik/css/layout.css
- 10 core/profiles/demo_umami/themes/umami/css/layout/layout.css
- 10 core/themes/olivero/css/layout/layout.css
- 10 core/themes/claro/css/layout/layout.css
- 10 core/modules/ckeditor5/tests/modules/ckeditor5_test/css/layout.css
- 11.x core/profiles/demo_umami/themes/umami/css/layout/layout.css
- 11.x core/themes/olivero/css/layout/layout.css
- 11.x core/themes/claro/css/layout/layout.css
- 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
-
- /**
- * @file
- * 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.
- */
-
- #content,
- #sidebar-first,
- #sidebar-second {
- float: left;
- display: inline;
- position: relative;
- }
-
- #content {
- width: 100%;
- }
- body.sidebar-first #content {
- width: 80%;
- left: 20%; /* LTR */
- }
- body.sidebar-second #content {
- width: 80%;
- }
- body.two-sidebars #content {
- width: 60%;
- left: 20%;
- }
-
- #sidebar-first {
- width: 20%;
- left: -80%; /* LTR */
- }
-
- body.two-sidebars #sidebar-first {
- left: -60%; /* LTR */
- }
-
- #sidebar-second {
- float: right; /* LTR */
- width: 20%;
- }
-
- .section {
- margin: 10px;
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.