Padding Issue with Acquia Prosper

provide your actual site link so I can look closer? I am using Prosper on one of my sites (and LOVE it), so I'm pretty familiar with the css. I believe what you're referring to as padding is actually an image.

For the padding:
Look in your grid css in the Fusion Core theme. You'll see sidebars. There you can control padding and margin. For the other blocks: You'll need to look in the style.css for both padding and margins. If the 0 values aren't sufficient, you may need to add negative values, like -15px.

The height of the sidebars:
They're scaled by amount of content by default. But you can apply a height. To do so, open your grid css (grid12 or grid16, whichever you're using); this will be in your Fusion Core theme, not Prosper.
Now under /* full width blocks in sidebars */, just add in your height value. Start with, say 400px and go up or down from there. Remember, files like typography, style grid12 and grid16 have major control over the theme... and those are all in the Fusion Core.

When you provide your link, I can check it out and give more precise directions. But this will get you started.

Good luck!
Chris

Mike,

As you've discovered, the gutters (spacing between content in a grid layout) is defined in the grid css files in the Fusion Core base theme.

A unique feature of Fusion-based themes is that you can easily change the gutters without having to re-calculate the entire grid.

Some tips in doing this:

• If you want to change your gutters, use the local.css file (rename local-sample.css to local.css) to override them so that you don't have to worry about your changes being overwritten when you update Fusion Core in the future.

• When you change the gutters by targeting .block .inner, you change them for the entire layout. So if you set them to zero, you wouldn't have any horizontal spacing between content at all. If you only want to target sidebar-last (for instance) you can use .sidebar-last .block .inner instead.

• In some cases, if you don't want to alter the gutters for the entire layout or even a region, you can use negative margins to "pull" the width of one or more block elements over the gutter.

The spacing you're seeing at the bottom of regions after you add a block is the 1.5em margin bottom for .block defined in the Fusion Core style.css stylesheet. This allows you to stack blocks (singly in sidebars or to create multiple rows in other regions) but still have some spacing between them. By the way, the reason for using ems is that while horizontal spacing in Fusion-based themes is defined by the grid as either pixels or percentages (for fluid layouts), the vertical "rhythm" is text based. So the size of vertical spacing tries to track text size in order to keep things proportional.

Regardless, you could target .postscript-bottom .block, for instance, to change the margin-bottom value if you wish (using local.css).

Also, if you're not already using the Firebug extension for Firefox to locate the css for different properties of your layout, I strongly recommend it.

Extending the height of a column to go to the bottom of the page is a bit of a thorny issue, since it's not something that html and css want to do naturally. Typically it's known as the "equal height column" issue, since the bottom of the page is defined by the tallest column, with the shorter column not reaching the bottom. One popular solution is known as "faux columns" and it works by extending a visual background far beyond the bottom of the page for all columns in order to give the appearance of every column reaching the bottom of the page.

Another approach is to use javascript to dynamically resize columns. Fusion Core has an equal heights script that supports a Skinr block setting that allows you to make all of your blocks in a region the same height. But there is nothing built in to do the same for regions themselves. That said, it might be possible to use the same approach to equalize a sidebar's height with that of another region, though it'd take some javascript hacking.

Thanks for using Acquia Prosper/Fusion.

This gets me (total newbie) in the ballpark, but I'm trying to use Fusion Starter. I'd like to make the various built-in regions (Header Top, Header, etc.) not have any margin/padding, but sit tight on each other. I looked in the Fusion Core, but there's no local-sample.css. There is, however in Fusion Starter, but it's empty. I take it that a local.css in Fusion Starter's directory is a sort of "overrider" css that gets read last and has the last say. What exactly should go in this local.css to make my regions/blocks' margins/padding move?

Another question, should I be sub-theme-ing if I'm beginning to hack around in the css forests? Is it safe to sub-theme Fusion Starter?