Template Variable EXTRACSS

This is a proposal to be added in all TWiki Layout Templates and skins.

On the topic "Using Topic to Define CSS" we can see a lot of variables to add page specific CSS on the right location. But we only need one variable enable the user to that with all possible ways.

The layout template mut only have this code on the <head>:

<style type="text/css">
  /* <pre> */
  ... all the template css ...
  @import everything ...
  ...
  %EXTRACSS%
  /* </pre> */
</style>

Will be good to set a null value for EXTRA_CSS on TWikiPreferences, to not put garbage on CSS code. Something like that:

   * Set EXTRACSS = /* no extra css specific for this page */

Adding a simple line of style:

   * Set EXTRACSS = body{ color:red } strong{ color:green }

Test it

Adding a block of style:

   * Set EXTRACSS =
     body {
      color: red;
      font-size: 20px;
     }
     strong {
       color: green;
       background: yellow;
     }

Test it

Adding a topic of style:

<verbatim>
   * Set EXTRACSS = %INCLUDE{"BlueStyle"}%
</verbatim>

You must use <verbatim> to the topic do not be included two times.
Test it

Adding a dynamically generated style:

<verbatim>
   * Set EXTRACSS = %SEARCH{
           "%META:FORM\{name=\"UserForm\"\}[%]"
           regex="on"
           nonoise="on"
           format=" .pic$topic{ background-image: url(\"$formfield(Picture)\") }"
         }%
</verbatim>

This example search for user topics and create a class def for each user like .picFulanoSilva for the user topic FulanoSilva and set the user picture as the background for this class. This is a rare example for now, but not forever if the possibility is open. wink

Test it

-- Contributors: AurelioAHeckert - 01 Sep 2007

Discussion

Actually, this has been in the KoalaSkin for years (as the variable %CSS), and I agree that this is a very useful feature. I vote for adding this to the TWikiSkins in Using_Cascading_Style_Sheets as:

"Skins should include in their head html section a %CSS% keyword so additional css code can be added via the CSS wiki variable"

On the actual word, what should we choose? EXTRACSS? CSS? (Simpler is best in my opinion)

I suggest also, like the KoalaSkin using a %PRINTCSS to be used in the css used when printing.

-- ColasNahaboo - 01 Sep 2007

If you use a SEARCH, how do you control the order in which the CSS are loaded? For example, I want the CSS provided by my plugin to replace some of the styles in the core, but I also want to allow my styles to be overridden by another plugin. Don't we need something like the {PluginsOrder} (or the {TemplatesPath}) to make this happen in the right order?

-- CrawfordCurrie - 01 Sep 2007

I'd say, let's not reinvent the wheels that are already in CSS. CSS provides you with some things like !important to override things that are quite sufficient in practice. or @import

-- ColasNahaboo - 01 Sep 2007

Yes !important and @import can do what you need Crawford. And more: this variable proposal is for the user. The user decision is tle last step on replace sequence.

Colas, i think "Simpler is Best" too, but a so simple name is not clear... I see this:

EXTRA_CSS_FOR_THIS_TOPIC : very very clear, but is not a cool name.
EXTRACSS : not very clear as the first, but is a usable variable name.
CSS : "CSS for what?" a user will quest. it is simple, but... Is it cool?

-- AurelioAHeckert - 01 Sep 2007

This topic makes me think of AttachContentPlugin... unless you really really need the css dynamic one every view.

Also, if you did need the css to be dynamic on every view, shouldn't the css be static, and the output html classes be dynamic??

Seems to me this proposal is trying to be very clever for a very small feature set.

-- SvenDowideit - 03 Sep 2007

Sven, some years ago i beautify the TWiki's SiteMap, but to do it i need add a little specific CSS only for that. I can put <style> inside the body with the topic text, but it's not cool... So... My work do not enter on TWiki.org. A %EXTRACSS% variable can make this easy and right.

More: I develop a lot of little features (and little TWikiAplications) like http://inkscapeBrasil.org/.GaleriaTeste on a lot of TWiki based Web Sites. The great part of this features need a very specific page CSS, and it is easy if i can set the simple CSS directily on the topic code with the aplication code. (more places = more dificult)

With %EXTRACSS% you can add simple CSS, CSS files, dynamic CSS, specific for a page, as you wish. wink

-- AurelioAHeckert - 20 Sep 2007

BasicForm
TopicClassification	TWikiDevDoc
TopicSummary	A proposal to be added in all Layout Templates. Only one variable to add page specific CSS by the user.
InterestedParties	AurelioAHeckert
RelatedTopics	UsingTopicToDefineCSS

Topic revision: r7 - 2007-09-20 - AurelioAHeckert

Account
- Log In
- Register User

Edit
Attach

Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2026 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.