[howto] loading section-specific stylesheets

maniqui · 2008-12-06 17:36:49

Hi!

I always find a little odd (because of the way I organize/link stylesheets) the way TXP associates a section to a particular stylesheet.
I usually use the default CSS as a commmon stylesheet across all sections, and then each section (or a group of them) have its own stylesheet assigned on “Presentation -> Sections”.
In other words, sections shouldn’t have the default CSS asigned to them. Instead, sections have assigned a particular stylesheet that usually expands/overrides/complements the default CSS.
So, default CSS is loaded in all (or almost all) sections, and then, if also needed, each section loads its own stylesheet (the one assigned on “Presentation -> Sections”).

So, the code I was using to load stylesheets was this:

<!-- load default CSS in every section -->
<link rel="stylesheet" href="<txp:rvm_css n="default" />" type="text/css" media="all" />
<!-- load section - specific CSS -->
<link rel="stylesheet" href="<txp:rvm_css />" type="text/css" media="all" />

The only “problem” I used to have with that approach was this: if section didn’t have its own stylesheet assigned, it means that the default CSS was assigned to it.
So, then, this usually led to the default CSS being loaded twice in the code. That may not be a problem, but it isn’t very elegant either.
Of course, a few txp:if_section could do the job, but I don’t like to clutter the <head> using too many of them.

But now, with Txp 4.0.7, I can solve this problem :D
This is how I configure this system:

<!-- load default CSS in every section -->
<link rel="stylesheet" href="<txp:rvm_css n="default" />" type="text/css" media="all" />
<!-- assign the CSS URL to a variable -->
<txp:variable name="css" value='<txp:rvm_css n="default" />' />
<!-- check if assigned value is equal to the value of the CSS URL for that section -->
<txp:if_variable name="css" value='<txp:rvm_css />'>
    <!-- do nothing: no specific CSS. This section uses just the default CSS -->
<txp:else />
    <!-- This section has an specific CSS assigned to it -->
    <link rel="stylesheet" href="<txp:rvm_css />" type="text/css" media="all" />
</txp:if_variable>

As you can seen, nothing fancy. And it’s not overkilling either. (BTW, you can replace txp:rvm_css with standard built-in txp:css).
You may find it useful if you manage section-specific stylesheets as I do.

Last edited by maniqui (2008-12-06 17:38:58)

utamu · 2009-01-18 00:56:57

Right on time with this maniqui :)

Mary · 2009-01-18 02:24:35

You could also do this solely via: <txp:css />

You have your global CSS in “default”. Then in your section stylesheets put at the top:

@import url('css.php?n=default');

masa · 2009-01-18 03:23:26

This seems overly complicated to me.

I usually assign the section as a class or ID to the <body> element – <body id="<txp:section />"> – and do all my section-specific css switching in the default style sheet employing descendant selectors – keeps everything neat and tidy in a single css file.

Would that not work for you?

maniqui · 2009-01-18 19:05:25

I think it’s just a matter of preference.

@masa, your approach is fine for me too. I use it sometimes.

One positive thing (others could see it as something negative) of having per-section stylesheets (as a complement to a one default stylesheet) is that you can keep your default CSS small and tidy.

els · 2009-01-18 19:25:33

I have used per-section stylesheets in the past, but often found myself editing the wrong one… So no more small and tidy for me ;)

Textpattern CMS

Textpattern CMS support forum

#1 2008-12-06 17:36:49

[howto] loading section-specific stylesheets

#2 2009-01-18 00:56:57

Re: [howto] loading section-specific stylesheets

#3 2009-01-18 02:24:35

Re: [howto] loading section-specific stylesheets

#4 2009-01-18 03:23:26

Re: [howto] loading section-specific stylesheets

#5 2009-01-18 19:05:25

Re: [howto] loading section-specific stylesheets

#6 2009-01-18 19:25:33

Re: [howto] loading section-specific stylesheets

Board footer