Separate stylesheets how to

deronsizemore · 2006-09-25 03:37:17

I’m going to start moving my one large CSS file into smaller sections so it’s easier to manage. Problem is I’ve never done this with textpattern.

I assume I do something similar to what I’ve got for my default stylesheet like: <link rel="stylesheet" href="<txp:css />" type="text/css" media="screen" /> but for example if I make a new stylesheet called “layout” how do I call that stylesheet in the head of the document? Just put <txp:layout /> for the “href” or what?

jm · 2006-09-25 04:25:24

It’s a little easier than that.

Create a new stylesheet, layout
In your <head> form/page, duplicate your existing <link rel="stylesheet" href="<txp:css />" type="text/css" media="screen,projection" />
Modify the duplicated one: <link rel="stylesheet" href="<txp:css n="layout"/>" type="text/css" media="screen,projection" />.

You can link to regular .css files too. Also, be sure to use media="screen,projection", or else Opera users will get an unstyled page when in fullscreen.

Last edited by jm (2006-09-25 04:40:04)

deronsizemore · 2006-09-25 13:15:14

Ah, I got it. I assume the “n” stands for the name of the stylesheet?

Told me something I didn’t know about Opera. I normally just use “media=screen.” Guess I need to start adding “projection” in there.

jm · 2006-09-26 00:37:29

Yeah—it is kinda nice to add a few extra features for projection mode, like changing an image gallery’s background to black when in full screen, since Opera’s full screen is so awesome :D.

Mary · 2006-09-26 00:47:19

Ah, I got it. I assume the “n” stands for the name of the stylesheet?

That’s correct.

deronsizemore · 2006-09-26 14:59:33

Something isn’t right when I add <link rel="stylesheet" href="<txp:css n="iestyles" />" type="text/css" media="screen,projection" /> to the head of my page template. Everything is great, but if I add this for my IE styles, a couple of the menus in FF just fall apart. I’ve left it broken so maybe someone will know what’s going on? <a href=“http://www.kentuckygolfing.com”>Kentucky Golfing</a>

I also have <link rel="stylesheet" href="<txp:css />" type="text/css" media="screen,projection" /> for my regular styles. I also tried <link rel="stylesheet" href="<txp:css n="default" />" type="text/css" media="screen,projection" /> but got the same result. I didn’t know if it had some affect because I now had two stylesheets or something so I explicitely named it to “default”

Thanks

Last edited by deronsizemore (2006-09-26 15:01:23)

reid · 2006-09-26 19:07:07

The problem may be in your IE stylesheet. It contains conditional comments, and that won’t work: “Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files.”

So you need to wrap the conditional comments around the link tag in the head of your document that calls the IE stylesheet.

deronsizemore · 2006-09-26 20:07:58

Reid,

That’s the problem then. I was under the impression that I could use another stylesheet for me. I put the IE conditionals in a form and output that form in the head and works fine now! :-)

Thanks.

Last edited by deronsizemore (2006-09-26 20:21:23)

Textpattern CMS

Textpattern CMS support forum

#1 2006-09-25 03:37:17

Separate stylesheets how to

#2 2006-09-25 04:25:24

Re: Separate stylesheets how to

#3 2006-09-25 13:15:14

Re: Separate stylesheets how to

#4 2006-09-26 00:37:29

Re: Separate stylesheets how to

#5 2006-09-26 00:47:19

Re: Separate stylesheets how to

#6 2006-09-26 14:59:33

Re: Separate stylesheets how to

#7 2006-09-26 19:07:07

Re: Separate stylesheets how to

#8 2006-09-26 20:07:58

Re: Separate stylesheets how to

Board footer