Unreinvented Wheels: CSS

Tuesday, September 10, 2013

Randomly Rotate Strings for Display on a WordPress Page Using PHP (Shortcode Exec)

I was asked by our marketing team if we could have our WordPress-based homepage randomly display one of several possible tag lines. Well, sure... with PHP it's dead simple. And if you have Shortcode Exec PHP installed in your WordPress site, it's actually even easy under WordPress.

Here's how I did our particular page. It will randomly choose a string from a PHP array, and present it in a clean looking, rounded-corner wrapper. If you use this, of course you may want to modify the strings and styles to suit your needs. Note, rounded corners aren't fully supported by most IE versions ~ I try not to waste time developing for IE, but if you have a solution, feel free to post it here.

Create a new Shortcode Exec PHP like so...

/* Rotate random hyperbole lines on the homepage */
$hyperboleStrings = array(
1 => "We have the best product",
2 => "Our solution solves problems",
3 => "Industry leading solutions"
);
$whichStringToShow = rand(1, sizeOf($hyperboleStrings));
echo $hyperboleStrings[$whichStringToShow];

Now all you have to do is save it and go to the page you want to add it to. In my case, I had to go to Appearance -> Editor -> header.php...

And, here's my CSS...

.rounded_corners {
-moz-border-radius: 10px; /* firefox */
-webkit-border-radius: 10px; /* safari, chrome */
-khtml-border-radius: 10px; /* KDE HTML layout engines */
border-radius: 10px; /* css3 */
}
#hyperbole-line {
background-color: #20b0b0;
width: 85%;
padding: .25em;
text-align: center;
margin: 10px auto 10px auto;
color: #fff;
font-style: italic;
font-size: 1.75em;
padding: 0;
letter-spacing: 1px;
}

Thursday, August 22, 2013

Firing CSS3 Transition on Page Load Event (in WordPress)

CSS3 has some pretty cool stuff ~ among these are transitions and animations. So, when I was tasked with making the tagline on my company's website "pop" or stand out somehow, CSS3 is the first thing that came to mind.

It was fairly easy, but the one trick I needed to figure out was how to make it all happen when the page is finished loading -- of course, WordPress didn't really make this easy on me... it has a nasty habit of not rendering or interpreting the code that I tell it to. Naturally.

Anyway, here is the tagline...
(forgive the poor quality of the GIF I used to record the browser window)

Here is the HTML event hook, which I added this to my header.php file...
(don't you just love that WordPress syntax BS?)

And add an ID attribute to the body tag, with a value of "body" for the hook above...
(ignore the elipses, I have other stuff in that tag that you don't need to care about)

Here is the CSS...
(the tagline container is classed "header-right" ~ the only thing you need to care about is the "#body.loaded" selector)

.header-right div {
color: #ffffff;
  font-size: 1.8em;
  font-weight: normal;
  text-align: right;
  line-height: 1;
  margin-right: 15px;
  font-style: italic;
  text-shadow: 0 0 0 #dd5500;
/*the following configures our transition effect - 500/200ms are
delays to give the page time to render before doing transitions*/
  transition: color 2500ms ease-out 500ms, text-shadow 2000ms ease-in 200ms;
}
#body.loaded .header-right div {
  color: #178582;
  text-shadow: 0 0 180px #ff9944;
}

How does it work? Well, basically, you give the body node (which is what onLoad works with) an ID that we can later use to grab it and work with. Then, a JavaScript listens for the onLoad event; and when it fires, that same JavaScript will apply an attribute (class="loaded") to the body tag. Then, CSS will naturally go in and apply the transition effect (since the selector for "loaded" now exists in the document).