Posted by cardiffsteve on February 12, 2013 at 10:36pm
I was trying to increase the margin of my page in Omega on the left and right, at the moment its too thin by default. Which Class would I need to adjust? I thought it might be Body, but adding a Margin to that adjusts the whole screen.
Comments
You'll have to create a custom grid
... since the margin of zones in omega is set to "auto" and will just expand to the remaining space to the left and to the right, centering the zones horizontally; i.e. you will have to shrink the content area by providing a custom grid. For information on how to create a custom grid system for omega, have a look at http://groups.drupal.org/node/164684
Tojio | http://www.tojio.com
I have followed all the
I have followed all the instructions but ended up with a fluid grid.
this is what i have in .info
grids[max_default][name] = My new 27 Cols Grid (OMG!)
grids[max_default][layouts][wide] = Wide
grids[max_default][columns][27] = 27 Columns
stylesheets[all and (max-width: 960px)][] = css/max-alpha-default-wide.css
stylesheets[all][] = css/max-alpha-default.css
stylesheets[all and (min-width: 960px)][] = css/grid/max_default/wide/max-default-wide-27.css
All I have changed from the instructions is 1008 to 960 above.
i used the generator to create the css file.
my theme is called max.
Generated CSS
The generated CSS probably uses underscores in container and grid selectors. Do a global search-and-replace to change them to hyphens.
you are right it did, so I
you are right it did, so I changed everything, the only difference is that my 4 'postscript' regions have now come good and showing 4 ins a row at the bottom , before they were all verticle, in postscript first. However, I'm still fluid.
ok, I have used the '12'
ok, I have used the '12' 'normal' css files, and changed my .info to reflect that (i didnt need 27 columns as shown in the example), and it works. I have a customised grid (though its the same as omega 12 column normal). I just need to figure out now how to shrink the content to so I have a decent margin on the left and right.
If anyone can help that would be fab.
amended my custom css grid, but...
I've got this working by amending my custom css grid file, increasing the left and right margin to 30px at the beginning of the css file, and changing the width to 1000px to Body and Container-12 (to compensate for the increase in wideth) - see below. If anyone can figure out a way of doing this and keeping it 960, then let me know.
/
* ==========================================================
* Grid
* ==========================================================
*/
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10,
.grid-11, .grid-12 {
display: inline;
float: left;
position: relative;
margin-left: 30px;
margin-right: 30px;
}
.push-1, .pull-1, .push-2, .pull-2, .push-3, .pull-3, .push-4, .pull-4,
.push-5, .pull-5, .push-6, .pull-6, .push-7, .pull-7, .push-8, .pull-8,
.push-9, .pull-9, .push-10, .pull-10, .push-11, .pull-11, .push-12, .pull-12 {
position: relative;
}
/
* ==========================================================
* Alpha - Omega
* ==========================================================
/
.alpha {
margin-left: 0px;
}
.omega {
margin-right: 0px;
}
/
* ==========================================================
* Container
* ==========================================================
*/
body {
min-width: 1000px;
}
.container-12 {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
I've got this working now. I
I've got this working now.
I just needed to shrink the content using the tool provided in the link , setting the column width a bit smaller. Which is what I was advised right at the beginning of the thread by kgertz .
By increasing the size of the gutter (usuing the tool), it increases the size of the margin (left and right) automatically as well using the tool.
Having a nightmare changing the .png to go with the new grid, if anyone can advise then let me know.
col width 40, gutter width 40, #cols 12.
sorry about all the emails.