Changing width in Bartik theme

Question

How do I change the width in the Bartik theme (or better yet, allow it to adjust for different browser sizes)?

I've been trying to link to my drupal site via a Facebook page, and the default width is too large.

I've also downloaded the Bartik-Facebook subtheme, which made the width small enough for facebook, but also removed scrollbars, so that large pages were cut off and could not be scrolled down to.

I'd like the width to be smaller, but still allow scrollbars if the page has too much content.

I haven't yet done any coding regarding modules/themes, so a solution that is simply downloading a module/theme would be preferred, but if developing my own theme/module is the only way, I'm prepared to have a go at that.

Answer 1

If you're not committed to using Bartik, you could try one of the Adaptive Theme subthemes. These themes are very popular (one of them, Corolla, was intended for inclusion as the default theme in Drupal 7 but lost out to Bartik) and they allow you to change the width of the page easily on the settings page.

They are also responsive, which means that they will automatically adjust the columns on your page to display better on different screen sizes (by default, they provide PC, tablet, and smartphone layouts). You can also adjust the colors from within the UI just like Bartik. They are very newbie-friendly (the other major collection of newbie-friendly Drupal themes are the Fusion subthemes).

The base theme is Adaptivetheme, which you must install (though you won't actually use this theme). Then you can choose from Corolla, Sky, or Pixture Reloaded.

Answer 2

You need to edit the CSS file of bartik theme(AFAIK):

I have faced the same problem and I did the following:

themes/bartik/css/layout.css


#page-wrapper {
  min-height: 100%;
  min-width: 100px;
  width: 100%;  
}

#page  {
  height: 100%;
  width: 1024px;  /* Whatever you want */
  margin: 0 auto; /* Center content    */
}

By the way, this may alter your structure and you need edit some other parts(It's not so hard).

I have used this modifications for this site: http://inforscience.net/fds_proyecto/

Here is my modified bartik theme: http://inforscience.net/tmp/bartik.tar.gz

I hope this helps!