I wanted to create a “sticky note” like call to action on this WordPress based web site. Here’s what I came up with:
First off, I found the Simple Pull Quote plug-in from The Mighty Mo Design Co and installed it on my WordPress site. This did part of the job in making it easy to identify the text I wanted displayed and sliding it off to the right as a pull quote. I added sections in my pages with text that looked like the following to identify the call to action.
[ pullquote]
<div><a href="https://luminfire.com/wordpresstech/index.php/ contact-us/project-request-form/" target="_blank">Request a demonstration of fmIgnite.</a></div>
[ /pullquote][pullquote] [/pullquote]
Now I needed to modify the CSS to look like generic sticky note. I edited the simple-pull-quote.css file in the /wp-content/plugins/simple-pull-quote/css/ directory.
Here’s the final CSS that I created to create the effect:
/* Makes pull quote look like a sticky note. Tim Cimbura 3/30/12 */
.simplePullQuote {
font-family:"Reenie Beanie",arial,sans-serif; /* Google handwriting type if available */ text-decoration:none; text-indent:0px; font-size:150%; font-weight:normal; line-height:100%; text-align:center;
color:#000; background:#ffc; /* Yellow */ float:right; padding:20px; border:0px;
display:block; height:6em; width:12em;
position:relative; top:-10px; margin:10px 10px 10px 10px; /* From the surrounding text */
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1); /* Drop shadow */ -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); box-shadow: 5px 5px 7px rgba(33,33,33,.7);
-o-transform:rotate(2deg); /* Rotate the note a few degrees to the right */ -webkit-transform:rotate(2deg); -moz-transform:rotate(2deg); }
Enjoy!
Tim Cimbura – CEO, CFO and Software Engineer
Tim is an expert in creating custom business solutions that make businesses more effective, productive, and profitable. He specializes in rapid application development with Claris FileMaker, Laravel, and WordPress. He also knows Apple macOS technology inside and out.