How to include CSS files selectively in a smart way
Dear All, We are currently developing a somewhat complex community site using Drupal 6. Since we are still within "Drupal's learning curve" we are going through some code re-architecture right now. When it comes to CSS files, we are trying to apply as much as possible the following rule: "every page has 2 CSS files: one general that applies to every page and one specific for each page or group of pages". That is similar to what is explained and illustrated here: http://css-tricks.com/unique-pages-unique-css-files/ We have already divided conceptually all our site pages into different parts; each of these parts will be styled through one general plus one specific CSS file as much as possible. That seems to make sense so far... The issue we are facing right now is... HOW DO WE INCLUDE DIFFERENT CSS FILES INTO DIFFERENT PAGES? 1) Our current approach Using different template files (i.e. page-xxx.tpl.php). I do not think this is good because: - We have 28 template files at the moment. Every time we make a small change on the HEADER, FOOTER or any common part across the whole site... we need to modify *a lot* of files to accommodate that change. - The way we are including files is using a direct link (i.e. adding lines like that to the template file: <link type="text/css" rel="stylesheet" media="all" href="<?php echo $theme_path.'/myhomebox.css'?>">). I think this is not good either BECAUSE Drupal's CSS OPTIMIZER will not include this files on its queue. So these files cannot be optimized with the built-in mechanism... 2) How about CSS INJECTOR? We are right now exploring on CSS INJECTOR (http://drupal.org/project/css_injector) module. The module is pretty cool, allows you to "inject" (:-p) CSS files on pages following rules. The "basic" rules are URL based. Unfortunately that is not enough for us BECAUSE we have pages with similar URL that render different content. Example: /node/$nid. So we could then use CSS INJECTOR's *expert* mode where you can write your own PHP to decide if the CSS file gets in. But I wonder... How about the overhead of this? I mean, surely we can see what can of node is any given node_id... but that means we need to load the node again on the injector level then again for rendering the page? For now we have decided to include our GENERAL MAIN CSS FILE that applies to *every* page using CSS INJECTOR. Then we do not know how to smartly include our specific CSS file depending on what page. I am kind of inclined of trying to get less page-xxxx.tpl.php files and do some sort of conditional checking on them. But there might be other better methods out there. Also, we could try to group styles based on URL then embrace CSS INJECTOR as our css including brain :-P so every page that is /node/* will have node.css files included. This seems a bit awkward from a developer standpoint because it can be that apples and pears both have the same /node/$apple_id and /node/$pear_id url thus using the same CSS file. The email is getting a bit long. I think the discussion can be interesting. ANYONE KNOWS ANY GOOD APPROACH TO GET THIS GOING? ANY THOUGHTS? Thank you so much, unai
If it were me I'd develop my own custom logic to set a variable about which css files should be inlcuded using the template variables hook, and then connditionally include the css files in the page.tpl file. Short of building acustom module, this seems like the easiest approach. Dave -----Original Message----- From: support-bounces@drupal.org [mailto:support-bounces@drupal.org] On Behalf Of Unai Rodriguez Sent: Tuesday, November 03, 2009 11:55 PM To: Support Subject: [support] How to include CSS files selectively in a smart way Dear All, We are currently developing a somewhat complex community site using Drupal 6. Since we are still within "Drupal's learning curve" we are going through some code re-architecture right now. When it comes to CSS files, we are trying to apply as much as possible the following rule: "every page has 2 CSS files: one general that applies to every page and one specific for each page or group of pages". That is similar to what is explained and illustrated here: http://css-tricks.com/unique-pages-unique-css-files/ We have already divided conceptually all our site pages into different parts; each of these parts will be styled through one general plus one specific CSS file as much as possible. That seems to make sense so far... The issue we are facing right now is... HOW DO WE INCLUDE DIFFERENT CSS FILES INTO DIFFERENT PAGES? 1) Our current approach Using different template files (i.e. page-xxx.tpl.php). I do not think this is good because: - We have 28 template files at the moment. Every time we make a small change on the HEADER, FOOTER or any common part across the whole site... we need to modify *a lot* of files to accommodate that change. - The way we are including files is using a direct link (i.e. adding lines like that to the template file: <link type="text/css" rel="stylesheet" media="all" href="<?php echo $theme_path.'/myhomebox.css'?>">). I think this is not good either BECAUSE Drupal's CSS OPTIMIZER will not include this files on its queue. So these files cannot be optimized with the built-in mechanism... 2) How about CSS INJECTOR? We are right now exploring on CSS INJECTOR (http://drupal.org/project/css_injector) module. The module is pretty cool, allows you to "inject" (:-p) CSS files on pages following rules. The "basic" rules are URL based. Unfortunately that is not enough for us BECAUSE we have pages with similar URL that render different content. Example: /node/$nid. So we could then use CSS INJECTOR's *expert* mode where you can write your own PHP to decide if the CSS file gets in. But I wonder... How about the overhead of this? I mean, surely we can see what can of node is any given node_id... but that means we need to load the node again on the injector level then again for rendering the page? For now we have decided to include our GENERAL MAIN CSS FILE that applies to *every* page using CSS INJECTOR. Then we do not know how to smartly include our specific CSS file depending on what page. I am kind of inclined of trying to get less page-xxxx.tpl.php files and do some sort of conditional checking on them. But there might be other better methods out there. Also, we could try to group styles based on URL then embrace CSS INJECTOR as our css including brain :-P so every page that is /node/* will have node.css files included. This seems a bit awkward from a developer standpoint because it can be that apples and pears both have the same /node/$apple_id and /node/$pear_id url thus using the same CSS file. The email is getting a bit long. I think the discussion can be interesting. ANYONE KNOWS ANY GOOD APPROACH TO GET THIS GOING? ANY THOUGHTS? Thank you so much, unai -- [ Drupal support list | http://lists.drupal.org/ ]
I want a site administrator to be able to configure a theme and select different banners/color combinations by adding a css file based on what they select. I added three choices to the theme's configuration page by adding this to the theme-settings.php file: function graphicDesign_settings(&$saved_settings) { $defaults = array( 'banners' => 'red-blue', ); $settings = array_merge($defaults, $saved_settings); $form['banners'] = array( '#type' => 'select', '#options' => array( 'red-blue' => 'Red/Blue', 'blue-gray' => 'Blue/Gray', 'white-gray' => 'White/Dark Gray'), '#default_value' => $settings['banners'], '#title' => t('Choose a Banner Color Combination'), ); return $form; } In the template.php file, I'm trying to use the variable passed to add a css file based on what they select. In the template.php file: function graphicDesign_preprocess_page(&$vars) { $banners = theme_get_setting('banners'); drupal_set_message(print_r($banners,true)); switch($banners) { case ("white-gray"): drupal_add_css(path_to_theme() . '/white-gray.css', 'theme', 'all'); break; case ("blue-gray"): drupal_add_css(path_to_theme() . '/blue-gray.css', 'theme', 'all'); break; default: drupal_add_css(path_to_theme() . '/red-blue.css', 'theme', 'all'); break; } } Is anyone doing something similar and could help me? Thanks, Tracey -- Tracey Hummel Web Developer University Information Technology Services Learning Technologies Services University of Arizona (520) 626-5139 tracey@uainfo.arizona.edu
This is what I'm currently doing in template.php: function [themename]_preprocess_node(&$vars, $hook) { if ($vars['type'] == 'adcoupon') { // Node type is 'adcoupon' drupal_add_css(drupal_get_path('theme','[themename]').'/adcoupon.css','theme'); } In this case the node type (adcoupon) is actually a cck type. I have the specific css file in the theme directory. On Wed, 2009-11-04 at 00:55 -0700, Unai Rodriguez wrote:
Dear All,
We are currently developing a somewhat complex community site using Drupal 6. Since we are still within "Drupal's learning curve" we are going through some code re-architecture right now.
When it comes to CSS files, we are trying to apply as much as possible the following rule: "every page has 2 CSS files: one general that applies to every page and one specific for each page or group of pages". That is similar to what is explained and illustrated here:
http://css-tricks.com/unique-pages-unique-css-files/
We have already divided conceptually all our site pages into different parts; each of these parts will be styled through one general plus one specific CSS file as much as possible. That seems to make sense so far...
The issue we are facing right now is... HOW DO WE INCLUDE DIFFERENT CSS FILES INTO DIFFERENT PAGES?
1) Our current approach
Using different template files (i.e. page-xxx.tpl.php). I do not think this is good because:
- We have 28 template files at the moment. Every time we make a small change on the HEADER, FOOTER or any common part across the whole site... we need to modify *a lot* of files to accommodate that change. - The way we are including files is using a direct link (i.e. adding lines like that to the template file: <link type="text/css" rel="stylesheet" media="all" href="<?php echo $theme_path.'/myhomebox.css'?>">). I think this is not good either BECAUSE Drupal's CSS OPTIMIZER will not include this files on its queue. So these files cannot be optimized with the built-in mechanism...
2) How about CSS INJECTOR?
We are right now exploring on CSS INJECTOR (http://drupal.org/project/css_injector) module. The module is pretty cool, allows you to "inject" (:-p) CSS files on pages following rules. The "basic" rules are URL based. Unfortunately that is not enough for us BECAUSE we have pages with similar URL that render different content. Example: /node/$nid. So we could then use CSS INJECTOR's *expert* mode where you can write your own PHP to decide if the CSS file gets in. But I wonder... How about the overhead of this? I mean, surely we can see what can of node is any given node_id... but that means we need to load the node again on the injector level then again for rendering the page?
For now we have decided to include our GENERAL MAIN CSS FILE that applies to *every* page using CSS INJECTOR. Then we do not know how to smartly include our specific CSS file depending on what page.
I am kind of inclined of trying to get less page-xxxx.tpl.php files and do some sort of conditional checking on them. But there might be other better methods out there.
Also, we could try to group styles based on URL then embrace CSS INJECTOR as our css including brain :-P so every page that is /node/* will have node.css files included. This seems a bit awkward from a developer standpoint because it can be that apples and pears both have the same /node/$apple_id and /node/$pear_id url thus using the same CSS file.
The email is getting a bit long. I think the discussion can be interesting.
ANYONE KNOWS ANY GOOD APPROACH TO GET THIS GOING? ANY THOUGHTS?
Thank you so much, unai
participants (4)
-
Metzler, David -
Scott -
Tracey Hummel -
Unai Rodriguez