ExpressionEngine® Answers is a question and answer site for administrators, end users, developers and designers for ExpressionEngine® CMS. It only takes a minute to sign up.
Sign up to join this community
I have four different channels and three different channel-specific CSS files (two get the same CSS). What's the best way to go about loading these CSS files depending on the channel?
NOTE: I'm using Structure, so my URI won't necessarily contain the channel information.
I think the easiest way would be to make sure that your call to the css file is within your channel entries loop and that you name your css files the same as your channel short names.
{exp:channel:entries limit="1"}
<head>
<link href="path/to/css/folder/{channel}_styles.css" rel="stylesheet" />
</head>
<body>
{title}
{other_channel_fields}
</body>
{/exp:channel:entries}
In this example your css file name would be "blog_styles.css" and your channel would be "blog" for the sylesheet that is shared across multiple channels I would create a stylesheet for each channel shortname then I would @import another css file so you are not duplicating the styles across 2 templates.
If you are not serving a single entry make sure that you wrap your css file declaration in {if count == 1} like
{exp:channel:entries}
<head>
{if count == 1}
<link href="path/to/css/folder/{channel}_styles.css" rel="stylesheet" />
{/if}
</head
{/exp:channel:entries}
I should also mention that you could also use the channel name in a conditional to load specific files.
{exp:channel:entries}
<head>
{if channel == "blog"}
<link href="path/to/blogs_css_file.css" rel="stylesheet" />
{/if}
{if channel == "about"}
<link href="path/to/about_css_file.css" rel="stylesheet" />
{/if}
</head>
{/exp:channel:entries}
It depends how your templates are put together, but in my case, I have a single embedded template which contains the overall layout so I would pass an embed variable e.g.
{embed="layout" css_file="your_file"}
and then in the layout template:
{if embed:css_file}<link href="{embed:css_file}">{/if}
Structure has a bunch of really useful global variables, which would make this even easier than using Stash or anything else really. Something like this:
<link href="/assets/css/{structure:page:channel}.css" rel="stylesheet" />
or if the channel name is not a 1:1 relationship...
{if structure:page:channel == "blue"}<link href="/assets/css/the-blue.css" rel="stylesheet" />{/if}
You might need to use some stash magic to pull out the channel url_title and make sure you can put that in the CSS file name or use switchee to check cases and assign a specific CSS file is that condition is made.
Note: I don't think you've given us enough information to really give you a more complete answer. Can you give us a little more about your channel naming convention and the Structure URIs you have planned?
This is a situation where I would use Stash.
Following the Template Partials using Stash method, your wrapper template would be embedded in the template for a given page.
Inside the {exp:channel:entries} tag pair, you would set a Stash variable with the channel short name. The template would look something like this:
{embed="inc/.wrapper"}
{exp:channel:entries ... limit="1"}
{exp:stash:set_value name="channel" value="{channel_short_name}"}
...
{/exp:channel:entries}
Then, the wrapper template could simply use the channel Stash variable to set the name of the CSS file:
<html>
<head>
<link href="path/to/{exp:stash:get name="channel"}.css" rel="stylesheet" />
...
This works very similarly to the {embed=} method above, except it works a bit more efficiently using Stash.
