Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

maniqui
Member
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 3,070
Website

[howto] loading section-specific stylesheets

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)


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

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

utamu
Member
From: upstate NY, USA
Registered: 2006-12-05
Posts: 20

Re: [howto] loading section-specific stylesheets

Right on time with this maniqui :)

Offline

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

Mary
Sock Enthusiast
Registered: 2004-06-27
Posts: 6,236

Re: [howto] loading section-specific stylesheets

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');

Offline

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

masa
Member
From: Asturias, Spain
Registered: 2005-11-25
Posts: 1,091

Re: [howto] loading section-specific stylesheets

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?

Offline

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

maniqui
Member
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 3,070
Website

Re: [howto] loading section-specific stylesheets

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.


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

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

els
Moderator
From: The Netherlands
Registered: 2004-06-06
Posts: 7,458

Re: [howto] loading section-specific stylesheets

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 ;)

Offline

Board footer

Powered by FluxBB