CSS Skins

LudoJS comes with several CSS skins. The css file css/ludojs-all.css contains the css for all skins. Include it with a link tag like this:

<link rel="stylesheet" href="ludojs/css/ludojs-all.css">

This css file is minimized. ludojs-all-readable.css can also be used. It's the same css, but not minimized.

To choose a theme, assign your <body> tag to the name of the skin of your choice:

Example:

<body class="ludo-blue">

Below, you will see the calendar view in all the skins

Skin: twilight

<body class="ludo-twilight">

Twilight theme

Skin: blue

<body class="ludo-blue">

Blue theme

Skin: light-gray

<body class="ludo-light-gray">

Twilight theme

Skin: gray

<body class="ludo-gray">

Gray theme

Create your own skin

To create your own skin, use ludojs/css-source/twilight.css as a template. As you can see in that file, all the css rules starts with .ludo-twilight. That's the class assigned to the body tag

.ludo-twilight .ludo-framed-view-titlebar-title{
    text-align:center;
    width:100%;
}

Instead of .ludo-twilight, use a name of your choice(Search->replace->'ludo-twilight'->'name of your choice'), and remember to add that class to your body tag.

.my-theme .ludo-framed-view-titlebar-title{
    text-align:center;
    width:100%;
}

...
...

<body class="my-theme">
Generated 2016-12-02 19:27:14