Tags:
extract_doc1Add my vote for this tag create new tag
view all tags
Sven said: We need to doco all the CSS tags that we are putting into TWiki

It would also be beneficial to build a canonical list of class and ID names which could be used by all css-using skins.

#name = ID can only be used once in any page
.name = class can be used any number of times

Classes and IDs Currently In Use

Appendix C: TWiki CSS

Listing of CSS class names emitted from TWiki core code and standard plugins.

Who should read this document?

Most HTML elements generated by TWiki core code now have Cascading Style Sheet (CSS) tags. Skin builders and others who want to change the appearance of the default TWiki installation or any of the skins can use this document to see what styles can be created for these HTML elements.

Naming conventions

  1. All TWiki class names have the prefix twiki. So: twikiAlert, twikiToc, etc. Remember that CSS class names are case sensitive - TWiki CSS uses lowercase tw.
  2. If you define your own CSS classes, it is preferable that you do not use the twiki prefix to prevent undesired overriding effects.

A wide range of standard styles are used in the TWiki core code and topics, and more are used in plugins. The following is an exhaustive list of all styles defined by the PatternSkin. For the most part, the names are the only documentation of the purpose of the style. For more information on how these styles are used, read the code (sorry!)

TWiki styles in core code

.twikiAlert Client.pm, Form.pm, Statistics.pm
.twikiAnchorLink Render.pm
.twikiCheckBox Manage.pm
.twikiCurrentTopicLink Render.pm
.twikiCurrentWebHomeLink Render.pm
.twikiDiffAddedHeader RDiff.pm
.twikiDiffAddedMarker RDiff.pm
.twikiDiffAddedText RDiff.pm
.twikiDiffChangedHeader RDiff.pm
.twikiDiffChangedText RDiff.pm
.twikiDiffDebug RDiff.pm
.twikiDiffDebugLeft RDiff.pm
.twikiDiffDebugRight RDiff.pm
.twikiDiffDeletedHeader RDiff.pm
.twikiDiffDeletedMarker RDiff.pm
.twikiDiffDeletedText RDiff.pm
.twikiDiffLineNumberHeader RDiff.pm
.twikiDiffTable RDiff.pm
.twikiDiffUnchangedText RDiff.pm
.twikiDiffUnchangedTextContents RDiff.pm
.twikiEditFormCheckboxButton Form.pm
.twikiEditFormCheckboxField Form.pm
.twikiEditFormDateField Form.pm
.twikiEditFormError Form.pm
.twikiEditFormLabelField Form.pm
.twikiEditFormRadioField Form.pm
.twikiEditFormTextAreaField Form.pm
.twikiEditFormTextField Form.pm
.twikiEmulatedLink Preview.pm
.twikiFirstCol Render.pm
.twikiForm Render.pm
.twikiGrayText Manage.pm
.twikiHelp Changes.pm
.twikiLink Render.pm
.twikiNew Changes.pm, Search.pm
.twikiNewLink Render.pm
.twikiRadioButton Form.pm
.twikiSummary Manage.pm
.twikiToc TWiki.pm
.twikiTocTitle TWiki.pm
.twikiTopRow Manage.pm
.twikiWebIndent TWiki.pm

TWiki Styles in Plugins

TablePlugin

.twikiTable The table
.twikiSortedCol A sorted column
.twikiSortedAscendingCol Sorted column, ascending
.twikiSortedDescendingCol Sorted column, descending
.tableSortIcon The sort icon holder (span)
.twikiFirstCol The first column
.twikiTableEven Even numbered rows
.twikiTableOdd Odd numbered rows
.twikiTableCol + column number Unique column identifier, for instance: .twikiTableCol0
.twikiTableRow + type + row number Unique row identifier, for instance: .twikiTableRowdataBg0

TWiki Styles in Templates

.twikiPage twiki.tmpl
.twikiMiddleContainer twiki.tmpl
.twikiMain twiki.tmpl
.twikiFormTable formtables.tmpl, form.tmpl
.twikiFormTableHRow formtables.tmpl, form.tmpl
.twikiFormTableRow formtables.tmpl
.twikiFormTableFooter formtables.tmpl
.twikiAttachments attachtables.tmpl
.twikiEditForm form.tmpl
.twikiSubmit Submit button
.twikiSubmitDisabled Disabled submit button
.twikiInputField  
.twikiInputFieldDisabled  
.twikiInputFieldReadOnly  
.twikiInputFieldFocus For Internet Explorer that does not recognize the :focus pseudo class selector
.twikiInputFieldBeforeFocus for use with Javascript: the color of the input text when not clicked in the field
.twikiSelect Select dropdown menu
.twikiTextarea  
.twikiTextareaRawView  
.twikiButton  
.twikiFocus Behavior marker so a field can be given input focus
.twikiLeft  
.twikiRight  
.twikiClear  
.twikiHidden  
.twikiSmall  
.twikiBottomRow  
.twikiSRAuthor  
.twikiSRRev  
.twikiPageForm  
.twikiSeparator  
.twikiAccessKey  
.twikiLinkLabel  
.twikiFormSteps container around a form, such as the attach form: attach.tmpl
.twikiFormStep form row
.twikiNoBreak no break on whitespace
.twikiMakeVisible For elements that should only be visible with javascript on: default set to hidden, is made visible by javascript. Defaults to inline.
.twikiMakeVisibleInline For span elements that should only be visible with javascript on: default set to hidden, is made visible by javascript.
.twikiMakeVisibleBlock For div elements that should only be visible with javascript on: default set to hidden, is made visible by javascript.
.twikiMakeHidden For elements that should be hidden with javascript on: no default style, is made hidden by javascript.
.twikiFooterNote  
.twikiPopUp Behavior marker so a popup-window can be invoked
.twikiContentHeader container around optional html placed before topic text
.twikiContentFooter container around optional html placed after topic text

TWiki Styles used in configure

#twikiLogin CSS.pm
.twikiFormSteps CSS.pm
.twikiFormStep CSS.pm

TWiki Styles in topics

.twikiBroadcastMessage TWikiPreferences
#twikiSearchTable WebSearch, WebSearchAdvanced

TWiki Styles in Skins

#twikiLogin login.pattern.tmpl  

Reserved Styles

.twikiImage defined in PatternSkin div creates border around enclosed image
.twikiNotification defined in PatternSkin temporary alert, lighter than broadcast message
.twikiUnvisited defined in PatternSkin link style that ignores the visited link state; useful for form links

Tips

PatternSkin makes extensive use of CSS in its templates. Read the PatternSkin topic and PatternSkinCss to learn more about creating your own CSS-based skin.

Practical introduction to CSS: http://www.w3.org/Style/LieBos2e/enter/

Related Topics: TWikiSkins, PatternSkin, DeveloperDocumentationCategory, AdminDocumentationCategory

PatternSkin

See: PatternSkinCss

SeeSkin

Generic Containers, which would likely be used by any CSS-based skin for twiki. The names aren't important, it's what they contain that counts.

  • #topsection wrapper for everything in the top (masthead, logo, tagline, etc.)
    • #title topic name (%TOPIC%)
    • #search search form (aka GoBox)

  • #content %TEXT% and #meta
    • #meta metadata (%META{"form"}%, %META{"attachments"}%, %META{"moved"}%)
  • #editcont %TEXT% when in edit mode

  • #navigate %WEBTOPICLIST% and %WIKIWEBLIST%
  • #lineage current topic revision and parents/children (%REVINFO%, %META{"parent"}%)

  • #menu wrapper for page topic actions:
    • #topicaction edit, attach, print, etc...
      • #diffs container for individual version diffs (1.3 < 1.2, etc.)
    • #editmore link to advanced topic actions (rename, re-parent, etc.)

  • .nocss container for elements which are only for non-css browsers (contents usually hidden to css-aware ones). Use this for things like skip-navigation links for screen readers.

SeeSkin specific addons

  • #bugreport links to new topic form in Feedback web
  • #logochar logo character
  • #extraDiv1,#extraDiv2,...#extraDiv6 catch-alls to add extra imagery (cf. CssZenGarden)

  • .deem de-emphasize (make text lighter and smaller).

Discussion


conversational bit below adapted from TWikiIRC date=2004-05-17,Mon&sel=295#l291 ( Main.MattWilkie ,Main.SvenDowideit, Main.WillNorris ,Main.MartinCleaver )

argh. do we have to have 'TWiki' prefix everything?

Yes, as they are for TWiki specific stuff. Otherwise it clashes with non TWiki content.

but everything is twiki specific.. isn't it?

no

what non-twiki content?

headings are non twiki, they are html.

if you want to use a twiki prefix, they should be in a namespace putting twiki in front of every id/class sucks

http://annevankesteren.nl/archives/2004/03/css-namespaces

that is an altrenative that maphew mentioned before i'm happy to use that instaed - but i'm not doing the work :()

sure, neither am i {grin}

the alternative I mentioned is to use child (descendant) selctors:

'#content h1 {font-weight:bolder}' is only applied to H1 elements contained within the 'content' container. Or in this case '#twiki .DiffAddedMarker {blah blah}'

that's a very nice solution, lightweight, in every respect

it's called Environmental Style. It has the added benefit of that when you move .DiffAddedMarker so it's inside an #owiki container, for example, you can apply completely different css without changing the content http://realworldstyle.com/environmental_style.html


To put TWiki in front of every CSS tag generated by lib code or used in templates makes the distinction clear between stuff you override and tags a skin maker has added. If users are able to change CSS in topics (users that are not aware of lib files, tmpl files and so on) it is easy for them to make 'mistakes' by overriding or redefining css tags that are used by TWiki.

For instance the user decides to create a definition for .topic: .topic { float:left; } and this will mess up the whole layout because this overrides the TWiki-defined style .topic. It seems safer to use TWikiTopic, and let the user mess around with .topic.

I like Environmental style, but would like to use it for the templates: #view .TWikiTopic, #preview .TWikiTopic, etcetera.

-- ArthurClemens - 17 May 2004

I don't think user overriding would be much of a problem if there were an easily accessible list of the existing names. In any case, I'm not interested in arguing further about it. I've made my case, others will either agree or not. It's a minor point relative to just getting twiki in shape to use css at all. wink

added names used by SeeSkin
added names used by PatternSkin (may not be current)

-- MattWilkie - 20,31 May 2004

I just learned a useful piece of knowledge: you can assign multiple classnames to page elements. For instance:

&lt;a class='class2 class1' href='/'&gt;link&lt;/a&gt;
or more relevant to the discussion:
&lt;body class="view TWiki"&gt;

If I think about it, of course I knew something like a.green, but never realized you could extend this.

This is in the HTML specification, so nothing new: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2.
This makes it possible to create multiple inheritance: to save on filesize by combining styles, and to override styles locally.

Some rules: 0. User overrides author overrides default
1. important overrides non-!important
2. Inline overrides included (embedded and link)
3. Higher specificity overrides lower specificity
4. Later in the rule order overrides earlier

Mac IE has a fundamental problem with interpreting multiple classes: http://dhtmlkitchen.com/learn/css/multiclass/index2.jsp. Other browsers seem to take it.

Multiple class names do not work with ids, only with classes. This would mean that layout elements are also made classes, so #TWikiMain becomes .TWikiMain. Not a big deal, and makes it more flexible.

I have added a test file to play. Try in the body the combinations "view TWiki", "view OWiki", "preview TWiki" and "preview OWiki".

-- ArthurClemens - 04 Jun 2004

nice discovery Arthur! I read about this ages ago but had completely forgotten about it.

-- MattWilkie - 06 Jun 2004

adding TWikiFormsEdit* classnames to let me customise their look smile

-- SvenDowideit - 18 Jun 2004

Sven, as you have worked for Pattern skin: do you see problems if we change the ID names to class names, to enable multiple classes?

-- ArthurClemens - 19 Jul 2004

BTW, below contributor list is on the wrong place, better to refactor the top and move contributor list up.

-- PeterThoeny - 25 Jul 2004

I'd like to put in a strong vote for putting the css files into SVN, in addition to MartinCleaver's plea for having the default topics that make up a release to be in SVN. right now i'm having trouble tracking what changes to completely break my pattern skin usage at work (at least its happneing in my testwiki)

-- SvenDowideit - 26 Jul 2004

May be I am missing something, but putting topics into SVN has these issues:

  • Not as easy to maintain as TWiki topics
  • No visual feedback that rendering and linking is correct
  • No RCS controlled topics in release; no topic history indicating the TWiki time line

A better approach is to go back to the monthly Beta release schedule and to automate the merging of Alpha releases with Beta releases.

(This is off-topic and should be refactored)

-- PeterThoeny - 27 Jul 2004


Small part refactored:

When using multiple classnames in templates, the classnames should not be in WikiWord syntax or they will get parsed. Better is to avoid TWiki syntax at all when using classnames. So TWikiGrayText should be called twikiGrayText.


Contributors
-- ArthurClemens - 07 Apr, 08 Aug 2004, -- MartinCleaver - 17 May 2004, -- MattWilkie - 17,20,31 May 2004,

BasicForm
TopicClassification TWikiDevDoc
TopicSummary TWiki now has a documented set of CSS classes that are used in standard skins
InterestedParties

RelatedTopics

Topic attachments
I Attachment History Action Size Date Who Comment
HTMLhtml CSS_multiple_classnames_test.html r1 manage 1.6 K 2004-06-04 - 23:14 UnknownUser Test file to play with different class combinations
Edit | Attach | Watch | Print version | History: r25 < r24 < r23 < r22 < r21 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r25 - 2008-09-17 - TWikiJanitor
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.