Select Page

Reset Bootstrap Padding/Margins for Theming

I use Twitter Bootstrap as a base theme for most of my sites in Drupal.  There are a ton of build in features that make theming a quick and enjoyable process.  One thing that bugs me is the default padding and margin settings.  They are a headache to deal with so here is a CSS reset to remove some of the more annoying settings.

Place this at the start of your custom CSS file and set your own padding/margins!

html,body {
  height: 100%; margin: 0px; padding: 0px; }

#navbar {
  margin-bottom:0; }

.alert {
  border-radius: 0; }

.container {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto; }

.col-xs-1, .col-sm-1, .col-md-1, .col-sm-1, 
.col-xs-2, .col-sm-2, .col-md-2, .col-sm-2, 
.col-xs-3, .col-sm-3, .col-md-3, .col-sm-3, 
.col-xs-4, .col-sm-4, .col-md-4, .col-sm-4, 
.col-xs-5, .col-sm-5, .col-md-5, .col-sm-5, 
.col-xs-6, .col-sm-6, .col-md-6, .col-sm-6, 
.col-xs-7, .col-sm-7, .col-md-7, .col-sm-7, 
.col-xs-8, .col-sm-8, .col-md-8, .col-sm-8, 
.col-xs-9, .col-sm-9, .col-md-9, .col-sm-9, 
.col-xs-10, .col-sm-10, .col-md-10, .col-sm-10, 
.col-xs-11, .col-sm-11, .col-md-11, .col-sm-11, 
.col-xs-12, .col-sm-12, .col-md-12, .col-sm-12 {
  position: relative;
  min-height: 1px;
  padding-right: 0;
  padding-left: 0; }

.row {
  margin-right: 0;
  margin-left: 0; }

.footer {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none; }

.panel {
  border:none; }

PHP rawurlencode()

Probably a silly mistake that I had to deal with… but if your clients upload image files with spaces in the file name you will end up with broken image links.  When returning filenames or paths from the database you want to replace spaces with the HTML entities.  But using urlencode() or  htmlentities() will not work for this purpose.

Instead use:


Drupal Camp Phoenix

Presenting today at Drupal Camp Phoenix! They put me right after the co-founder of Pantheon who was the keynote speaker at Drupal Camp 2013.  This will either go very well or end badly….

The most important person you work with is the client yet many companies turn over terrible instructions or confusing administration interfaces.  I give tips and explain how to build an amazing client admin panel.


Offset #anchor link

Use this to offset anchor links.  Reasons for this might include using a fixed navigation bar that will cover part of the section you are loading.

Add a class to your anchor.

‹a class="anchor" id="top"›‹/a›

Now apply the offset script.

a.anchor {
  display: block; 
  position: relative; 
  top: -90px; 
  visibility: hidden; }

Dangerous Bullets

Because sometimes default bullets are boring…. Some dangerous bullets!

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px; }
ul li {
  background-image: url(custom-bullet.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px; 
  padding-left: 14px; }


A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
Use: include jquery, include jquery.fitvids.js
Add: fitvid class to video container divs
FitVids >>

    // Target your .container, .wrapper, .post, etc.

Transparent Shadow

Transparent Shadow
Modify positioning (use rgba color values for transparency):

.shadow {
  -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
  -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
  box-shadow: 5px 5px 10px rgba(0,0,0,0.7); }