Skip to content

Tips, Tricks, and FAQ

katypool edited this page Jul 18, 2014 · 1 revision
  1. How do I use Bootstrap class components in the text editor, like buttons and labels?

  2. Can i use blocks and regions?

  3. Can i use SASS/COMPASS?

  4. Can i use a 6, 16 or 96 column responsive grid?

  5. How do i get rid of this gross header?

  6. Where can i get some responsive panels layouts?

  7. My custom bootstrap library is not being detected?

  8. Where did my titles go?

  9. Can i use a fluid layout?

How do I use Bootstrap class components in the text editor, like buttons and labels?

To use these classes you need to configure the HTML text format setting that comes with Panopoly. The "class" attribute is not allowed by default but you can put it on the whitelist. To allow the "class" attribute for all elements you simply add it to the bottom row that starts with the @ character. The attributes listed after the @ will be enabled for ALL elements. To enable it for a specific element you add it to the desired element in the list.

If you want to use the Bootstrap button classes in a link for example, just add a node like normal and select the HTML editor. Then write your link like so:

<a class="btn btn-primary" href="contact">Contact us</a>

Can I use blocks and regions?

Generally with Kalatheme you will hardcode static elements such as the header into page.tpl.php and use panels layouts for everything else. That said this may not be the best use case for everyone so you can certainly use regions/blocks/context if you think that is appropriate.

Can i use SASS/COMPASS?

See our page on SASS/COMPASS

Can i use a 6, 16 or 96 column responsive grid?

By default Kalatheme ships with a 12 column grid (this is the bootstrap default) however you can change your grid size by creating a custom bootstrap library here and then uploading it with our subtheme generator. Remember your number theory: odd and prime numbers do not make good grid sizes. Try multiples of 4 or 6.

How can I get rid of this gross header?

Kalatheme's default page.tpl.php mimics the structure seen on the Bootstrap site but we understand if this look is not for everyone. That is why you can turn the header off if you want. In the theme settings remove the following options as shown below and you will have a headerless theme! Headerless settings

LOOK MOM! NO HEADER!

Headerless settings

Where can i get some responsive panels layouts?

If you did not install Panopoly before Kalatheme there is a good chance you don't have any panels layouts set up to use. The best way to get some great layouts that will work automatically with the bootstrap responsive grid ... of any column size is to download and install the Panopoly Theme module.

My custom bootstrap library is not being detected?

Kalatheme will look for either bootstrap.css or bootstrap.min.css in sites/all/libraries/mysubtheme_bootstrap/css and then will attempt to determine if the CSS file is Bootstrap 3 compatible. It does this by looking for a version comment string that usually appears at the top of every bootstrap css file. Some custom bootstrap libraries do not ship with this by default so just add the below to the top of both bootstrap.css and bootstrap.min.css and clear caches.

/*
 * Bootstrap v3.0.0
 */

Where did my titles go?

Kalatheme is built specifically for panels and panelizer. For that reason we want to give the user the maximum flexibility over their content. This includes removing the title from most of your content so that you can only add it into your content if you want. That said we realize this option is not the best for everyone so if you want to see your page titles show up normally you can check that option on in your theme settings. title

Can i use a fluid layout?

Bootstrap is actually fluid by default but is set to a specific width by its container class. You can usually set this to 100% on devices over 1200px to achieve a fluid layout. You may also be able to achieve a fluid layout using the Bootstrap Customization tool.