• Not Answered

Guide to working with themes

Hi,

Could anyone point me towards some documentation for working with Zimbra 8 themes? I can't seem to find anything in the documentation so am having to guess my way through the process.

So far we have created a new theme and located the files within filestoreage. I can't seem to find a way to automatically regenerate the css files from the less files (somewhat confusingly still with the .less extension) without just deleting the h folder within the filestorage folder. At the minute i just have a grunt task doing this when it detects a change.

The next issue that i have run into is that the additional assets within the files directory of the theme are not copied over to the h folder to be referenced on the site. Instead the default theme seems to rely on another directory called system to store things like font files, despite them existing within the theme directory as well. How can i get the cache process to actually copy over the files that i will need?

I'm sure that there will be other issues that i will run into which is why i was looking for documentation around themes that was aimed at developers rather than users.

Cheers

Barney

13 Replies

  • In reply to Farrukh:

    I had already gone through that section of the documentation before i posted. Unfortunately it is most of it is focused at end users administering themes through the admin UI. The sections that are aimed at developers only talk around the actual theming and don't give detail on the process itself.

    The answers i now have for my questions are:

    It's not possible to set community into a developer mode that automatically clears the cache after file changes. You have to press the clear cache button in the admin UI after each change.

    The problem with the additional assets was because we had used hyphens in the filenames which are rewritten as slashes by the router. You need to make sure that all files are named camel case etc so that they work in the theme.

    The issues that i am now having are with the LESS compiler. I can't find a way to view the error messages from it. It would help to know what version of LESS it uses so that i can know if i am trying to use language features that it doesn't support.

  • In reply to Barney Scott:

    Another thing i am now running up against is using some of the standard velocity tools, for example the date one.

    (velocity.apache.org/.../DateTool.html)

    You use it by adding it to the context of the script e.g context.add("date", new DateTool()); However i can't seem to find a way to do it in a Zimbra widget environment. The Zimbra velocity documentation is pretty light on anything outside basic control methods.

    (https://telligent.com/community/developers/w/developer8/39869.using-velocity.aspx)

    There must be a simple way to add it i just can't seem to find out how.

    I would appreciate any help.

    Cheers

    Barney

  • Barney Scott
    So far we have created a new theme and located the files within filestoreage. I can't seem to find a way to automatically regenerate the css files from the less files (somewhat confusingly still with the .less extension) without just deleting the h folder within the filestorage folder. At the minute i just have a grunt task doing this when it detects a change.

    Expiring the cache via Control Panel > Administration > Site Administration > Widget Studio > Developer Tools > Clear Cache will expire the theme and widget cache. You will need to clear the cache whenever you want to preview changes when working directly against the file system.

    Barney Scott
    The next issue that i have run into is that the additional assets within the files directory of the theme are not copied over to the h folder to be referenced on the site. Instead the default theme seems to rely on another directory called system to store things like font files, despite them existing within the theme directory as well. How can i get the cache process to actually copy over the files that i will need?

    Can you provide a specific example of a core file? I'm not sure what you're attempting to do.

  • In reply to Barney Scott:

    Barney Scott
    It's not possible to set community into a developer mode that automatically clears the cache after file changes. You have to press the clear cache button in the admin UI after each change.

    This is correct. When working through the UI, the cache is expired when associated changes are saved.  When working against the filesystem directly, you should use the cache expiration button within Widget Studio to manually clear the cache.

    Barney Scott
    The problem with the additional assets was because we had used hyphens in the filenames which are rewritten as slashes by the router. You need to make sure that all files are named camel case etc so that they work in the theme.

    Are these file assets within a widget?  If so, the hyphens would be encoded as _2D00_

    Barney Scott
    The issues that i am now having are with the LESS compiler. I can't find a way to view the error messages from it. It would help to know what version of LESS it uses so that i can know if i am trying to use language features that it doesn't support.

    In 8.0, errors in LESS files are written both the exceptions log in the control panel as well as written inline in the rendering of the LESS file to the client.

  • In reply to Barney Scott:

    Barney Scott
    You use it by adding it to the context of the script e.g context.add("date", new DateTool()); However i can't seem to find a way to do it in a Zimbra widget environment. The Zimbra velocity documentation is pretty light on anything outside basic control methods.

    The documentation for what is supported in Velocity syntax is complete.  The reference you posted to Velocity at Apache is incompatible (it is an internal reference, not something to be done within a template).

    What do you want to do with dates?

  • In reply to Ben Tiedt:

    Thanks for the answers Ben. Sorry for the slow reply, it's been a 4 day bank holiday weekend in the UK & i didn't have my login details at home with me.

    Ben Tiedt
    Can you provide a specific example of a core file? I'm not sure what you're attempting to do..

    This was referring to the files with hyphens in their filename  so i have the answer now thanks.

    Ben Tiedt
    Are these file assets within a widget?  If so, the hyphens would be encoded as _2D00_

    Yes they are, so we'll just avoid using hyphens in the filenames.

    Ben Tiedt
    In 8.0, errors in LESS files are written both the exceptions log in the control panel as well as written inline in the rendering of the LESS file to the client.

    Thanks this helps, i'll keep the generated css open in a new tab from now on. Do you know what version of the LESS encoder is being used? I seem to be having some issues using pattern matching in my mixins (lesscss.org/features)

    Ben Tiedt
    The documentation for what is supported in Velocity syntax is complete.  The reference you posted to Velocity at Apache is incompatible (it is an internal reference, not something to be done within a template).

    What do you want to do with dates?

    OK thanks. I need the ability to format a date in potentially several different ways within the template. For example when using the HTML5 time element i will want to have the date output in two completely different ways (for the user display and within the datetime attribute for machines). To do this with flexibility i will need a way to take the date provided to the template and output it however i see fit.

    Along with date formatting, the ability to trim strings would be useful, i can't find a reference to it anywhere. Is it possible within the templates?

  • In reply to Barney Scott:

    As an example of the LESS issues that i am running into with pattern matching, if you use even the demo code for a pattern matching mixin:

    .mixin(dark; @color) {
      color: darken(@color, 10%);
    }
    .mixin(light; @color) {
      color: lighten(@color, 10%);
    }
    .mixin(@_; @color) {
      display: block;
    }

    The LESS compiler errors. It obviously doesn't understand the syntax which makes me think that it is targeting an older version of the language.

    /*
    
    Expected ')' but found ' ' on line 183 in file 'blahblah/files/mixins.less':
    [182]: 
    [183]: .mixinaa(dark; @color) {
           -------------^
    [184]:   color: darken(@color, 10%);
    
    */

    I'm going to avoid using the more advanced features of LESS for now so that i can progress with the theming, but it would be good to know exactly what i can expect to be able to do.

    Thanks

    Barney

  • In reply to Barney Scott:

    Where did you see this example?  Where is your .mixin defined?  You're using definition syntax, but it is invalid.

    For example, it may be:

    .mixin(@color: #000) {

     color: darken(@color, 10%);

    }

    .my_class {

     .mixin(#fff);

    }

    However, .mixin(dark; @color) appears to be a definition, but dark is not a variable.

  • In reply to Ben Tiedt:

    Hi Ben

    I got the example from the official LESS site:

    lesscss.org/features

  • In reply to Barney Scott:

    Barney Scott
    Do you know what version of the LESS encoder is being used?

    I'm not seeing the example that you referenced in your other post.  We're using dotLess to do server-side processing of LESS: http://www.dotlesscss.org/

    Barney Scott
    I need the ability to format a date in potentially several different ways

    See the FormatDate/FormatAgoDate methods on $core_v2_language: http://telligent.com/community/developers/w/developer8/41615.core-v2-language-widget-extension.aspx

    You can specify a custom format using FormatDate($date, "%{ Format='dd mmm yyyy' }"). Any .Net format strings are valid: http://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.110).aspx

    Barney Scott
    ability to trim strings would be useful

    See Trim($string) on $core_v2_utility: http://telligent.com/community/developers/w/developer8/41666.core-v2-utility-widget-extension.aspx

  • In reply to Ben Tiedt:

    Hi Ben

    Barney Scott
    I'm not seeing the example that you referenced in your other post.  We're using dotLess to do server-side processing of LESS: http://www.dotlesscss.org/

    It's the second example piece of code under the Pattern-matching heading on the page, which should have been scrolled to directly from the fragment identifier that was attached to my last link. Here you go:

    http://lesscss.org/features/#mixins-parametric-feature-pattern-matching

    Thanks for the link, I'll have a read through the dotless site and see what language features they support. Is it the latest version that's used?

    Barney Scott
    See the FormatDate/FormatAgoDate methods on $core_v2_language: telligent.com/.../41615.core-v2-language-widget-extension.aspx

    You can specify a custom format using FormatDate($date, "%{ Format='dd mmm yyyy' }"). Any .Net format strings are valid: msdn.microsoft.com/.../8kb3ddd4(v=vs.110).aspx

    Thanks for this i'll have a read through

  • In reply to Barney Scott:

    Regarding the pattern matching example: I don't know if this is a typo on the less.js site, but it works as expected with this syntax:

    @switch: dark;

    .mixin(dark, @color) {

    color: darken(@color, 10%);

    }

    .mixin(light, @color) {

    color: lighten(@color, 10%);

    }

    .mixin(@_, @color) {

    display: block;

    }

    .my-class {

    .mixin(@switch, #888);

    }

Related