Posted by rolodmonkey on August 7, 2012 at 4:34pm
I would like to use the built-in grids, but I want to override alpha's grid CSS files.
Specifically, I want to make the margins between regions narrower but keep the same overall width. This means recalculating all of the other widths.
To start, my sub-theme is "yul". I was hoping I could just place correctly named files in the yul folder. I have tried css/grid/[pattern1]/narrow/[pattern2]-narrow-16.css, where pattern1/pattern2 are variations of:
- alpha_default/alpha-default
- yul_default/yul-default
- yul_alpha_default/yul-alpha-default
Am I on the right track? Is it even possible to override these files this way?
Comments
My solution
It doesn't look like anyone has a good solution for this yet. Here is what we did:
First, we copied the files we wanted to override into our sub-theme, keeping the path structure.
Then, we changed the margins and widths in each file.
Last, we used a hook in the theme to swap the new files for the old:
<?phpfunction yul_css_alter(&$css) {
$css['sites/all/themes/omega/alpha/css/grid/alpha_default/narrow/alpha-default-narrow-12.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/narrow/alpha-default-narrow-12.css';
$css['sites/all/themes/omega/alpha/css/grid/alpha_default/narrow/alpha-default-narrow-16.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/narrow/alpha-default-narrow-16.css';
$css['sites/all/themes/omega/alpha/css/grid/alpha_default/narrow/alpha-default-narrow-24.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/narrow/alpha-default-narrow-24.css';
$css['sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/normal/alpha-default-normal-12.css';
$css['sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-16.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/normal/alpha-default-normal-16.css';
$css['sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-24.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/normal/alpha-default-normal-24.css';
}
?>
I still think there should be a better way to do this. If anyone discovers it, please let me know.
Learn more at iRolo.net.
no PHP should be necessary
If I understand what you want to do, it can all be done via the .info file and new files; no PHP should be needed:
See Creating and Setting up a Custom Grid for Omega 3.x.
My site has a 16-column grid with zero-width gutters, and all the changes were similar to the writeup above.
Also see: http://drupal.stackexchange.com/questions/13561/how-to-overwrite-omega-9...
Before I started this thread,
Before I started this thread, I found the documentation for creating custom grids. I can see where that would be necessary, if I was creating a grid with a different number of columns, but I thought it was overkill to just change the margins.
More importantly, I will probably end up using at least two different column combinations (16,24 and possibly 12) on this site. That would mean that I would have to go through all of the work of creating two (or three) custom grids.
In my opinion, copying/modifying 6 files and adding 8 lines of PHP code seems to be the cleanest way to do what I want for now.
However, I am still open to suggestions, if there is an even better way.
Learn more at iRolo.net.
<= IE8
Just a note: after testing, I did have to add three more lines, but not three more stylesheets :)
<?php$css['ie::normal::sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/normal/alpha-default-normal-12.css';
$css['ie::normal::sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-16.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/normal/alpha-default-normal-16.css';
$css['ie::normal::sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-24.css']['data'] = 'sites/all/themes/yul/css/grid/alpha_default/normal/alpha-default-normal-24.css';
?>
Learn more at iRolo.net.
same problem here, found an
same problem here, found an alter hook:
perhaps a bit more elegant:
A) copy all the files from alpha/css/grids to your_subtheme/css/grids
B) in your template.php
<?phpfunction your_subtheme_alpha_grids_alter(&$output) {
$output['alpha_default']['path'] = str_replace(drupal_get_path('theme', 'alpha'), drupal_get_path('theme', 'your_subtheme'), $output['alpha_default']['path']);
//and/or
$output['alpha_fluid']['path'] = str_replace(drupal_get_path('theme', 'alpha'), drupal_get_path('theme', 'your_subtheme'), $output['alpha_fluid']['path']);
}
?>
Bravo. Very elegant
Thanks heaps - this is a great help.
I found a theme where our designer had hacked Omega directly, so an upgrade (to clean up for a new subtheme) screwed it all up.
That snippet above allowed me to pull the local changes into the subtheme where it belongs!!
Worked great for me
Just given this a go as I wanted to remove the left/right margins on the fluid grid (.container-12). Having never done anything like this before, it worked great. Thanks :)
duplicate comment
please delete this one, had a dual post :(
Neat! I might try this in
Neat! I might try this in our next round of development.
Learn more at iRolo.net.
Alternate hook is not working
I am trying to override the grid css for "Wide" default layout in my new theme named "originaltheme".
Should I change the 'path' string with actual path starting from /sites/ ... as well?
Or only change my theme name?
I made the change to only my theme name in above code and it renders my site blank.
Is below code OK?
<?phpfunction originaltheme_alpha_grids_alter(&$output) {
$output['alpha_default']['path'] = str_replace(drupal_get_path('theme', 'alpha'), drupal_get_path('theme', 'originaltheme'), $output['alpha_default']['path']);
//and/or
$output['alpha_fluid']['path'] = str_replace(drupal_get_path('theme', 'alpha'), drupal_get_path('theme', 'originaltheme'), $output['alpha_fluid']['path']);
}
?>
What would be the appropriate code to replace at $output['alpha_fluid'] for WIDE layout?
Will it be $output['alpha_default_wide'] ????