Using multiple stylesheets

[Don Chambers]

I must be missing something very elemental here.

My presumption is that style.css is loaded from the template name folder by default. That is correct, right?

If so, why would <link rel="stylesheet" type="text/css" href="{serendipity_getFile file="style.css"}" /> NOT work? I don't want that particular line of code, but I am surprised that it does not really work.

I see Dave using this in the coffee theme:

Code: Select all

{if $template_option.colorset == 'blue'}
<link rel="stylesheet" type="text/css" href="{serendipity_getFile file="blue.css"}" />
{elseif $template_option.colorset == 'cappuccino'}
<link rel="stylesheet" type="text/css" href="{serendipity_getFile file="cappuccino.css"}" />
{elseif $template_option.colorset == 'espresso'}
<link rel="stylesheet" type="text/css" href="{serendipity_getFile file="espresso.css"}" />
{else}
<!-- ****** Change default Colorset here ****** --> 
<link rel="stylesheet" type="text/css" href="{serendipity_getFile file="blue.css"}" />
{/if}

Each of the specified css files is nearly identical. Each contains a comment identifying the specific css file. However, when I change the css file being used, I do not see the different css file loaded when I view it using EditCSS.... looks like style.css is still being loaded, even though, for example, "cappuccino.css" styles are being applied.

What am I missing here?

Also - if a stylesheet *IS* specified, shouldn't there be something to STOP style.css from loading, if it exists in the template folder?

[Don Chambers]

I do not know if this helps the discusssion, but using firebug, normally when I see errors listed (such as the pngbehavior), they are referenced as "index.php" and show the contents of serendipity.css.

with <link rel="stylesheet" type="text/css" href="{serendipity_getFile file="style.css"}" />, not only do I see these usual errors, but I see them listed a second time, PLUS it trips on the following CSS line that does not usually produce any error:

direction: {LANG_DIRECTION};

With the exception of the above, the errors are duplicate error messages, as if there are 2 style sheets..... this HAS to be so ridiculously simple that I am going to shoot myself when someone explains it to me!!

[garvinhicking]

Hi!

Did you check your index.tpl template if you still have the Serendipity stylesheet reference in there?

Usually the customized stylesheet you load should not be the full stylesheet, but only the minor changes you need to load ADDITIONALLY to the original stylesheet to have different colorsets. So your own <link rel='stylesheet'> does not REPLACE the original one (if you leave it in), but it is simply loaded, too.

Then, if you load the CSS file directly via the HREF, then the CSS file is loaded as is. Only the serendipity stylesheet that's embedded via

Code: Select all

<link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />

will actually be carried through the PHP preprocessor so that constants are replaced. Any custom CSS you load manually via a HREF are not allowed to have any variables, sine they are loaded as-is. You need to enter paths there manually, without variable substitution. This way you also won't have the LANG_DIRECTION available there.

You can keep that in your global style.css though, sine if you don't remove it that one is still loaded. Only your customized additional CSS might set things differenty, but usually you don'T need to change LANG_DIRECTION.

HTH,
Garvin

[Don Chambers]

Thanks Garvin - Let me use Dave's coffee cup 3 template again as an example. His template folder contains 4 css files - these files appear to be identical except that tags have been modified as necessary to make whatever styling change he wanted. Everything else is a duplicate... it is not like he has style.css with all the core stuff in it, then loads a default additional css on top of that.

[garvinhicking]

Hi!

If the blue.css etc. contains all the stuff that style.css contains, then this theme is not a good example

The way it should ideally work is:

* Let style.css contain everything that's common for all colorsets
* Additionally load a .css file depending on each colorset, only

Best regards,
Garvin

[Don Chambers]

OK - you are saying they should be complimentary to one another and not contain redundant tags.... I'll get to a separation ASAP, but for now, wouldn't it be the case that a) style.css is loading by default, b)I am loading an exact duplicate names ltgrey.css (not because I WANT a duplicate, merely because I am preparing for stylesheet options) c) because it is a duplicate, all the tags loaded by style.css are replaced by the tags in ltgrey.css (which happen to be identical).

If everything I just said is true (and makes sense), then why don't any of my background graphics load? Something to do with what you said about variables?

[garvinhicking]

Hi!

Yes - style.css is loading by default, because of that line:

Code: Select all

<link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" /> 

If everything I just said is true (and makes sense), then why don't any of my background graphics load? Something to do with what you said about variables?

That I can't really tell, I'd have to see the URL live to check how things are loaded, and if their URL resolves properly.

Best regards,
Garvin

[Don Chambers]

Check your PM inbox.

[Don Chambers]

OK, I have 1) style.css, 2) ltgrey_style.css, an near duplicate containing one additional comment line containing /* this is ltgrey_style.css */

These sheets make heavy use of background images.

With no <link> other than <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" /> , everything is fine.

If I add <link rel="stylesheet" type="text/css" href="{serendipity_getFile file="ltgrey_style.css"}" />, I loose my background graphics AND when I view using EditCSS, I do NOT see my additional comment line that should be in ltgrey_style.css.

This would be stupid, but if I add <link rel="stylesheet" type="text/css" href="{serendipity_getFile file="style.css"}", the problem is the same.

If I add <link rel="stylesheet" type="text/css" href="{serendipity_getFile file="blue.css"}", which does NOT EXIST, the problem is the same.

[garvinhicking]

Hi!

Could it be your ltgrey_style.usse uses {TEMPLATE_PATH} or something like that variable? That could be the reason of disappearing graphics, because those variables are not substituted (explanation see above).

Regards,
Garvin

[Don Chambers]

Yup - I am using {TEMPLATE_PATH}, and my message above is in error - what I was not noticing was that EditCSS shows the 2 style sheets loaded one after the other. I thought it presented things as a consolidation of the 2, showing only what was different.

Must be the {TEMPLATE_PATH}, which would certainly isolate the issue to background graphics.

So, if the background graphics can only use {TEMPLATE_PATH} in my global style.css sheet to work, how do I incorporate background graphics into the additional stylesheets? These graphics are the most significant item of change from one colorset to another.

[garvinhicking]

Hi!

Since the addiotnal style sheets are referenced directly inside the CSS directory (instead of being in the base directory when style.css is loaded through PHP) you can use relative paths for all background images in additionally linked CSS files, like:

Code: Select all

.yourclass {
background-image: url(img/mypic.gif);
}

So you don't need to use {TEMPLATE_PATH} as your CSS is already within that directory.

HTH,
Garvin

[Don Chambers]

Hi!

Since the addiotnal style sheets are referenced directly inside the CSS directory (instead of being in the base directory when style.css is loaded through PHP) you can use relative paths for all background images in additionally linked CSS files, like:

Code: Select all

.yourclass {
background-image: url(img/mypic.gif);
}

So you don't need to use {TEMPLATE_PATH} as your CSS is already within that directory.

HTH,
Garvin

Does not work in EditCSS as you describe. I will need to do a whole lot of editing before I know whether or not it works in the css files that way.

EDIT: url('templates/template_folder_name/img/mypic.gif') works in EditCSS. Note the quotes and the path all the way to templates. This is not very desirable since I could easily move this stuff around, or possibly rename the template folder.

[garvinhicking]

Hi!

EDIT: url('templates/template_folder_name/img/mypic.gif') works in EditCSS. Note the quotes and the path all the way to templates. This is not very desirable since I could easily move this stuff around, or possibly rename the template folder.

You sure you try that in the CSS you additionally load? Don't try it in the main style.css, there it won't work.

CSS files when called MUST recurse into their subdir. It would be helpful for things like that in the future if you could create your test-blog online somewhere.

Bestregards,
Garvin

[Don Chambers]

Hi!

EDIT: url('templates/template_folder_name/img/mypic.gif') works in EditCSS. Note the quotes and the path all the way to templates. This is not very desirable since I could easily move this stuff around, or possibly rename the template folder.

You sure you try that in the CSS you additionally load? Don't try it in the main style.css, there it won't work.

CSS files when called MUST recurse into their subdir.

Yes, I'm sure. To be sure, using EditCSS, I deleted the main style.css, so all I was left with was ltgrey_style.css. That is where I was making the changes to see what would work.... and it only worked as I described.

It would be helpful for things like that in the future if you could create your test-blog online somewhere.

Bestregards,
Garvin

I didn't start out on this path thinking I was going to become a template designer, but I am slowly being coaxed into it!!! For starters, I'll probably set up a subdomain on my boating site. Not idea, but good enough for this.