Wallogit.com
2017 © Pedro Peláez
A Silverstripe theme based on Twitter Bootstrap
, (*1)
This theme has been handcrafted by Anselm Christophersen during January/February 2012 for the Silverstripe Theme Contest., (*2)
The theme was a finalist, and was ranked overall second in terms of code quality. You can read more about that on the Silverstripe Blog., (*3)
You can see some demo pages here:, (*4)
This theme is copygright 2012 title.dk/Anselm Christophersen and licensed under the Apache license. Third party libraries that are used in this theme are licensed under their repective licenses., (*5)
themes/ directory of your SilverStripe project. If you've named it correctly, there should be a directory called themes/cloudy/templates.mysite/_config.php file: SSViewer::set_theme('cloudy');
SSViewer::set_theme lines.Being built on top of the great Twitter Bootstrap 2 Framework, Cloudy should be seen not only as a theme, but also as a toolbox for getting started with Silverstripe, suitable both for beginners as well as advanced users., (*6)
This theme has been tested with the following Silverstripe configurations, (*7)
The current development version of SS3 seems to have some troubles with Fulltextsearchable/translatable. The following has been done to make them work:, (*8)
enable method in /sapphire/search/FulltextSearchable.php:if(DB::getConn()->getDatabaseServer() == 'mysql') {
For content editing, Cloudy mostly adheres to Silverstripe standards.
A minor non-standard thing is that you can integrate sub headings in the title.
See an example here.
This can be done by wrapping your heading within a html <small> element like this: Gallery<small>Another easy-pluggable module</small>., (*9)
The rest is probably best explained by inspecting the example pages (see the _preview directory)., (*10)
Bootstrap comes with some great styles, especially for tables which are all set up in Cloudy. An example of how to use these will be added soon., (*11)
The theme comes bundled with many icons. See examples here:, (*12)
Use above reference to change the logo icon in Logo.ss, the toolbar icons in TopNavigation.ss, and the social icons in Footer.ss. All files are found in templates/Includes., (*13)
Examples for a Cloudy configuration., (*14)
You can add these in your /mysite/_config.php file:, (*15)
#Enable Search
FulltextSearchable::enable();
#Translatable
#This requires the translatable and a couple of small tweaks
#in the current SS3 alpha
Object::add_extension('SiteTree', 'Translatable');
Object::add_extension('SiteConfig', 'Translatable');
This theme contains a template with social media buttons.
As their many dependencies are not a joy to develop with, they have been uncommented, but are easy to enable for live sites.
In order to enable the buttons, edit templates/Includes/Sidebar.ss, and change the uncommented code to this: <% include SocialButtons %>., (*16)
Cloudy comes with 2 color schemes. Green and base.
The base color scheme mainly uses the Twitter Bootstrap colors. Fortunately they fit very well with the Silverstripe colors., (*17)
Switching between the color schemes can be done by editing the templates/Page.ss file. Find the line that contains require themedCSS and change it to either cloudy-base or cloudy-green, or which ever additional color scheme you might have installed. The name corresponds to the css file to be found in the css directory., (*18)
Editing the css is fairly straight-forward. It is recommended to not overwrite the current themes, but to make your own, and call it something like cloudy-myscheme.
The recommended way is to do this by using Compass, but you can also perfectly just use plain CSS., (*19)
css/cloudy-base.css or css/cloudy-green.css, and create your own file in the css directoryrequire themedCSS part in templates/Page.ss to reflect your new scheme.Using Compass you can take advantage of built-in variables and all modules from the Twitter Bootstrap 2 library, which have been carefully converted to SCSS by Brajeshwar.
Start by having a look at scss/cloudy-green.scss. That should take you a long way. And don't forget to cd into the cloudy directory and running compass watch., (*20)
When working with compass you may remove the hash in front of the last line in config.rb: sass_options = {:debug_info => true}. If you do this, compass will compile your stylesheets with FireSass debug info, which is very useful when developing (you'll need to install the FireSass Firebug extension for this to work)., (*21)
The theme contains a "Preview" feature to show some live examples on changing colors, and to show some typography and module examples., (*22)
The "Preview" feature adds some JS/CSS and html code to the theme. As these are only for illustration purposes, it also contains a script to easily remove the entire preview feature., (*23)
Usually the "Preview Feature" can be removed easily by just pressing the button Delete preview files on the home page.
If this for some reason doesn't work, here's some info how to solve this:, (*24)
chmod -R 777 ./cloudy._deletepreviewfiles.php. This is the file that should have automated your work in the first place._preview directorytemplates/Includes/ delete Preview.ss and PreviewAssets.ss
javascript/preview.js
scss/preview.scss and css/preview.css"
templates/Page.ss and delete the line <% include PreviewAssets %>
templates/Layout/Page.ss and delta the line <% include Preview %>
Remember: If you are doing this on a live site, once the preview files have been removed, it is good practice to remove the write access to your theme folder., (*25)
As Cloudy has been designed and build as a contribution to the 2012 Silverstripe Theme Contest, not all features made it to become part of the initial release.
The following features are planned for coming releases:, (*26)
docs/en folder. This way other translations have proper place.editor.css styles within tinyMCEA Silverstripe theme based on Twitter Bootstrap
Apache License
bootstrap theme silverstripe