Remove all core and contrib CSS

I don't think unsetting all contributed module's CSS would help since they are so specific. Just having a look at the .css files in a typical project find . -name *.css | xargs cat shows that it would be impossible to account for everything within a theme.

However, unsetting all core stylesheets sounds like a really good plan as this theme could easily take care of it.

So we would have the ability to include and exclude any we choose? That could be an option then.

I see. This could be very useful then.

I imagine we could do the same for contrib:

1. Copying the original module.css file into blueprint/css/modules/module.css.
2. Removing presentational properties that are already covered by Blueprint or otherwise hamper the theme styles.
3. Add the name of the .css file to the include/exclude function so our new file takes over.

This would cut down on all those redundant rules that are only going to be overridden by the theme.

Is this how you see it working?

Great stuff, I'm sick of seeing so much cruft with all the redundant rules. We should definitely add this.

I don't use this theme... Just was intrigued by the title in the global tracker. I'd definitely say -1 to removing all module CSS unless you want complaints from advforum users. ;)

Michelle

Hi Michelle, I agree that removing all module CSS would be pretty dumb but since it's going to be optional to do this and given the method above it seems to me like a great idea.

For most modules with minimal theming, yeah, but it wouldn't work well with advforum. If it's optional, I guess advforum users would just opt out of it, then.

Michelle

There are even 2 levels of optional. First the function is commented out in template.php therefore setting it to completely disabled by default. Then, if the developer decides they would like to optimise their theme they need to follow the steps outlined in #5.

You should try this theme, it's really nice and would be great to have comments from you on how blueprint and advforum play together.

"would be great to have comments from you on how blueprint and advforum play together."

Haven't tried it but I can guarantee they won't place nice together out of the box. See this issue for details.

I don't have time for any theming stuff right now. Just was intrigued by the title of this issue.

Michelle

Previous to this theme's release, my team and I were using Blueprint CSS extensively. We decided to override ALL css from core and modules by removing them from _phptemplate_variables. We did this to have granular control over all css, per client needs. For extreme cases like ours, this was a HUGE improvement for customization.

I am testing this theme (well done!) now so my/our opinion may change...

This was our function (not as sexy as m3avrck's):

function _phptemplate_variables($hook, $vars = array()) {

	/**
	* Disable all core css for anonymous users, loading theme css ONLY
	* if a user is logged in, render css as normal - mostly for admins (do we even need this?)
	*/
	
	if (is_array($vars['css']['all']['module']) && $user->uid == 0) { // if user is not logged in
		$vars['css']['all']['module'] = array(); // empty core css array
	}
	$vars['styles'] = drupal_get_css($vars['css']); // add only theme css styles
	
      // include these modules
      //$modules_to_include = 'service_links';
      //if (module_exists($modules_to_include)) {
      //  $vars['service_links'] = theme('links', service_links_render($vars['node'], TRUE));
      //}

  return $vars; // final output for _phptemplate_variables
  
}

For sites using special modules like advforum we grabbed and changed the css from the module and included within our custom styles doc. This is easier than #5 I think.

Speaking of which, advforum's css has a lot of redundancy. Not a slam, just had to condense it for our purposes.

Using the code in #1, I just finished writing the 'exclude' part of this. It gives the user a section on the theme settings page and then allows them to check which css file they want to exclude from the page. This allow some fine grained control of what gets removed and what is allowed to stay.

Now we need to work on creating the css files the css files that go into the them to replace the core styles. I haven't written the 'include' part of the UI yet, but i was just thinking it could be done with either a single checkbox to replace the selected 'core' css with the blueprint versions or we could possibly read through the folder blueprint css folders and list the files available for inclusion.

Anyone have any comments on this?

I really like the idea of being able to unset the core CSS. But, we should preserve module css in most situations. We could add a config tool that allows you to pick which module css to enable or disable. If a developer bothers to write special css for their module it's almost always near essential. At least in my experience.

I think it is imperative that you be able to choose what gets removed and what stays in your theme. The version I have running right now only gives you options to disable core css files. Adding the others won't be too hard.

Honestly, I think a great functionality would be for the template.php to check and see if a module css already exists in the template's directory, and if so, use that one. I aggregate and minify all my css, so I'm not totally sold on managing multiple css files from the contents of one long file (ie copy/pasting content into my main template css)... or keeping up with what styles I have to remove and maintain whenever I remove an old worn out module. Core already does this in some capacity with the tpl files, why not just add the ability to do the same by copy/pasting a css file from modules, not just from themes?

...just realized the long drawn out way that all you need to do is add the css file to your theme and drupal core takes care of excluding the module's css file automatically.

@epiphanydigital: That's already a feature of core. Just add the .css file to your theme's .info file.

Michelle

Thanks Michelle, ha, would've saved me 45 minutes to have refreshed this page 45 minutes ago when you posted that! :-P

I don't think that is a good idea to remove the CSS files used by third-party modules, even it is something the administration users can enable at their pleasure. It would impair those modules that need some CSS styles more, and administration users are not aware of which modules use extra CSS styles (would we suppose they check the code of all the modules they use?).

To make an example, suppose you install Views, which implements some JavaScript code to make the page more dynamic; if you remove the CSS styles it adds, its settings page will not properly work.

Here's an info file that eliminates all core styles for 6.x. I won't argue whether or not this is a good idea just yet - but I had a very specifically themed site where I want to try this out.

Hi Greg,

Thanks for sharing this, interesting approach.

Kees

Moving this forward to the 2.x branch.

http://drupal.org/project/stylestripper

subscribe

I'm unable to use @font-your-face module because (I think) of this issue. For grid designers who are interested in typography, this is a big setback. Is there any update on addressing/fixing this in the theme?

Thanks!

my issue with fontyourface has been resolved...it was unrelated to this issue.

subscribe

updated for D7:

<?php

/**
 * Helper function to allow easy CSS excludes + includes
 */
function _phptemplate_get_css($exclude = array(), $include = array()) {
	$css = drupal_add_css();
	foreach ($exclude as $path) {
		unset($css[$path]);
	}
	foreach ($include as $file) {
		$css[path_to_theme() .'/'. $file] = true;
	}
	return drupal_get_css($css);
}

with example: in html.tpl.php:

<!DOCTYPE html>
<html>

<head>
  <?=$head?>
  <title><?=$head_title?></title>
  <?#=$styles?>
  <?=_phptemplate_get_css(array(
    #'sites/all/themes/mytheme/css/style.css',
    'sites/all/modules/ctools/css/ctools.css',
    'sites/all/modules/panels/css/panels.css',
    'modules/system/system.base.css',
    'modules/system/system.menus.css',
    'modules/system/system.messages.css',
    'modules/system/system.theme.css',
    'modules/comment/comment.css',
    'modules/field/theme/field.css',
    'sites/all/modules/logintoboggan/logintoboggan.css',
    'modules/node/node.css',
    'modules/search/search.css',
    'modules/user/user.css',
    'sites/all/modules/views/css/views.css',
    'sites/all/modules/panels/plugins/layouts/onecol/onecol.css',
    'misc/ui/jquery.ui.core.css',
    'misc/ui/jquery.ui.theme.css',
    'sites/all/modules/context/plugins/context_reaction_block.css'
  ))?>
  <?=$scripts?>
</head>
<body class="<?=$classes?>" <?=$attributes?>>
  <?=$page_top?>
  <?=$page?>
  <?=$page_bottom?>
</body>
</html>

Thanks Mike! Little note: PHP tag style is php > 5.4 .