Cookillan Alert styling: Beeb

on May 31, 2012 in Projects with 1 comment by

In the Cookillian version 1.1 release post, I had promised to show how to style an alert. With the following styling, I have taken example of the BBC website, and aptly named it “Beeb”.

The styling is “fluid”, which allows it to change the layout depending on the screen resolution. This is especially helpful on mobile browsers, where the screen real estate becomes limited.

 

Setup

To get started, access Cookillian in the WordPress administration area through the Settings -> Cookies. Under the heading Alert Settings, you will find the option Alert Styling with the options Default and Custom. Selecting the Custom option, provides us with an area where we can add CSS code. This is where all the magic happens.

CSS Code

All we need to do now, is copy+paste the following bit of CSS code into the Custom Alert Style box:

.cookillian-alert {
  position: relative;
  display: table;
  width: 100%;
  padding: 10px 40px;
  background-color: #222;
  color: #bbb;
  font-size: 13px;
  line-height: 16px;
}
.cookillian-alert a {
  color: #F6A21D;
  font-weight: bold;
  text-decoration: none;
}
.cookillian-alert .close {
  display: none;
}
.cookillian-alert .alert-heading,
.cookillian-alert .buttons {
  display: table-cell;
  width: 30%;
}
.cookillian-alert .alert-heading,
.cookillian-alert p {
  padding-right: 20px;
}
.cookillian-alert .alert-heading {
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  color: #fff;
  text-align: right;
}
.cookillian-alert p {
  margin-bottom:10px;
}
.cookillian-alert .buttons {
  padding-bottom: 10px;
  vertical-align: bottom;
}
.cookillian-alert .buttons .btn {
  display: block;
}
.cookillian-alert .buttons .btn-ok {
  font-size: 16px;
}
.cookillian-alert .buttons .btn:before {
  margin-right: 5px;
  vertical-align: bottom;
}
.cookillian-alert .buttons .btn-ok:before {
  content: "2713";
  font-size: 22px;
}
.cookillian-alert .buttons .btn-no:before {
  content: "2717";
}
@media (max-width: 767px) {
 .cookillian-alert {
   padding: 5px 5px;
 }
 .cookillian-alert .alert-heading,
 .cookillian-alert .buttons {
   width: 15%;
 }
 .cookillian-alert .alert-heading,
 .cookillian-alert p {
   padding-right: 10px;
 }
 .cookillian-alert .alert-heading {
   font-size: 15px;
   line-height: 19px;
 }
 .cookillian-alert .buttons {
   display: table;
   width: 100%;
   border-top: 1px solid #bbb;
   padding-top: 20px;
 }
 .cookillian-alert .buttons .btn-ok {
   font-size: 14px;
 }
 .cookillian-alert .buttons .btn-ok:before {
   font-size: 16px;
 }
}

Now all that’s left to do is pressing the Save Changes button at the bottom of the screen, and presto! Yes, it really can be that easy. And as you’ve noticed, using a bit of CSS magic, we don’t need any images for the icons.

 

TIP! Cookillian doesn’t normally show an alert for users that have logged in to WordPress. So you may want to select the Debug Mode under the heading Advanced Options (near the bottom of the Settings page). This allows you to see the alert in action, without interrupting most of the normal traffic flow. Do remember to turn it back off when you’re done!

 

One comment

  1. posted on Dec 26, 2013 at 12:42 PM  |  reply

    […] Este código lo puedes encontrar en la web del autor en su artículo Cookillan Alert styling: Beeb. […]

Join the discussion

Your email address will not be published. Required fields are marked *