Here’s a little “How To” document to describe converting bootstrap templates to Sitecake. I hadn’t found a something like this, hopefully it helps someone.
Also, this will fix the bug in the live demo where anchor tag classes are removed by Sitecake (see Sitecake removes button classes from <a>?)
We’ll use the Bootstrap 3 “Jumbotron” template as an example (which is what the Sitecake live demo site uses, and seen here https://github.com/twbs/bootstrap/tree/master/docs/examples/jumbotron).
-
Install and configure Sitecake as you would normally (https://github.com/sitecake/sitecake/wiki/SiteCake-Basics) alongside the jumbotron template.
-
Move the bootstrap.css jumbotron.css file (or minified versions, .min.css) in to the css/ folder (don’t know if it is 100% necessary, but might as well) and update index.html so that it points to the correct files in css/.
-
Move bootstrap.js and any other needed .js (or min.js) to the js/ folder and make sure index.html points to the correct file. (don’t know if this is 100% necessary, but might as well)
4)Add “sc-content” to the class of div containers that you want to edit. Example:
<div class="jumbotron">
<div class="container sc-content">
<h1 class="display-3">Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
</div>
</div>
-
If you try to edit the site with Sitecake now, it will remove the display-3 and “btn btn-primary btn-lg” classes. To tell Sitecake to not do that, we need to tell Sitecake about these “User Styles” (https://github.com/sitecake/sitecake/wiki/User-Styles). Add the following to css/jumbotron.css:
.sc-content h1.display-3 {
font-size: 4.5rem;
font-weight: 300;
}.sc-content a.btn.btn-primary.btn-lg {
display: inline-block;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
border: 1px solid transparent;
color: #fff;
background-color: #0275d8;
border-color: #0275d8;
padding: .75rem 1.25rem;
font-size: 1.25rem;
line-height: 1.333333;
border-radius: .3rem;
}
The above was obtained by inspecting the elements using “Developer Tools” in Chrome (or anything similar). The dot between the classes means “Select tags with each of these classes.” Remember to put the last-added class (e.g., btn-lg) at the bottom of the list (e.g., padding through border-radius).
-
Sitecake still won’t work because it has difficulty with the line:
as the user style engine has difficulty matching the “.sc-content p a.btn.btn-primary.btn-lg” selector. Instead, change the paragraph tags to divs or remove the tags entirely (which probably makes sense semantically as well):
<div><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></div>
or
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a>
-
Now you can open sitecake.php and you should be able to edit the Jumbotron region without changing the button layout! You can’t edit button text (something with layering, perhaps? maybe someone can figure that out for this how-to?), so button text will still have to be done manually in html.
-
The same process applies with the other editable areas (delete sitecake-temp/ first). Using the bootstrap 3 template, you can make the three small text areas as follows:
<div class="col-md-4 sc-content"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <div><a class="btn btn-secondary" href="#" role="button">View details »</a></div> </div>
and if using the bootstrap 3 template, add the following to jumbotron.css
.sc-content a.btn.btn-secondary {
display: inline-block;
padding: .375rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
border: 1px solid transparent;
border-radius: .25rem;
color: #373a3c;
background-color: #fff;
border-color: #ccc;
}
again, putting the btn-secondary tags last including border-color, otherwise no border will show up. The Sitecake live demo site uses btn-default instead of btn-secondary and would have to be adjusted accordingly.
- Finally, you can add the sc-nav classes, if desired, as described here https://github.com/sitecake/sitecake/blob/master/src/resources/config.php#L46 or in the sitecake template.