How to Replace Text with CSS

Replacing text with CSS is not something I use often, but there are some specific cases where it comes in handy. If you have the ability to change text on the server-side, I always recommend that first. CSS text replacement should be a last resort, as that is not what CSS is intended for.

If you’re working within the limitations of a CMS, or you don’t have the ability to change your markup, CSS text replacement might be your only option.

There are a few ways to handle it. Let’s walk through the options, and explain how they work, and why other methods fail.

(more…)

Add Line Breaks to CSS Generated Content

You’re probably familiar with CSS generated content, and how it is used in conjunction with the :before & :after pseudo-elements. Maybe you read our article on replacing text with CSS.

A common question we get is, “How can I add a line break to my CSS content?”

Good news! Line breaks are possible with CSS, but there’s a little more to it than just inserting an entity conversion code into your content declaration.

(more…)

Allow Direct Database Access on GoDaddy Shared Hosting Plans

We have recently setup CodeGuard for one of our clients, and we’re in the process of setting up numerous sites on the CodeGuard platform. Getting the files adding for backup was as easy as providing FTP credentials. Backing up the database, however, proved to be a bit more difficult.

If you’re having trouble setting up database backups for CodeGuard on a GoDaddy shared hosting plan, it’s likely due to the following configuration option.

(more…)

Customizing mailto: Links

If you’ve ever wondered how to customize a mailto: link, getting it to include your own subject line, list of recipients, cc or bcc someone, and pre-populate a message in the email body… look no further.

First, let’s look at a standard mailto: link.

<a href="mailto:onecooldude@gmail.com">onecooldude@gmail.com</a>

Example

Nothing special there. When you click that link, it opens up the user’s default mail program, and will populate onecooldude@gmail.com in the TO field.

(more…)

Facebook Debug Tool for Open Graph Meta Tags

I just came across a tool from Facebook that helps you debug your Open Graph data.

The Facebook Debugger tool provides valuable insight into exactly how Facebook sees your webpage.

  • Fix warnings about improper usage of Open Graph <meta> tags
  • View all thumbnail images Facebook sees for that page
  • View all Open Graph tags, including: og:url, og:type, og:title, og:description and more
  • See exactly what Facebook’s scraper sees for your URL

(more…)

Facebook Share Multiple Images (og:image tags)

Add Multiple Images to Facebook Share Link

You might be wondering how Facebook choses which thumbnail images to show when someone shares a link on Facebook. It might seem random, but there is a way for you to control which images Facebook uses.

Facebook’s Open Graph allows you to add <meta> tags to the <head> section of your site. One of these <meta> tags is the og:image tag. It will look something like this:

<meta property='og:image' content='http://www.domain.com/path/to/image.jpg' />

It is possible to add multiple og:image tags to a page. For each og:image tag you add, Facebook will add that image to the list of available thumbnails to use each time the page is shared.

(more…)

Why WordPress?

Before I dive into all the great things about WordPress, why you should build your site with it (or switch if you’re on one of the other platforms)… let’s start with a few stats:

Now that that’s out of the way…

(more…)

WordPress: Display all images attached to a post/page

NOTE: Nov 20, 2013 – This post has been updated to include more examples from the comment thread. View the updated post here »

You’ve probably struggled with the default output of the WordPress gallery shortcode. It’s OK. We all have. By default, WordPress wraps the entire gallery in a div, and then further wraps the images in dl & dt tags.

There are a few, excellent WordPress image gallery plugins that address gallery shortcode styling (File Gallery Plugin), as well as the invalid XHTML code (Cleaner Gallery Plugin). These plugins work great for many things, but they also add a lot more functionality.

If all you want to display is a simple list of all the image attachments that are attached to a particular page/post, and you just want the img tags, there’s a much easier way to do it.

(more…)