Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Passing Stylesheet

June 28, 2012 3:23pm

Subscribe [2]

#1 / Jun 28, 2012 3:23pm

vw000
482 posts

I have some pages that require extra style sheets that only apply for that specific page.

My headers are embed via EE and I have a question about what would be the best approach for this. The problem is that if I add the CSS to the header it will be loaded on every page on the whole site, which is completely unnecessary as they apply for only 1 page.

The solution I do now is to actually add the style sheet directly in the body but of course this is not valid HTML, as they should be in the between header tags.

Is there a way to pass the style sheet to the header dynamically from my page? This way the style sheet gets loaded in the header correctly but only for this page and not every single page that is loaded?

I know you can pass data wit embed, but Im not sure how this could work in my case. How are you guys handling this? I don´t think you are actually putting all styles for the whole site in the headers if they are not in use as this would cause pages to load slow if you include all styles there, even if some are only used once in some pages and are not global styles.
#2 / Jun 28, 2012 9:47pm
MadWebDesigns
147 posts
Hi Nibb,

There are 2 ways you can do this with EE:

Option-1:
- Use {if}{/if} statements in the header template to check if the page you want to load the specific css should display or not.

Option-2:
- Setup a snippet called something like “snippet_mycustomcss” or what ever you want to call it that has your full style tag like:
```
<link rel="stylesheet" href="/css/style3.css" type="text/css" media="screen" />
```
Then in your template where you want to use the different style sheet use the embed tag with a parameter like so:
```
{embed="includes/header" style='{snippet_mycustomcss}'}
```
To pass the style tag to the header template if you want to display the custom css for the page you need it for. This is handy because if you leave the style=”” parameter blank nothing will display in the header and you can specify which page you want the css to display on. Your header code will look something like this:
```
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="/css/style1.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/style2.css" type="text/css" media="screen" />
...
{embed:style}
...
</head>
...
```
Personally I like Option-2 as it’s cleaner but it’s up to you which way you want to do it. I hope that helps.

Mike
#3 / Jun 29, 2012 9:46am

vw000
482 posts

Thanks option 2 was exactly what I was looking but I got errors or it was double embedding things. I was not aware you could use the style= in the embed. This is what I was looking.

The only small issue with this approach (embed) is that when the CSS is not loaded in other pages instead a blank line is loaded in place. My guess is that this does not affect browsers loading in any way correct? They skip blank lines? Maybe in the future EE can work on this, as if you do this allot you end up with allot of blank lines in parts of your code.

I also see you named the snippet with the name snippet in front. I saw this in other tutorials in order to recognize which one are snippets, which one are global variables, etc. Maybe I should do this as well to know where each code is located.

I also noticed that the snippet will not work if you load the CSS from a EE file like, in case you have the CSS created in EE it seems it does not like this, example:
<link rel=“stylesheet” type=“text/css” media=“all” href=”{stylesheet='styles/custom_css'}” />

I thought snippets allowed variables, but this does not work. It needs to be loaded directly from the server.
#4 / Jun 29, 2012 10:20am
MadWebDesigns
147 posts
Hi Nibb,

Here are the steps for option-2:

1) Create a snippet called “snippet_stylesheet” for example and put your link tag in it like so:
```
<link rel="stylesheet" href="/YourCSSDirectory/YourCSSStyleSheet.css" type="text/css" media="screen" />
```
2) In your page template add a “style” parameter to your header embed tag and put your snippet tag name in the style parameter like so:
```
{embed="includes/header" style='{snippet_stylesheet}'}
```
This will replace the {snippet_stylesheet} tag with the <link… /> you put in your snippet in step 1.

3) In your header template put the following embed tag where ever you want your css to be placed in the html head tags:
```
<head>
...
{embed:style}
...
</head>
```
I hope that helps.

Mike
#5 / Jun 29, 2012 10:24am

vw000
482 posts

Thanks Mike, yes I figured out that, as you can see I edited my previous reply. The reason it was not working in my case is because I was using the CSS tag loading it from EE like this:
<link rel=“stylesheet” type=“text/css” media=“all” href=”{stylesheet=‘styles/custom_css’}” />

And it works only by loading the CSS directly from the server:
href=”/YourCSSDirectory/YourCSSStyleSheet.css”
#6 / Jun 29, 2012 11:31am

MadWebDesigns
147 posts

I’m glad you got it working. For me personally I like having my CSS files as standard style.css file and not EE style sheets. It’s just a preference for me. There is no wrong or right way of doing it. But in this case not sure why your {stylesheet='styles/custom_css'} is not working in the snippet?
#7 / Jun 29, 2012 11:40am

vw000
482 posts

Now its not. It seems the reason is because, the template is actually embedding the snippet, which is then loaded in the header. Using {stylesheet=‘styles/custom_css’} in the snippet itself would cause EE to first, load the CSS internally, then load it in the template which then loads in the header. I suspect this is the reason why its not working, to much overheat maybe? Or maybe it cannot find it the path, I did tried both several options like
{stylesheet=‘styles/custom_css’}
And
{stylesheet=‘custom_css’}

Linking to the CSS directly works.