Question

Is there a mechanism in place that will allow one to specify a style sheet, on a site-wide basis, that overrides only a select few of PatternSkin's defined styles?

The instructions in PatternSkinCustomization for overriding the default styles for the entire site talk about modifying a complete copy of layout.css and/or style.css. I have found that for my needs, I only need to change a few of the styles. However, having done this, I'm now in the position of having to update my customized stylesheets if I want it to keep up with other changes made to PatternSkin. If I could overlay just a few custom styles, I would only have to worry about updating those few styles should a subsequent change in PatternSkin create a conflict.

Therefore, in the interest of making it easy to create and manage custom "themes" that build on the great foundation of PatternSkin, this would be a very userful feature (if it's not currently implemented). If there isn't a way to do this currently, I'd be glad to submit a feature request.

(BTW, this would be a logical compliment to the recent enhancement in DEVELOP allowing specification of multiple skins in "Set SKIN" preference. Perhaps a parallel mechanism could be implemented for TWIKILAYOUT and TWIKISTYLE variables.)

-- LynnwoodBrown - 23 Jul 2005

Environment

-- LynnwoodBrown - 23 Jul 2005

Answer

Overriding CSS in general: any new style or style property is added; any re-writing of a style property replaces the old property.

'Conflicts' can occur, and this is something of trial and error.

Ways to override PatternSkin:

1. Create a 'user style' css file, attach it to a topic and point TWIKIUSERSTYLE to this attachment (or TWIKIUSERLAYOUT if you only want to change the size and positions of the main block elements).
2. Create a new @import instruction in twiki.pattern.tmpl, below the existing style imports, and point the import to your new file
3. Create a new css file, at the top put an @import url with the absolute address of the existing pattern skin, and point TWIKISTYLEURL to your own file

-- ArthurClemens - 23 Jul 2005

Simple. Thanks! What do you think of option 3 above being the default set-up? Then TWIKISTYLEURL becomes the mechansim for incrementally customizing the default skin.

-- LynnwoodBrown - 23 Jul 2005

I agree. The only problem I see is that you need to put an absolute url in it - it can't be a generated url.

But you could create an easy to copy url in the topic you attach the css file in.

-- ArthurClemens - 23 Jul 2005

Actually, I didn't quite understand your option 3. I thought you meant a variation of #2: Create a new @import instruction in twiki.pattern.tmpl, above the existing style imports that points to the absolute address of the existing pattern skin. Then point TWIKISTYLEURL to my file (or topic).

Could you clarify what you mean about creating a new css file? How is this file referenced? Thanks again!

-- LynnwoodBrown - 23 Jul 2005

Perhaps somthing akin to ..

<style type="text/css" media="screen, tv, projection">
   @import "%ATTACHURLPATH/style.css";
   @import "%ATTACHURLPATH/layout.css";
</style>

Arthur - is that right?

If I'm reading this right, something like that could be put in the skin and you'd have a per topic skin over-ride.

-- AntonAylward - 23 Jul 2005

Anton, you can do this in a topic or template, not in a css file.

Lynnwood, that's correct. But let me exemplify a bit more.

Let's say we create newstyle.css, and attach it to our NewSkin topic. In newstyle.css we put as first line:

@import url("http://twiki.org/p/pub/TWiki/PatternSkin/style.css");

You see, that is the absolute path to pattern skin's style.css. We cannot use @import url(%TWIKISTYLEURL%);. So this makes it difficult to update: if the installation changes, you must not forget to change that line in your newstyle.css.

To find out the absolute path, we can write the attachment url in the topic, but purely as development aide.

We can make the system more flexible if we put all skin styles in the same web. Then we could write:

@import url("../PatternSkin/style.css");

Even more fault proof, if we attach the new style to the same topic as the other style (PatternSkin), we can write:

@import url("style.css");

-- ArthurClemens - 23 Jul 2005

Arthur:

Your last two example confuse me.

I can see that my example would have to go in a skin template. I can also see that if there is nothing attached to a a topic then noting will happen. I can also see that there is a topic that has the 'real' Dot.css files, and when that is viewed it will be double included - but that shouldn't have any effect, should it?

I understand about the problem with absolute paths. But I don't see how the last two examples can be integrated or where.

Surely in that last example you meant to write

@import url("newstyle.css");

since style.css is already attached there?

But how would or does thia llow the selective over-ride to be applied at the per-topic level?

My example, using ="%ATTACHURLPATH/style.css", would always pick up on the per-topic style.

Perhaps we need both mechanisms?

-- AntonAylward - 24 Jul 2005

This is the idea to override pattern skin when writing a new skin:

• Create a new css file, newstyle.css
• Attach newstyle.css to a skin topic
• Edit newstyle.css: in the first line, import style.css from pattern skin. The import url depends on the location of newstyle.css relative to style.css. The import might be @import url("../PatternSkin/newstyle.css"); if the new skin is in the same web as PatternSkin.
• Point TWiki.TWikiPreferences' TWIKISTYLEURL to newstyle.css

Now pattern skin's style.css is only imported through newstyle.css.

On a per-topic level: in the topic set TWIKISTYLEURL to the desired (somewhere attached) css.

-- ArthurClemens - 24 Jul 2005