Jump to content

Simple Loading of Template Specific CSS file Tutorial


EyeDentify
 Share

Recommended Posts

Simple example for loading template specific CSS file.

This example asumes that you have your CSS file in a directory relative to template root.

Like:
templates/css/my_template_specific.css

Also i use in the template a simple text field to hold the name of the CSS file i want to load.
I call this field 'css_file'

Use what you feel comfortable with.

So in your header section of the DOM notice the "page specific CSS" part?
Thats were the magic happens. What happens is that we check to see if the file exists in the CSS dir relative to template root.
And if it does we load it. Simple and effective.

I load all other CSS that is used all over the site in global_styles.css first.
And make sure you load template specific last, because then you can easily override CSS in global.

 

DOM header example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    
    <title><?PHP echo($page->title); ?></title>
        
    <!-- main CSS -->
    <link rel="stylesheet" href="<?PHP echo($config->urls->templates); ?>css/global_styles.css">
    
    <!-- page specific CSS -->
    <?PHP
    /* Use relative path in file_exists() */
    if(file_exists('css/' . $page->css_file)) {
        echo("<link rel=\"stylesheet\" href=\"{$config->urls->templates}css/{$page->css_file}\">");
    }
    ?>
</head>
<body>

Thats my way of doing it. I am sure there is plenty of more ways to do it. This is for the newbies or anyone that wants more options.
Good luck with your CSS out there in Cyberspace.

Cheers from EyeDentify

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...