By Tanya S on

Hi

I am using the Bluemarine Theme and have managed to change some things to how I want it, but would really like my site to not fit the whole of the screen but to be centralised and smaller e.g 800 pixels width. Is there anyway I can change this in the Bluemarine theme?

If I can't is there any themes that are a bit smaller in width and don't fit the page?

Thanks

⋅ Categories: Drupal 4.7.x

Comments

frjo’s picture

frjo commented

Open the style.css file and at the top of the file you find 

body {
  margin: 0;
  padding: 0;
  color: #000;
  background-color: #fff;
  font: 76% Verdana, Arial, Helvetica, sans-serif;
}

add max-width to it like this

body {
  margin: 0;
  padding: 0;
  color: #000;
  background-color: #fff;
  font: 76% Verdana, Arial, Helvetica, sans-serif;
  max-width: 800px;
}

and the page will not become wider that 800 pixels. Unfortunately Internet Explorer 6 don't understand max-width (IE 7 will fix this) so we need a hack like this

* html body {
  width: 800px;
}

This will lock the width to 800 pixels for IE6 users. "* html" makes standard compliant browsers ignore it.

tkgafs’s picture

tkgafs commented

Is it possible to do a similar thing with the bluemarine sidebars and set a max width for them as a % of the whole screen

tkgafs

Tanya S’s picture

Tanya S commented

Thanks thats worked perfectly

ssace’s picture

ssace commented

This worked for me in Bluemarine, but an anomoly noticed with Firefox.

In addition to fixing the width, I changed margin to: margin: auto; (to center the theme)

In IE, the theme works flawlessly with no glitches. However, in Firefox when I switch between menu items, the theme makes a slight shift. Sometimes shift to the left, then back to right as I view different pages. Doesn't do this in IE.

Any ideas?

Here is the style.css part that I edited to fix width to 1000 & center:

body {
  margin: auto;
  padding: 0;
  color: #000;
  background-color: #FBFBF9;
  font: 76% Verdana, Arial, Helvetica, sans-serif;
  max-width: 1000px;
}
* html body {
width: 1000px;
}
ssace’s picture

ssace commented

I now see what is happening in Firefox. When the page does not need to be scrolled, the right scroll bar disappears and makes the theme rock back to the right. Of course, the opposite happens on a longer page that requires scrolling.

Is this normal in Firefox? I noticed that IE holds the scrollbar position in all pageviews; thereby maintaining the site position.