Who, what, when, where and why

New Anchorage Theme in Newscoop makes template skins easy

Anchorage is a brand new theme for Newscoop that implements some familiar theme features and adds an easy way to create skins from the base without touching a lot of code. The theme also makes use of Twitter's Bootstrap framework as a starting point and builds custom styles on top of it.

The CSS structure is the following:

• bootstrap.min.css: This includes the base styles of Twitter Bootstrap Framework, Grid, responsive grid, tabs, buttons, etc.
• anchorage.layout.css: This includes all the styles for the structure of Anchorage
• anchorage.skin.css: This includes the styles to get the default skin of Anchorage including colors, backgrounds, fonts and customs styles
• anchorage.responsive.css:  All the styles required to get a correct responsive behavior for the theme
• anchorage.ie.css: Custom styles required for the  functionality of the theme in browser Internet Explorer 7+
• datepicker.css: Required for the calendar field plugin
• flowplayer/minimalist.css: Skin for flowplayer (html5 video player)

The anchorage.layout.css and anchorage.skin.css are the most important files to take notice of when customizing Anchorage.

The layout

The rules pertaining to the layout are mentioned in the anchorage.layout.css file. Keep in mind, this file only contains the necessary rules to display the theme as it is, without defining any color or font. This is just the foundation of the anchorage theme. But if you would like to change the element placement, this would be the file to modify.

If you loaded the theme with just the anchorage.layout.css file and the bootstrap base it would look like this:

The skin

The skin file defines the colours, fonts and everything else to make the look different from the base classes without touching any element of placement. If you are concerned with changing the overall look of the theme, this is the file to modify.

Theming

There are different ways of modifying Anchorage, it really depends on how much you want to change.

Basic theming

Probably the easiest way to do this would be to create a css file with rules that override the current files of the skin. This is possible by adding the custom css files under the current css imports on _html-head.tpl. This solution could be useful if you would like to make small changes to the skin.

Advanced theming

This method is useful if the skin requires several or more drastic changes.

1. Create a copy of anchorage.skin.less and add a custom name, "anchorage.custom.less" for instance
2. Make the changes on anchorage.custom.less that your new theme requires
3. Compile anchorage.custom.less to create the new css file for the skin. This action is required because the file anchorage.custom.less also requires rules that are imported from anchorage.layout.less and mixins.less. There are different methods to compile less files to css files: a) Use nodejs and lessc command  b) Use compiler apps like less.app (Mac OS), Simpless (all OS), Plessc (all OS)
4. Import the file on _html-head.tpl and replace the default skin

replace default skin with custom new skin:

Custom colours

Anchorage is a flexible theme developed to facilitate customisations like changing the colour very easily.

Inside anchorage.skin.less there is a section of colour variables.

Colour Variables

@main-color:#bc0000;

@dark-color:#585657;

The current colours of the skin are the @main-color set with red and @dark-color set with grey. Changing the values of these two variables open the opportunities to get a different look and feel for the theme.

After saving the anchorage.skin.less file with your changes, it will also need to be compiled, in order to get the new anchorage.skin.css file for the theme.

More about Anchorage

You can get to know more about Anchorage here:

• Documentation
• Demo: http://anchorage-dev.lab.sourcefabric.org/
• Github Repository: https://github.com/newscoop/theme-Anchorage/releases