css

Let Drupal Editors Pick a Color and use it in Template

I'm currently working on an image slider where each slide needs to have its own background color.

Letting editors choose a color is easy with the Color Field Module. Just install it, throw the Spectrum Color Picker into your libraries folder and add and configure a Color Field where ever it's needed. You can then simply access the user-entered color as a hex string in your template and use it to your liking (yea, that's one of the rare times where it's ok to use inline style, at least in my book).

Convert Hexadecimal Color Values to RGBa

I needed my color to have alpha transparency, however, the color value is only available as a hexadecimal string. Luckily I found this handy snippet to convert hex values to RGB(a), so thanks a lot to mekshq for sharing.

Just put it into your template.php and you're good to to to use hex2rgba() anywhere in your theme.

Multi line text shadow in Firefox

I've been using Fabien Doiron's Box-Shadow Method to create multi line padded text for a while. Just recently I had to find out that this isn't working anymore in later versions of Firefox.

Turns out starting with Firefox 32 Mozilla has introduced text-decoration-break: split as default. Setting it to box-decoration-break: clone; does the trick.

Thanks to Chris Coyier for pointing this out.

Tags: 

Responsive Sticky Footer with flexible height

Thanks a lot to Galen Gidman for sharing his solution to create Responsive, Flexible-Height Sticky Footers in CSS – works like a charm.

Update
Turned out this causes Firefox and Internet Explorer to ignore max-width: 100% on images. To solve this we need to add table-layout: fixed; to the body tag (CSS below updated).

Markup

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { 
  height: 100%; 
}
body {
  display: table;
  width: 100%;
  /* Fix for Firefox and IE to keep correct max-width behaviour on images: */
  table-layout: fixed;
}
.page-row {
  display: table-row;
  height: 1px;
} 
.page-row-expanded { 
  height: 100%; 
}
Tags: 

Remove indentation for Gumby Fancy Tiles

A great feature of the Gumby Framework is its ability to easilycreate responsive tiles. They call those Fancy Tiles. For example you can use the following mixin to create a equally distributed grid with 5 columns on a desktop, 3 on a tablet and 2 on a mobile screen.

ul.fancy { 
  @include fancytiles (5,3,2);
}

What kept bugging me with that is that each tile gets a padding on both its left and the right side. This makes the entire Fancy Tiles show up indented compared to the columns of Gumby's regular grid system.

Pages