css

Sticky Footer with Omega Theme for Drupal

As I keeping going back and searching the d.o. issue queue for those few lines constantly I'll put them up here for future reference:

HTML, BODY {
  height: 100%;
}

#page {
  min-height: 100%;
  position: relative;
}

#section-content {
  padding-bottom: XX;
}

#section-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: XX;
}

Pure CSS, no template changes needed, works with Omega right out of the box.

Origin:

Styling input type="search"...

When you use a input of type search and try to style it via CSS you might go crazy upon all your fancy decoration not displaying properly. Even custom borders won't, at least on webkit browsers. It's easy to fix by applying the appearance property on the selector matching your input field. This will destroy the browser's default styling:

 -moz-appearance: none;
-webkit-appearance: none;

Update: and the button to reset the form value can be removed, too:

input[type=search]::-webkit-search-cancel-button {
     display: none;
}
Tags: 

Pages