animal public e.V.

At this project my work was to migrate all old entries from a Mambo system to WordPress and create an unique theme. You can see the result here:
animal-public.de
.

For the theme the YAML framework was used and these plugins:

  • Contact Form 7 with Really Simple CAPTCHA
  • Exclude Pages from Navigation
  • Iframe
  • Joomla/Mambo To WordPress Migrator (migration)
  • Newsletter
  • Post Type Switcher (migration)
  • Quick Cache
  • Regenerate Thumbnails (migration)
  • SpeakUp! Email Petitions
  • Velvet Blues Update URLs (migration)
  • WP-Paginate
  • WP Realtime Sitemap

jQuery

  • jquery.easing.js / jquery.easing_compatibility.js
  • jquery.elastic.js
  • jquery.label_over.js
  • slides.jquery.js
  • fancybox

CSS3 Textbuttons

For this kind of buttons no images are needed. It’s just CSS3 and text. All icons are taken from the UTF-8 encoding table. This provides the facility to change the icon color and size just with CSS font settings.

You can see the example page here:
CSS3_textbuttons.html

1. Step: Use UTF-8

<meta charset="utf-8">

2. Step: The button style

.button {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  line-height: 1.5em;
  height: 1.5em;
  border-radius: .75em;
  border: 1px solid #666;
  padding: 0 .5em;
  margin: 0 10px 10px 0;
  background: #7abcff;
  background: -moz-linear-gradient(top, hsla(210,100%,74%,1) 0%, hsla(210,91%,67%,1) 44%, hsla(210,84%,59%,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,100%,74%,1)), color-stop(44%,hsla(210,91%,67%,1)), color-stop(100%,hsla(210,84%,59%,1)));
  background: -webkit-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: -o-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: -ms-linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  background: linear-gradient(top, hsla(210,100%,74%,1) 0%,hsla(210,91%,67%,1) 44%,hsla(210,84%,59%,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 );
  text-shadow: 1px 1px 1px #666;
  box-shadow: 1px 1px 2px #666;
}
.button:hover {
  color: #eee;
  text-shadow: none;
}
.button:active, .button.current {
  color: #eee;
  text-shadow: none;
  box-shadow: none;
  -moz-box-shadow: none;
  background: #4096ee;
  background: -moz-linear-gradient(top, hsla(210,84%,59%,1) 0%, hsla(210,91%,67%,1) 56%, hsla(210,100%,74%,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(210,84%,59%,1)), color-stop(56%,hsla(210,91%,67%,1)), color-stop(100%,hsla(210,100%,74%,1)));
  background: -webkit-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: -o-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: -ms-linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  background: linear-gradient(top, hsla(210,84%,59%,1) 0%,hsla(210,91%,67%,1) 56%,hsla(210,100%,74%,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#7abcff',GradientType=0 );
}

For the gradient style the http://www.colorzilla.com/gradient-editor/ was used again.

3. Step: Add the icon

.button:before, .button:after {
  font-size: 1.125em;
}
.button:before {
  margin-right: 5px;
}
.button:after {
  margin-left: 5px;
}
.button.email:before {
   content: "\2709";
}

The :before or :after pseudo element is used to place the icon inside the button. The font-size makes it a little bit bigger and the margin seperates it from the other text. At last the content with the HEX code of the UTF-8 character is needed. Notice, that the HTML 4.0 character entities or the numerical HTML encoding of the Unicode character dosn’t work.

4. Step: The button markup

<a href="#" class="button email">Email</a>

SASS border-radius mixin

This SASS mixin makes it easy to generate the CSS code for a border radius on all corners, upper corners or bottom corners of an element. Also the different -moz- prefix is supported. Thanx to Kosmar for brainstorming.

More informations about border-radius: http://www.css3.info/preview/rounded-border/

@mixin border-radius($top_right, $bottom_right: $top_right, $bottom_left: $bottom_right, $top_left: $top_right)
  border-top-left-radius: $top_left
  border-top-right-radius: $top_right
  border-bottom-right-radius: $bottom_right
  border-bottom-left-radius: $bottom_left
  -moz-border-radius-topleft: $top_left
  -moz-border-radius-topright: $top_right
  -moz-border-radius-bottomright: $bottom_right
  -moz-border-radius-bottomleft: $bottom_left

Usage:

@include border-radius(10px)

to create the CSS code for a border radius of 10px for all corners.

@include border-radius(10px,0)

to create the CSS code for a border radius of 10px on the right and left upper corner.

@include border-radius(0,10px)

to create the CSS code for a border radius of 10px on the bottom right and left corner.