Updating a theme for Bootstrap

Module boxes

Tiki is using the Bootstrap "panels" component (see http://getbootstrap.com/components/#panels) for module boxes (and for the "box" plugin). This means, by default, modules will have a border and a title and body background color. For themes such as FiveAlive whose module boxes don't have a border or background color, some rules are needed to override bootstrap.css. These rules only apply to modules and not to panels in other parts of the site such as on admin pages.

The HTML for the simple panel looks like this:

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

And the HTML for the panel with title:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

To prevent the border and the background color and adjust the white space accordingly, add these CSS rules to your stylesheet:

.module.panel { 
	background-color: transparent;
	border: none;
	box-shadow: none;
	margin-bottom: 20px;
}

.module.panel-default { 
	border-color: transparent;
}

.module.panel-default > .panel-heading { 
	background-color: transparent;
	border: none;
	color: inherit;
}

.module .panel-heading { 
	border-bottom: none;
	border-radius: 0;
	padding: 10px 0 5px;
}

.module h3.panel-title { 
	font-size: 1.55em;
	font-weight: 700;
}

.module .panel-body { 
	padding: 5px;
}

gezza: how about adding bootstrap class called "panel-body" to templates/module.tpl to line 87, than the above extras are not needed

Since modules have a title and body, it seems to me that the HTML best matches the Bootstrap panel with title and body. So they'll have to be overridden by the theme stylesheet. But maybe there should be a parameter in the module to switch off the borders and background colors. What do you think?

• there is param nobox=y for the fluffies

Maybe there could be a dropdown list for styling in the module options with bs styling options like:

• default
• primary
• success
• info
• warning
• danger
• + an option for noborder-nobackground