Convert a theme to CleanSlate
CleanSlate uses a template language called
Radius. Therefore, all tags will look something like
For a more in-depth description of the various tags available, visit the
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 number of boilerplates for CleanSlate themes. One of them is 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.
NOTE: If you're starting fresh and building a theme from scratch, we recommend starting with the WVU Design System, Supertheme or Brand Patterns. The CleanSlate Toolkit is a great barebones theme—best for getting to know CleanSlate and providing simple examples—but these newer themes are actively maintained, branded, more feature rich and accessible.
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:
<link href="http://mysite.wvu.edu/stylesheets/styles.css" rel="stylesheet">
<r:include_stylesheet name="styles" />
Or, if your stylesheet is in a subfolder of your
<link href="http://mysite.wvu.edu/stylesheets/path/to/awesome/styles.css" rel="stylesheet">
<r:include_stylesheet name="path/to/awesome/styles" />
You can include multiple stylesheets at once by passing a comma separated list to
include_stylesheettag. Each file will be compressed (if you have it
enabled in your
config.ymlfile) and all files will be combined into one.
<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">
<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" />
<script src="../javacripts/jquery.js"></script> <script src="../javacripts/jquery.backstretch.js"></script> <script src="../javacripts/jquery.custom.js"></script>
The syntax doesn't change here. Please note:
always link to the HTTPS resource. You may need to change
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:
<img src="../images/my-image.jpg" alt="Foo bar" />
<img src="<r:image_url name="my-image.jpg" />" alt="Foo bar" />
Outputting your main navigation in a
Want to add a
<ul>? No problem!
<r:site_menu ul_class="your-class-here" />
<r:site_menu ul_id="your-id-here" />
Making an editable region:
<%= content_for(:main) %>
<r:editable_region name="main" />
Editable region names (
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.
<r:editable_region name="main" type="simple" />
Making an editable region with sitewide content:
<%= content_for(:contact) %>then click the heart icon in the
<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:
viewsfolder, start with an underscore and end in
<%= partial :footer -%>
<r:partial name="footer" />
You can also nest partials into different folders inside the views folder. For example,
if you had a partial at
<r:partial name="custom-patterns/my-partial" />
For more information about partials, including learning about "Shared Partials", view the page dedicated to Partials.
Outputting breadcrumbs in a
<r:breadcrumbs ul_class="breadcrumbs" />
Last updated on July 18, 2019.
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?