2

For example, my site has 5 CSS files like this...

  <link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_fleet.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_service.css" type="text/css" />
  <link rel="stylesheet" href="/templates/purity_iii/css/custom_corporate.css" type="text/css" />

Every page of the site will be in one of those "categories" (i.e. marketing, gps, fleet, service or corporate). And this is indicated by a class on the HTML tag. So something like this at the top of every page...

<html class="gps">

I currently have EVERY page calling all 5 style sheets listed above, but it only NEEDS the corresponding style sheet, so I'd like to be efficient if possible.

Is there a way using PHP (or whatever makes sense) to essentially search the tag's class for "gps" or "fleet" (etc.) and if, for example, it found "gps", I could then echo only that style sheet, i.e...

echo "<link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />";
Improve this question
6
  • is the class autogenerated? Commented Jun 8, 2015 at 20:25
  • 2
    yes, it's possible. bare bones simplest method: $page_type = 'gps'; include('header_tree'), then have header_tree check for $page_type and output whatever <link> is appropriate. Commented Jun 8, 2015 at 20:25
  • Don't overthink it. Just put all your CSS in one file and reuse as many classes as possible. Commented Jun 8, 2015 at 20:26
  • @rjdown thats a waste, he might not use 90% of the styles Commented Jun 8, 2015 at 20:27
  • Platinum, yes, it's in Joomla CMS and theclasses are autogenerated. I wish rjdown (and agreew with you), but circumstances at work (that I don't agree with) make having separate CSS files necessary Commented Jun 8, 2015 at 20:28

3 Answers 3

Reset to default
3

This totally depends on how PHP generates your HTML. Another possibility is to do this with JavaScript. You can do it like this:

<script type="text/javascript">
var file = 'templates/purity_iii/css/custom_' + document.documentElement.className + '.css';

var link = document.createElement('link');
link.href = file;
link.type = 'text/css';
link.rel = 'stylesheet';

document.getElementsByTagName('head')[0].appendChild(link);
</script>

You can for example place the code above between <head> and </head>. Not really a valid answer to your question (PHP solution), but you could consider this as an alternative.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

This seems like a poor strategy, albeit I don't know the size of your CSS files and other parameters.

How different are these pages as far as their style goes? From the file names above it looks like you might have a lot of redundant (duplicate) CSS selectors in each file. How much of the CSS in each of those files is actually unique? Is it 5k? 10k? 50k? If it's fairly small, go ahead an put it all in one file. By placing it in one file all the CSS for all the pages of your site will be cached in the user's browser and no additional requests would be needed for subsequent pages.

If combining all files and you have a 500k file and 250k is for a single page then splitting it would make more sense.

A PHP Solution

I'm guessing that your setting the CSS class on the <html> tag with PHP. If so, why not check the value of that variable in your PHP script and add the appropriate CSS file.

Something like this: 

<html class="<?php echo $page_class; ?>">
<head>
    <link href="custom_<?php echo $page_class; ?>.css">
</head>

This is advice is fairly general but hopefully it points you in the right direction.

Improve this answer

Comments

1 
try something like

     <?php
     if($page_type = 'gps')
     {
     ?>
     <link rel="stylesheet" href="/templates/purity_iii/css/custom_gps.css" type="text/css" />
     <?php
     }
     elseif($page_type = 'marketing')
     {
     ?>
     <link rel="stylesheet" href="/templates/purity_iii/css/custom_marketing.css" type="text/css" />
     <?php
     }
      ?>
Improve this answer

3 Comments

Not ideal.. Why not just: <link rel="stylesheet" href="/templates/purity_iii/css/custom_<?php echo $page_type; ?>.css" type="text/css" />
I dont know much about joomla, but where is the $page_type var comming from if its autogenerated? i'd go with @Jeroen Noten's javascript on this one, tho its a sacrifice.
This works if he is maybe moving to page via get variable...e.g $page_type = $_GET['page_type']..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.