How can I assign CSS files to my new skin?

I have started my firs steps to create my own skin. I have already tweaked my wiki using TopicViewTemplates inside the wiki, but now I'd like to create my own skin, which I can later choose using the Set SKIN = myskin preference. So I am familiar with the basics.

My question is: how can I assign the CSS files that I have already set up (and saved in my SitePreferences) into my new skin? I don't want to have copies of those files. So for instance, I can keep using my colors.css in both skins.

I have found the ADDTOZONE function already in the help files to add the css to the head, but it seems not to work. So what am I doing wrong? Is it possible that the new skin is interferring with the TopicViewTemplate I'm using?

At this time, my view.myskin.tmpl only contains one phrase:

%TEXT%

Everything looks fine with this, I simply want to use the color and style settings I'm using in my already set up css-files.

-- Lieven, admin of

KlingonWiki.net - 30 Nov 2015

In most cases, the easiest route to designing your own skin is to build upon one of the well-developed foundations of NatSkin or PatternSkin. This is the case even if the look you're after is very different from one of those, because you can change what you want and fall back to the pre-defined skin templates/styles in other cases (particularly useful for all non-view modes (e.g. edit, attach, opps, etc). Both of these skin have simple mechanisms to add your own style-sheets to over-ride the default stylings. If you are using one of those bases skins and post which one, I can give you more specific tips. FYI, I mostly use NatSkin because I find it the most robust and easiest to customize.

In regards to adding a custom style sheet to a view template, you are on the right track using ADDTOZONE. Why do you say it does not seem to work? Have you looked at the "source" of rendered html code and determined whether your style sheet is indeed being added to the head? Perhaps you could share the exact code your using.

-- LynnwoodBrown - 30 Nov 2015

Thanks - that was very quick. Regarding your first paragraph, I certainly agree. That's what I have done, and it works perfectly. In this case, I'm working on a view-only vesion, So I really just want to find a way to display ONLY what's inside the text area, just like the print settings. But the print settings aren't using the correct colors either, so I tried to start an entirely new skin template. Would you discommend doing so?

Here is what I wrote into view.myskin.tml:

%ADDTOZONE{"head" text=" 
<style type='text/css' media='all'> 
@import url('%PUBURLPATH%/Main/SitePreferences/layout.css'); 
@import url('%PUBURLPATH%/Main/SitePreferences/style.css'); 
@import url('%PUBURLPATH%/Main/SitePreferences/colors.css'); 
</style>" 
}%
%TEXT%

But still, the HTML output shows this:

   <style type="text/css" media="all">
@import url('/pub/System/SkinTemplates/base.css');
</style>
<style type="text/css" media="all">
@import url('/pub/System/SkinTemplates/default.css');
</style>

-- LieVen - 30 Nov 2015

Reading your additional comment regarding your view.myskin.tmpl only containing %TEXT%, I can guess one problem you may be having: no head is being rendered to include your stylesheet. If you are attempting to build a skin from scratch, you need to include code for all parts of the html page. However, this is really the hard path to create a skin or learn the Foswiki templating system.

-- LynnwoodBrown - 30 Nov 2015

Okay then, case closed

I believe I just need to follow your suggestion and do the copying path. I just wanted to avoid to go through the entire thing, since there are lots of parts that I now need to deactivate. ... And I was so close, since the one line version seemed to work - except or the css inclusion

SIMILAR QUESTION: How can I add those mentioned css to my print template?

-- LieVen - 30 Nov 2015

Ok, i'm getting a little clearer idea where you're heading. From what you say, it doesn't sound like your template is getting applied, otherwise I can't see how the rendered HTML could be as you say. What mechanism are you using to apply your template?

Even if you are only wanting to render the styled content of your base topic, you still need have at least your most basic DOCTYPE and html tags. If you create that kind of stripped-down page, then you probably don't need to use ADDTOZONE at all. Just put your style tags (with the imports) inside the head tags.

-- LynnwoodBrown - 30 Nov 2015

Hi again - your comments did help me a little bit, I am now trying something else - maybe I was oversseing something, or even did a mistake.

I am going to delete this file, since it has drifted off my first question.

Now I'm asking: I found a way to modify print template to use the css files, simply adding the above shown addtozone trick into the vew.print template. Problem I still have, is that the header does contain the above shown base and default css, which seem to influence my fonts settings. How can I disable or override these csses?

-- LieVen - 30 Nov 2015

We're narrowing it down...

You definitely want your style sheets to load after other style sheets. There's a couple of ways to do this. If you know the id of the header section for the default style sheets, then you can use the "requires" parameter of ADDTOZONE to force your style sheets to load after that section. If you can't figure out what that id is, you might just try specifying the "script" section in your ADDTOZONE tag. This will definitely force your styles to load after the default styles.

-- LynnwoodBrown - 30 Nov 2015

I donot know the ID of theheader section, at least it's not dislayed in the rendered HTML (see above). I have now done a RENDERZONE to create a "script" zone, and the files are loaded. I can see them in the HTML, but the Default.css is still there and is also used. I have no idea why. Some sections of my page use "my" css and some use the Default.css. When I use my standard skin,then everythings shows as I want, with the print skin, it does not. Why??

-- LieVen - 30 Nov 2015

There could be a few different reasons why your styles are not being applied in print view. Most commonly, the print view is created by a "cover" parameter being added to the url. This points to a special print-skin variation of the base skin. I think you're wanting to modify your print link to point to your striped-down skin (e.g. simply adding "?skin=myskin" to the url).

The other thing to check is to make sure your stylesheet is loaded after any other stylesheets. Remember that the last style definition found is the one that gets applied. Without looking at your particular situation, it's hard for me to guess what exactly is happening. Feel free to contact me on irc or by email if you want me to take a look at it.

-- LynnwoodBrown - 02 Dec 2015