Configuring Bootstrap CSS

joomlaTemplatesBootstrap is a responsive framework that lots of Joomla templates make use of.  Sometimes you'll want to change the look of some Bootstrap elements, so this article describes some of the elements that I've managed to change.

Visit the Bootstrap website to find out more.


Custom CSS

Typically a template makes use of a custom.css file where you'll be able to keep your custom changes.  Note that if you make changes to the existing CSS files, they will get overwritten every time you upgrade your template.

  1. Start by logging on as a Super User.
  2. Go to Extensions > Templates > Templates.
  3. Click the YourTemplate Details and Files link.
  4. In the Templates: Customise screen, select the Editor tab (selected by default).
  5. Open the Custom.css file for editing

The Custom.css that you are editing will not be overwritten if you upgrade your template or Joomla in the future, any styles that you added to Custom.css will remain as is.

 

Table colours

Using Firebug you can browse through your website's elements to determine where they get their CSS from, and subsequently write new CSS code to change the appearance of these elements.  Here is some example code for elements that I have changed.

Tables can be 'zebra striped' in Bootstrap.  These three CSS blocks of code allow you to set the colour of the even and odd stripes and the hover colour.

.table-striped > tbody > tr:nth-child(even) > td, .table-striped > tbody > tr:nth-child(even) > th {
background: #111111;
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
background: #222222;
}

.table-hover tbody tr:hover td {
background: #333333;
}

  

Thanks for visiting.