This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.

Title

earthli Themes have been updated

Description

Since almost the beginning, earthli has supported <a href="{pages}/settings.php">themes</a> that let the user choose the basic color scheme for the site. In the early days of the web, it was a cool way of playing with CSS. It also kept your coding honest because you had to stick to a style guide instead of just throwing in styles all over the place. In recent years, the themes started to look a bit dated. With the introduction of a <a href="{app}/view_article.php?id=2843">completely new base layout</a>, most of the themes looked bad and skewed instead of simply dated. A few screenshots are shown below, but you should check out the <a href="{pages}/settings.php">settings</a> page (available in the footer of every page on this site) to see more and choose your own theme. <img src="{styles}themes/midnight_snapshot_tn.png" href="{styles}themes/midnight_snapshot.png" caption="Midnight" align="left"><img src="{styles}themes/tan_snapshot_tn.png" href="{styles}themes/tan_snapshot.png" caption="Beach" align="left"><img src="{styles}themes/mocha_snapshot_tn.png" href="{styles}themes/mocha_snapshot.png" caption="Mocha" align="left"><img src="{styles}themes/eggplant_snapshot_tn.png" href="{styles}themes/eggplant_snapshot.png" caption="Eggplant" align="left"><img src="{styles}themes/emerald_snapshot_tn.png" href="{styles}themes/emerald_snapshot.png" caption="Shamrock" align="left"> <clear>Some themes have been renamed: <ul> Emerald => <hl>Shamrock</hl> Crimson => <hl>Fire Engine</hl> Tangerine => <hl>Creamsicle</hl> </ul> Some themes have been removed: <ul> Desert Earthli Galaxy Opus </ul> The default theme is still "Ice". For those interested in the technical details, all earthli stylesheets are now constructed with "Less CSS" and themes are absolutely dead-simple to create by just setting a few base colors. For example, the "ice" stylesheet is created with <a href="http://resources.earthli.com/resources/themes/ice.less">this less file</a>, which uses <a href="http://resources.earthli.com/resources/themes/theme-base.less" author="" source="">theme-base</a>, which in turn uses <a href="http://resources.earthli.com/resources/styles/core/core-values.less" author="" source="">core-values</a> and <a href="http://resources.earthli.com/resources/styles/core/core-mixins.less" author="" source="">core-mixins</a>. All the other themes use these base files as well and tend to override even fewer variables than the ice theme does (e.g. <a href="http://resources.earthli.com/resources/themes/mocha.less" author="" source="">Mocha</a>, <a href="http://resources.earthli.com/resources/themes/midnight.less" author="" source="">Midnight</a> or <a href="http://resources.earthli.com/resources/themes/emerald.less" author="" source="">Shamrock</a>) For those still working with plain CSS, Less is definitely worth a look.