0

I like to move the left hand side further left to remove the white space, as well as move the right hand side towards the right, so that the centre has more space. I like to remove line wrapping with entries and with the majority of my endusers using widescreen monitors it doesn't look that great.

Screenshot of my site

Essentially I like to move the left and right sidebars towards the edges of their respective edges so the centre can become wider. I tried using the inspector and grepping for the relevant CSS code to modify but none of it seems to work. Nothing else has been modified it is out of the box Bartik theme with no extensions.

Update

.layout-container {

  max-width: 95%;  /* 860px */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media all and (min-width: 95%) {
.layout-container {
max-width: 95%;
 }   
}

/**
  * Main
  */
  .layout-main-wrapper {
   min-height: 300px;
  }
 .layout-main {
   margin-top: 20px;
   margin-bottom: 40px;
 }

This works if I edit the /core/themes/bartik/css/layout.css if I copy the theme and place it in the /themes folder it doesnt work.

it fails

0

First, you should not attempt to manually override and of Drupal's core files (or any other module or theme for that matter) because your changes will be overwritten during updates. So do not search for the CSS and attempt to alter it.

Make a copy of the bartik theme instead, move it to sites/all/themes and rename the folder and the .info file. Finally alter the info file to give your theme a new name.

All Bartik lay-out code can be found in layout.css. So you will have to modify widths and margins there.

Finally, I wanted to make you aware of the Responsive Bartik theme which is already slightly wider for widescreen monitors, but also optimized for mobile phone usage. You might find it usefull to use that instead, or use it as a base theme for your modifications.

Update for Drupal 8

You have the core/themes/bartik/css/layout.css file where you have to alter the max-width for wide screens:

/**
 * Container
 */
.layout-container {
  max-width: 860px; /* <- This is the default width. */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media all and (min-width: 851px) { /* <- Bigger than this means it is a wide screen */
  .layout-container {
    max-width: 1290px; /* <- This is the max-width for wide screens. */
  }
}

Most of the CSS properties are defined in percents and so they should scale along.

|improve this answer|||||
  • I have Drupal 8, would Responsive Bartik 7 still work? – Jon Weinraub Feb 16 '17 at 14:32
  • Oh, my bad. I thought the question was for Drupal 7. You can still copy and alter the theme though. – Neograph734 Feb 16 '17 at 15:04
  • No worries, could have sworn I had said 8, but guess not. There is quite a lot of files for css then on bartik8. I will go with the copy and edit idea instead. That being said, in .layout-container do i just change max-width: 860px; to something else? I am familiar with css but nothing of this magnitude. – Jon Weinraub Feb 16 '17 at 15:29
  • I have updated the answer. – Neograph734 Feb 16 '17 at 15:42
  • Weird, soon as I copied the theme, even without making any changes to it, and activated it, the left and right hand side bars over left the centre content areas. Not sure why, it is identical to the default core bartik, except it now lives in the user area, since i am not editing the core/themes, its in /themes. I assume though, I change the max width to ... ? or just chante it to max-width: 95%;? – Jon Weinraub Feb 16 '17 at 15:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.