Whitegrey AnchorCMS theme

Posted 2nd Jan, 2015 in Web development

A theme with a darkgrey sidebar and a white content area. Has 1 theme color that is prevalent in links and titles. For AnchorCMS. It is the very theme that I use on my site, created for this site. Do note that my pages are custom-made.

Fork it on GitHub or download directly.

Screenshot of WhiteGrey


On how to install a theme in and get started with AnchorCMS read this tutorial.

This theme requires a little bit of a setup. You need to create 1 (or 2) variables and upload your logo. To add a new variable, go to the Extend tab of the AnchorCMS admin page. Click Create a new variable and add your values.

The variables included are named sidebar and google-analytics. The first, sidebar, is the sidebar. You can add html here with anything you want.<br/> The second variable, google-analytics, is your Google Analytics code. Use this only if you want to.

To have your own logo in the sidebar, open assets/img/ and overwrite logo.png with your own. The format is 150px in height, and the width will be automatically set. If the image is too wide, it'll cut off the sides.

When you've done this, you're all set up! Enjoy your new theme!

Editing the Theme

Below I explain how certain portions of the WhiteGrey theme for AnchorCMS can be edited easily.

Editing the Colors

Editing the color of the theme is very easy. When you've downloaded it, open assets/css/style.scss in any text editor. Copy the whole document and go to Sassmeister. Paste the full code on the left, where it says SCSS.

Using Sassmeister

Go to line 21 and edit the hexvalue there. Now open assets/css/style.css and replace that with the code on the right, where it says CSS. You now have the theme with your own custom color!

Editing the color

New color screenshot

Editing the Created By

I like being credited for my work, but I get it if people don't want that floating around. Thus I'm going to save you the hassle of finding where it is hidden.

Open partials/header.php. Scroll all the way to the bottom. There's a <div> element with the footer class. This contains the element. Feel free to remove or edit the div.

Please note: you have to credit me somewhere on your site for the design, due to the license.


Can I change anything?

Yes, feel free to change up the whole thing! It's licensed under the MIT License, which means you only have to include my license, but are free to break the code by yourself.

How do I mimick your pages?

I've built the pages custom for my own website. They fit the theme and the website goal. Send me an e-mail (see the contact page) and I'll help you out as much as I can. At the very least, I will provide you with the full source code.

How can I thank you?

Using the theme is thanks enough in itself. It's always cool to have something you made being used, so if you do, please leave me a tweet!

Back to blog.