How to render HTML to be consistent with the installed wiki skin?

Dear users and developers of Foswiki,

Currently I am running a recent version of TWiki. Since I barely get any anwers on the TWiki support page I am seriously considering switching to FosWiki. I hope you guys and girls are able to help me with this problem.

On my Webs I include HTML that I have generated myself using custom perl modules (database queries etc ...). Since this HTML was not created through the conventional TWiki shorthand there is not styling of my content since the proper classes are not set. Still I would love to have the html appear consistent with the currently installed skin (I use the PatternSkin a.t.m.). is there a way to pass my HTML through one of the FosWiki or TWiki internal modules in order to add the proper DOM element classes?

Any help would be greatly appreciated.

Bye,

-- PimVanNierop - 18 Mar 2010

It is not possible to add CSS classes on the fly. But you could enhance the pattern skin css by adding a theme css (see skin page).

The default styling of tables is in =styles.css+:

.foswikiTable,
.foswikiTable td,
.foswikiTable th {
   border-width:1px;
}
.foswikiTable {
   border-style:solid;
   margin:2px 0;
   border-collapse:collapse;
}
.foswikiTable td {
   padding:3px 6px;
   border-top-style:solid;
   border-bottom-style:solid;   
}
.foswikiTable th {
   border-left-style:solid;
   border-right-style:solid;
   padding:4px 6px;
}
.foswikiTable .tableSortIcon {
   margin:0 0 0 5px;
}

and in colors.css:

.foswikiTable,
.foswikiTable td,
.foswikiTable th {
   border-color:#e2e2e2;
}
.foswikiTable th a:link,
.foswikiTable th a:visited,
.foswikiTable th a font {
   color:#fff;
}

To use this styling without adding the foswikiTable class to your html, you could write in your theme css:

.foswikiTopic table,
.foswikiTopic table td,
.foswikiTopic table th {
   border-width:1px;
}
.foswikiTopic table {
   border-style:solid;
   margin:2px 0;
   border-collapse:collapse;
}
.foswikiTopic table td {
   padding:3px 6px;
   border-top-style:solid;
   border-bottom-style:solid;   
}
.foswikiTopic table th {
   border-left-style:solid;
   border-right-style:solid;
   padding:4px 6px;
}
.foswikiTopic table .tableSortIcon {
   margin:0 0 0 5px;
}
.foswikiTopic table,
.foswikiTopic table td,
.foswikiTopic table th {
   border-color:#e2e2e2;
}
.foswikiTopic table th a:link,
.foswikiTopic table th a:visited,
.foswikiTopic table th a font {
   color:#fff;
}

You could do this for any html element that needs styling. Of course it depends what you want to achieve.

-- ArthurClemens - 18 Mar 2010

Thanks for the quick reply. It is clear to me that I have to write my own css. No problem there. Could you please piont me in the right direction on how to best implement this. What file cen be best modified to reflect my custom css? Or do I include it from an entirely separate css file?

Also, since I (for now at least) am using TWiki I do not have the '.foswikiTopic' class in my htmlI am wondering what the equivalent class name in TWiki would be. Is it 'patternTopic'?

-- PimVanNierop - 18 Mar 2010

On TWiki the css class will be different. You would need to write:

.patternViewPage table ....

You can create a stylesheet in a file, attach it to a topic, and set the variable USERSTYLEURL to point to that attachment, using %PUBURLPATH%/web/topic/file.css.

-- ArthurClemens - 18 Mar 2010