Most themers won't have to deal with these options but I'm putting this out here just in case you find it useful. These notes will also be added to the 1.5 beta release. The next version will be v1.5 since there there's quite a bit of functionality added since v1.0. Version 2 will go even further.

CSS floats

The theme no longer relies on style sheets being placed within the "framework" folder to have them loaded before all the other styles. There's a .info setting to target each file and it's already set from Your subtheme won't have to deal with this but you can add to this "float" setting through your subtheme's .info file and the css doesn't even have to live in your theme. You can direct a module style for example. Why is this needed? To setup early generalized cascading rules. Use names only, no paths.

css floats[] = defaults.css
css floats[] = system.css

CSS grid options

There are multiple versions of the grid framework. This is to make it easy to switch to a version that fits the design of your theme. This can minimizing the size of the stylesheet if you only need a 12 column version for example.

The default is the combined 12 and 16 columns but you can switch between the following:

  • grids.css (default 12 + 16 columns)
  • grids-12-col.css
  • grids-16-col.css
  • grids-24-col.css

To select a specific version, set one of the following in the .info file of your subtheme. You can only pick one.

; 960.css (default 12 + 16)
settings[960 columns] = 12+16

; 960-12-col.css
settings[960 columns] = 12

; 960-16-col.css
settings[960 columns] = 16

; 960-24-col.css
settings[960 columns] = 24

If the options doesn't fit your needs, you can extend it from your subtheme's .info like so. You can add as many as you wish. All existing presets will still be selectable making it easy to switch between them. This can be useful in early stages of development where you might be experimenting between column widths.

; define the style
stylesheets[all][] = 960-18-col.css

; set the option. names only, no paths.
css grid options[18] = 960-18-col.css

; select the option
settings[960 columns] = 18

Disabling styles

The normal procedure for disabling a style is to point it to a non-existing file. I found this to be counter intuitive since the 'stylesheets' key served multiple purposes. If the file was there, it would add it, possibly performing an override. If the file was missing, it prevents a module style or base theme style from loading.

This optional key is a lot more clear on what it's supposed to do since it has only one purpose. The style sheet can live anywhere. If it's set here, it will not load. Simple. Use names only, no paths.

css remove[] = style.css

Debugging styles

NineSixty comes with an improved debugging css file for the grid framework. The grids only show on hover.

Enable it from your subtheme's .info with:

settings[960 debug] = 1

If you want to add your own debugging styles that can be switched on and off with the above setting, add the following:

; define the style
stylesheets[all][] = custom-debug.css

; declare it as a debug style. names only, no paths.
css debug[] = custom-debug.css

Once that is set, all the debug styles will load with the single 'settings[960 debug]' switch. You can set as many as you need. If needed, you can also float it with 'css floats[] = custom-debug.css'.

Other notes

  • Any options set through the settings key such as 'settings[960 debug] = 1' can be overridden through the theme api settings. Once setup for it, those options can be changed through web forms in the theme configuration page.
  • The way core handles style sheet overrides can be unpredictable. Copying a module style sheet into your theme overrides it as expected but copying a style from a base theme to a subtheme is a little more tricky since it depends on the directory structure being the same.

    stylesheets[all][] = styles/style.css

    stylesheets[all][] = style.css

    The default behavior is to have both style.css files to load since they point to different relative paths. A more consistent behavior would be for it override based on the file name only. This is what NineSixty does so only the subtheme's 'style.css' file will load.

  • Since there are many options to override and declare settings through file names, each style sheet should have unique names in your theme. Using the same name for styles located in different directories can potentially cause some confusion.
  • The name of the 'styles.css' file in NineSixty has been changed to 'style.css'. This is what's normally used in all other themes and the default file name expected by core.

This is all in the latest 6.x-1.x-dev branch. 7.x-1.x-dev will come after the beta.


Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.