How to convert a Bootstrap template to Sitecake


#1

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).

  1. Install and configure Sitecake as you would normally (https://github.com/sitecake/sitecake/wiki/SiteCake-Basics) alongside the jumbotron template.

  2. 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/.

  3. 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 &raquo;</a></p>
  </div>
</div>
  1. 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).

  1. Sitecake still won’t work because it has difficulty with the line:

    Learn more »

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 &raquo;</a></div>
or
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
  1. 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.

  2. 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 &raquo;</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.

  1. 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.

Sitecake class sc-content is messing up styles in my template
Recommended 3rd party libraries
#2

Thank you, this is very useful


#3

I guess it is not, Sitecake is not looking into css files at all, it just works with class names in html syntax, so this shouldn’t be necessary (same with JS files and point 3)?).

Is it necessary to edit original library’s files? Theoretically overriding Bootstraps rules in custom css sheet should work as well (obviously this “custom.css” must be initialized after bootstrap.css or/and jumbotron.css). Am I right?

Probably matter of fact that Sitecake can’t work with or ? I know the tag is anchor, but maybe the role=“button” is the problem?

Desh.


#4

We posted an article dealing with the same subject, but the links were broken! We tried to edit the post, but a forum problem.
So, it follows, same subject, with corrected links:

Sitecake is the best cms in the world!
We lack time to write down the advantages and facilities.
For years we’ve used Sitecake as a gift to the community, followed by a quick start theme with Sitecake2.4.10 and Bootstrap4.2.1

View demo
https://youmarketing.com.br/download/demo/simply_sitecake/

Download
https://youmarketing.com.br/download/demo/simply_sitecake.zip

For a coffee we have the theme with CarouselBootstrap and Owlcarousel

Brasil:

Postamos um artigo tratando do mesmo assunto, porém, os links estavam quebrados! Tentamos editar a postagem, mas um problema do forum.
Então, segue novmaente, mesmo assunto, com links corrigidos:

Sitecake é o melhor cms do mundo!
Nos falta tempo para anotar as vantagens e facilidades.
Durante anos nós usamos Sitecake como um presente para a comunidade, seguido por um tema de início rápido com Sitecake2.4.10 e Bootstrap4.2.1

Visualizar demonstração
https://youmarketing.com.br/download/demo/simply_sitecake/

Baixar
https://youmarketing.com.br/download/demo/simply_sitecake.zip

Para um café nós temos o tema com CarouselBootstrap e Owlcarousel