How to include CSS files selectively in a smart way

[Unai Rodriguez-2]

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/ ]

[Metzler, David]

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@... [mailto:support-bounces@...] 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/ ]
--
[ Drupal support list | http://lists.drupal.org/ ]

[Tracey Hummel-2]

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
[phone]
tracey@...






--
[ Drupal support list | http://lists.drupal.org/ ]

[Scott-258]

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
>
>

--
[ Drupal support list | http://lists.drupal.org/ ]