Topic on Skin talk:Chameleon

I want the design to be full page width. How can I do this?

You could set

@container-large-desktop: 100%;

by adding (prepending) it to your fixes.less (or by setting it in LocalSettings.php)

I have a vertical Navbar left of the Maincontent. Navbar and MainContent have a ratio of 3:9 of the page. If the screen gets bigger, so does the Navbar.

I want the Navbar have a fixed size of 200px. The MainContent shall max out the space left.

As you noted, the nav bar is integrated in the page's grid at a 3:9 ratio. To fix the width of the nav bar you'd have to change that ratio.

It might be as easy as skewing the grid by fixing the width of the nav bar. Or that may lead to unexpected side effects like gaps between nav bar and main content.

It may also work to put nav bar and main content in the same cell side by side (so they are not affected by the grid cell ratios anymore) and then fix the nav bar width. But then you would probably need to wrap nav bar and tool bar in a Container component.

I do not know what's best and would have to try that out. It's probably easier, if you just do that yourself.

Some pointers (most of which you already know):

• Changing the layout of components is done via the xml file.
• Overwriting LESS variables and changing CSS rules and properties is done via your fixes.less.
• For available LESS variables have a look at .../vendor/twitter/bootstrap/less/variables.less
• For finding the CSS class names and doing some rapid prototyping use the developer tools of your preferred browser (e.g. firebug)
• Always do a small change to LocalSettings.php for style changes to take effect.

Well, I would be happy if I could set the Navbar to be absolute (200px) instead of relative (<cell span="3">). I don't know how.

The same goes for the MainContent: There is space at the right side, it does not use the whole page width. Why?

Re fixed-width navbar: What have you tried?

Re main content: What did you do to investigate?

I tried much, but it's more guessing than knowing. My newest approach:

For navbar:

position: absolute;
left: 0px

For main cell:

position: absolute;
left: 400px

This works for the navbar, but not for the main cell.