Decorative Flower
Her Realm, Personal website and blog of Cole
Apr 12

Make Growmap AntiSpam Compatible With WPTouch in Mobile Browsers

Growmap AntiSpam and WPTouch Mobile don't play well together in Chrome

Growmap AntiSpam and WPTouch Mobile don’t play well together in Chrome for Android

A few days ago, Maggie posted in BloggerPR about how Growmap Anti-Spam wasn’t working right on the mobile version of her site, which is powered by WPTouch. I took a look and, sure enough, mine wasn’t working either. In short, the checkbox looked mishaped. I described it as “melted.” Neither the checkbox nor the label text allowed you to select the checkbox. Strangely enough, even though it didn’t look like it was selected, you could still submit a comment. Overall, not very good.

So I delved  into the code to determine what was going on. The checkbox was indeed a checkbox, and it wasn’t even styled. I determined that it must be something in the theme, but this isn’t true. The issue was only occurring with certain browsing including but not limited to:

  • Chrome on Android
  • Amazon Silk (Kindle)
  • Android’s default browser

However, this isn’t an issue with Firefox with Android so you may not even have noticed it if you don’t typically view your own site from your smartphone or tablet or if you don’t use those browsers. Nevertheless, the majority of your mobile visitors could be unable to leave comments, which means less engagement for your effort and possibly lost readers.

Why wants that? Not you and me, that’s for sure!

However, you can fix it. In fact, I have two solutions. Both simply use CSS to reset all checkboxes on your mobile theme, so the box and label text for Growmap AntiSpam works correctly, and your visitors can comment all night long!

Method 1 — Jetpack

  1. Log in to your WordPress dashboard.
  2. Select Jetpack from the navigation.
  3. Enable the “Custom CSS” module.
  4. Enable “Mobile Theme” through Jetpack.
  5. Click “Appearance.” Choose “Edit CSS”
  6. Click “Edit” next to mobile-compatible and choose “Yes”.
  7. Paste the following code into the text box.
  8. Click “Save stylesheet.”


input[type="checkbox"] {
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
-ms-appearance: checkbox !important;
-o-appearance: checkbox !important;
appearance: checkbox !important;

Let me know if this advice helps you!If, for some reason, you cannot edit this file or this fix doesn’t take, I have a second option!

Method 2 — WPTouch

  1. Log in to your WordPress dashboard.
  2. Select “Editor” from Appearance.
  3. Choose WPTouch basic theme from the top down menu.
  4. Open style_structure.css.
  5. Copy the follow code to the end of the stylesheet and save. Voila!
input[type="checkbox"] {
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
-ms-appearance: checkbox !important;
-o-appearance: checkbox !important;
appearance: checkbox !important;

Mar 05

I Have Strong Feelings About Blogging

Actually, they’re very strong feelings. And they’re somewhat elitist. I can sum them up like this. You shouldn’t own a blog if..
Now go blog about this

  • You cannot install your own blog (and it only takes 5 minutes!)
  • You cannot upgrade your blog
  • You don’t know how to edit HTML or CSS
  • You cannot work with PHP
  • You don’t understand what a MySQL database is

Maybe I’m showing how dated I am here, but I come from a time when you couldn’t have a blog if you didn’t do it yourself. There weren’t people who would help you — for free or otherwise — and there were far fewer plugins. When you wanted to do something, you had to learn how to do it.

And it was amazing. 

Honestly. I learned all the skills I have more. I made friends. I certainly cemented myself as a geek. I love that I have these skills in my repertoire.

It just shocks me that people can run blogs — successful blogs at that! — and not have any of these skills. When their site goes down, when a plugin messes something up, when they want to change something, they need to ask for help. More often than not, they pay for it. This is simply inconceivable to me. You’re wasting your money with something that you can — and should — do yourself!

And I realize that it makes me look like an asshole. I get it. I do. It’s like saying that you shouldn’t own a car if you can’t build an engine. Or that you shouldn’t own a computer that you can’t maintain? But people do. It is the new normal. (Perhaps people used to think this when cars and computers were new?) And who am I to say that these people shouldn’t spend money if they have it to spend? Some people have to option to be less frugal, and I am envious!

However, I am not alone. The Shareaholic blog provides some basics about HTML usage along with this quote:

No matter how many pageviews you have, having an understanding of HTML is key to having a successful blog.

A commenter there also made a great point: you need to know HTML if you want to optimize your website for search engines, too. This is because you need to use keywords in your image names, anchor text, titles and headings, just to name a few locations. You won’t be able to do this if you don’t have at least a basic understanding of HTML.

But I firmly believe that bloggers need to know more than just HTML. This enables you to retain complete control of your website — and of your wallet. Perhaps the problem is that the people who do understand this don’t realize how well we understand it. Maybe the tutorials we write about CSS  or using the WordPress database are too confusing. But everything is confusing at first, and maybe you need a different source when it comes to learning.

Nevertheless, the world is changing. People are driving their cars without any knowledge of how to fix them. In fact, people who fix their own often do so out of necessity rather than because society expects it, and no one loses pride over it. For me, it’s still a matter of pride to do things with my own hands, er, fingers.


Dec 16

How to Use Custom Fonts on Your Website (In ALL Browsers)

If you’re a WordPress user, you may have used Cufon to make your titles appear on custom fonts. This isn’t a terrible way, but every extra plugin slows down your website. Plus, people who don’t use Cufon don’t have that option. So what can you do?

Thanks to CSS 3, you can simply use the @font-face rule to show anything you want in a specific font as long as you have the TTF.

First, you must locate the TTF file on your computer and make an EOT copy to ensure compatibility with Internet Explorer. You can use this TTF to EOT converter to get both files. Then, upload the files to your server. For my purposes, the TTF and EOT files reside in my theme directory. However, you might make a folder such as “current-theme/fonts” if you use many fonts.

Secondly, you must specif the location of the file on your server and the name you’ll use for the font in your CSS like the following.

font-family: MyFont;
src: url('My-font.ttf'),
url('My-font.eot'); /* IE9 */

In this example,  we’re going to use the font name “MyFont” and the font files are calls “My-font.” They’re located in the same directory as the stylesheet.

The next step is to actually use the

{font-family: MyFont;

All my h1s will use “MyFont” as the face. I can now use MyFont as the face for any element within my stylesheet. It doesn’t matter whether the viewer has the original font file on her computer.

Now, not all mobile devices support this method even when they claim to support @font-face. This is the case with IE9 on Windows Phones, the stock browser on Android 2.1 and Symbian’s Nokia browser. However, Safari on iOS4 and greater, Android 2.2 stock browser and all browsers on Android 4.0 seem to be compatible. When the browser doesn’t understand @font-face, a default font will show  — either the system default (when you haven’t specified a body font) or the default font face you use for your body.

This is still better than nothing, of course.

Let me know how this works for you!


Skip to toolbar