Skip to main content

Convert a theme to CleanSlate

CleanSlate uses a template language called Radius. Therefore, all tags will look something like <r:my_tag />.

For a more in-depth description of the various tags available, visit the  Tag Index.

It's dangerous to go alone! Take this.

After several years and hundreds upon hundreds of themes for Slate and CleanSlate, we've learned the best themes are made when you start with a boilerplate. We maintain a boilerplate for CleanSlate themes called the CleanSlate Toolkit. When you're starting to convert a theme to CleanSlate, use the CleanSlate Toolkit as your base and build off of it. It's very bare bones, delete key friendly and will save you time.

Without further adieu, let's see how to get your theme up and running in CleanSlate:

Screencast: Converting a Theme

Learn how to convert your theme to CleanSlate—start to finish—in 30 minutes:

Or, view this video on YouTube. Also, check out the blog post for a more detailed breakdown of the different parts of the video.

Linking up stylesheets:

HTML: <link href="http://mysite.wvu.edu/stylesheets/styles.css" rel="stylesheet">

CleanSlate: <r:include_stylesheet name="styles" />

Or, if your stylesheet is in a subfolder of your stylesheetsdirectory:

HTML: <link href="http://mysite.wvu.edu/stylesheets/path/to/awesome/styles.css" rel="stylesheet">

CleanSlate: <r:include_stylesheet name="path/to/awesome/styles" />

Bonus:

You can include multiple stylesheets at once by passing a comma separated list to the include_stylesheettag. Each file will be compressed (if you have it enabled in your config.ymlfile) and all files will be combined into one.

HTML:

<link href="http://mysite.wvu.edu/stylesheets/reset.css" rel="stylesheet">
<link href="http://mysite.wvu.edu/stylesheets/fonts.css" rel="stylesheet">
<link href="http://mysite.wvu.edu/stylesheets/styles.css" rel="stylesheet">

Cleanslate: <r:include_stylesheet name="reset, fonts, styles" />

If you have a stylesheet in a subdirectory of stylesheets, simply include the path:

<r:include_stylesheet name="reset, fonts, path/to/awesome/styles" />

Linking up javascripts:

HTML: <script src="../javacripts/jquery.js"></script>

CleanSlate: <r:include_javascript name="jquery" />

Bonus:Much like stylesheets, you can also include multiple javascript files in one radius tag:

HTML:

<script src="../javacripts/jquery.js"></script>
<script src="../javacripts/jquery.backstretch.js"></script>
<script src="../javacripts/jquery.custom.js"></script>

CleanSlate: <r:include_javascript name="jquery, jquery.backstretch, jquery.custom" />

Linking up a Stylesheet or Javascript file from outside your theme

The syntax doesn't change here. Please note:  always link to the HTTPS resource. You may need to change http to https.

HTML & CleanSlate: <link href="https://mysite.wvu.edu/path/to/styles.css" rel="stylesheet">

If the asset you're linking to doesn't exist over HTTPS, consider downloading it and hosting it from your theme.

Linking up images inside your theme:

HTML: <img src="../images/my-image.jpg" alt="Foo bar" />

CleanSlate: <img src="<r:image_url name="my-image.jpg" />" alt="Foo bar" />

Outputting your main navigation in a <ul>:

CleanSlate: <r:site_menu />

Want to add a classor idto your <ul>? No problem!

Class: <r:site_menu ul_class="your-class-here" />

ID: <r:site_menu ul_id="your-id-here" />

Making an editable region:

Slate: <%= content_for(:main) %>

CleanSlate: <r:editable_region name="main" />

Editable region names ( name="xyz") must not have any spaces, punctuation or upper case letters. Additionally, each editable region name must be unique. No two editable regions can be named identically in the same page template (e.g., You cannot have two name="xyz"in one template. Weird stuff will happen).

Making a "Simple" editable region:

In CleanSlate, you can create editable regions without WYSIWYG abilities. We call these simple editable regions. These regions are appropriate for titles, headlines or any area where you want just the content and not the styles.

CleanSlate: <r:editable_region name="main" type="simple" />

Making an editable region with sitewide content:

Slate: <%= content_for(:contact) %>then click the heart icon in the editor.

CleanSlate: <r:editable_region name="contact" scope="site" />

If you make an editable region, then later decide to make it an editable region with global content, best practice is to give the region a new name in the name="xyz"field to avoid confusion in the CleanSlate database (and on your pages!).

Include a partial in your theme:

Slate: <%= partial :footer -%>

CleanSlate: <r:partial name="footer" />

Outputting breadcrumbs in a <ul>:

CleanSlate: <r:breadcrumbs ul_class="breadcrumbs" />

Last updated on June 15, 2018.

We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:

  • A brief description of the issue
  • A link to the page where you saw the issue
  • Screenshots that illustrate the problem - How do I take a screenshot?

Kindly email CleanSlate@mail.wvu.edu for help or use the form on the request help page.