How can I make my own variation of jazzynote?

-- CarlEastman - 06 Aug 2013

I found it - in LocalSite.cfg had to add the variation to the $Foswiki::cfg{NatSkin}{Themes}{JazzyNote}

and then make a custom css in the /var/lib/foswiki/pub/System/JazzyNoteTheme directory.

-- CarlEastman - 06 Aug 2013

I use an alternative method that is a bit more flexible and less vulnerable to being squashed during upgrades. Here's the basic steps:

Edit the NatSkin config file ( /lib/Foswiki/Contrib/NatSkin/Config.spec) which initially looks like this:

# ---+ Extensions
# ---++ NatSkin
# ---+++ Themes
# **PERL**
# **PERL**
$Foswiki::cfg{NatSkin}{Themes}{JazzyNote} = {
  baseUrl => '%PUBURLPATH%/%SYSTEMWEB%/JazzyNoteTheme',
  styles => {
    jazzynote => 'JazzyNoteStyle.css'
  },
  variations => {
    green => 'GreenVariation.css',
    red => 'RedVariation.css'
  }
};

and add your own spec, so it looks like this:

# ---+ Extensions
# ---++ NatSkin
# ---+++ Themes
# **PERL**
# **PERL**
$Foswiki::cfg{NatSkin}{Themes}{JazzyNote} = {
  baseUrl => '%PUBURLPATH%/%SYSTEMWEB%/JazzyNoteTheme',
  styles => {
    jazzynote => 'JazzyNoteStyle.css'
  },
  variations => {
    green => 'GreenVariation.css',
    red => 'RedVariation.css'
  }
};
# **PERL**
$Foswiki::cfg{NatSkin}{Themes}{LocalSiteSkin} = {
   baseUrl => '%PUBURLPATH%/%MAINWEB%/LocalSiteSkin',
   styles => {
     localsite => 'LocalSiteSkinStyle.css'
   }
};

(For this example, I'll use "LocalSiteSkin" as the name for my custom skin.)

Create a topic in the Main web called for my custom skin (e.g. Main.LocalSiteSkin) where I'll store my css file and any other skin-related files.

For ease in customization, I use AttachContentPlugin so I can simply edit a section of the LocalSiteSkin topic and have it saved as an attachment called LocalSiteSkinStyle.css as per the above spec. Here's what the section looks like with the ATTACHCONTENT macro and just a couple of custom styles:

%STARTATTACH{"LocalSiteSkinStyle.css" comment="Modified by %WIKIUSERNAME% on %DATE%"}%
/*LocalSiteSkinStyle*/ 
@import url(../../System/JazzyNoteTheme/JazzyNoteStyle.css); 
/* Start of Modified Default styles */ 
body {
  font-family: Calibri,'Lucida Grande',Avenir,'trebuchet ms',sans-serif;
  font-size:15px;
}
h1 {
  font-size: 2em;
  line-height: 1.091em;
  margin: 0.5454em 0px 0.8181em;
  color:#4F4F4F;
}
%ENDATTACH%

Note the first line of the css definitions that begins with @import. This includes the JazzyNoteTheme styles so I can define only those styles where I want to override the defaults of JazzyNoteTheme.
Finally, to enable the custom skin, in Configure > Extensions > NatSkin, change the {NatSkin}{Style} setting to your local skin (e.g. "localsite" from the example above).
Now I can simply edit the style definitions in the LocalSiteSkin topic and they are automatically saved to the css file and applied to the site.

Finally, I also make a copy of /lib/Foswiki/Contrib/NatSkin/Config.spec calling it something like Config.local because the .spec file will get over-written during an upgrade of NatSkin.

-- LynnwoodBrown - 06 Jan 2015