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.

NOTE: In all of the following examples, you could use either pseudo-element, :before or :after. For these CSS text replacement methods, they are interchangeable.

Text Replacement with Pseudo-elements & CSS Visibility

A good argument can be made that this is the best method. It requires the smallest amount of markup, and works well for those who have little-to-no control over their HTML markup.

Here’s some HTML:

<p class="replaced">Original Text</p>

You want to replace “Original Text” with different content. Here’s how you can replace that text using only CSS.

.replaced {
	visibility: hidden;
	position: relative;
}

.replaced:after {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	content: "This text replaces the original.";
}

Giving visibility a value of hidden hides an element, but leaves space where it would have been. In other words, it does not change the layout of the page. (This is different from display: none;, which we’ll cover below.) This is why we need to use positioning. Without absolutely positioning the pseudo-element, the new text would appear after the spot where the original text was supposed to be. By using absolute positioning, we can place the new text in exactly the same spot as the original text was supposed to appear.

Text Replacement with Pseudo-elements & CSS Display

This method requires a little extra markup in your HTML, but uses less CSS. Like the example above, it also utilizes a CSS pseudo-element to insert content onto the page.

The HTML (note the extra <span> tag that was not in our example above):

<p class="replaced"><span>Original Text</span></p>

Using the CSS display property, you can hide the content inside the <span> tag, and then attach a pseudo-element with your new content to the <p> tag. You do not need to use absolute positioning here because display: none; completely removes the element from the page, and it does affect the layout. It’s as if the text inside the <span> element never existed.

Here’s the CSS:

.replaced span {
	display: none;
}

.replaced:after {
	content: "This text replaces the original.";
}

display: none; will not work without the extra markup

If you didn’t have that extra element (in this case, the <span> tag) inside of your <p> tag, you cannot use display: none;. Any time you have a parent element with display: none;, all of its child elements, as well as its pseudo-elements, will not be displayed. Even if you set the pseudo-element to display: block;.

So, if this is your HTML:

<p class="replaced">Original Text</p>

…then this CSS will not work:

.replaced {
	display: none;
}

.replaced:after {
	display: block;
	content: "This text replaces the original.";
}

Using Special Characters & Symbols in Replaced Text

You might want to replace text with special characters or symbols, like an ampersand, tilde, emdash or non-breaking space. To do so, you must using the proper character encoding for that symbol. You cannot just place the symbol inside your content: ""; declaration, nor can you use the HTML code (e.g. &amp; or &mdash;).

This entity conversion chart will convert your special character, and give you the appropriate code to use with the CSS content property.

If you wanted to insert this: 29.9 = ~30

…it would look like this:

content: "29.9 \003D \0020 \007E 30";
  • \003D is the code for an equals sign (=)
  • \0020 is the code for a non-breaking space (&nbsp;)
  • \007E is the code for a tilde (~)

You need to include spaces in-between each special character code, otherwise the codes run together & CSS doesn’t know where the beginning & end of each code is located.

Other Helpful Tips

If you have any other ways to replace text with CSS, please let us know in the comments.

Read 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.

How to Add Line Breaks to the CSS Content Property

Let’s start with some really simple HTML. Your HTML could almost be anything. It’s not really important with this example. All that really matters is how we treat the pseudo-element.

<p>I love CSS!</p>

Now, let’s say you want to add a line of text below that using CSS content.

p:after {
	display: block;
	content: "Me too!";
}

Easy enough. Nothing new here. You need to use display: block; because the default display value for pseudo-elements is inline.

Now you want to add another line below “Me too!”, but still using the CSS content property. Your CSS would look like this:

p:after {
	display: block;
	white-space: pre;
	content: "Me too! \A Me three!";
}

The \A escape sequence will insert a line break. It works the same as adding a <br /> tag to your HTML.

The CSS spec for content goes into more detail, or you can get a refresher on the white-space property.

NOTE: You could also use white-space: pre-wrap;.

A Caveat on Line Breaks with CSS

There are very few scenarios where I would use this technique. If you have control over your markup, there are better ways to insert & manipulate content. CSS generated content should be used sparingly when dealing with actual text & line breaks.

Read More

How to clear your browser cache and cookies

In our previous blog post, “How to refresh browser, web page,” we talked about how to refresh you browser in order for users to see changes to a website.

“When we make changes to a clients’ website, they often don’t see the changes right away. This is because their browser (Internet Explorer, Firefox, Chrome, etc.) has cached web pages. When a browser caches a web page, it stores a local copy on the visitor’s computer. This speeds up the page load time so the visitor can view the information faster when they visit the page again.”

If you don’t immediately see changes made to the website, you may have to go the extra step of clearing your browser cache and cookies in addition to refreshing your web page.

Browser cache is a mechanism used in helping to speed up a website, while we browse. Browsers download page elements when we visit a site. Elements can include but are not limited to images, buttons, script files, etc. Those elements are stored in a cache folder. When we visit a site, the browser checks to see if those page elements are in it’s cache folder. If they are, then the browser does not have to download the same file element again. This speeds up web browsing.

A cookie is a small piece of software that a website may put on your computer. This allows websites to keep track of a user’s browsing session. If you’ve ever been to a website that made you log in, and then later returned to that website, you may notice that you did not have to log in again. This is because of the cookie.

 

The process of clearing your browser cache and cookies is different depending on which browser you are using. Find your browser below, and follow the instructions.

Clear Browser Cache and Cookies – Chrome (Mac)

At the top of your screen, go to “File” > “Preferences.”

Shortcut: command + ,

On the left sidebar, click “History.”

Click the “Clear browsing data…” button.

Make sure the checkboxes for “Delete cookies and other site and plug-in data” and “Empty the cache” are checked.

Click “Clear browsing data”

Screenshot of how to clear cache and cookies on Chrome on a Mac
Screenshot of how to clear cache and cookies in Chrome on a Mac
Screenshot of how to clear cache and cookies in Chrome on a Mac
Screenshot of History tab in Chrome on a Mac
Screenshot of how to clear cache and cookies in Chrome on a Mac
Screenshot of how to clear cache and cookies in Chrome on a Mac

Clear Browser Cache and Cookies - Firefox (Mac)

At the top of your screen, go to “Firefox” > “Preferences.”

Shortcut: command + ,

Click the “Privacy” tab.

Click the blue link that says “clear your recent history.”

Make sure the checkboxes for “Cookies” and “Cache” are checked.

Click “Clear Now”

Screenshot of how to clear cache and cookies in Firefox on a Mac
Screenshot of how to clear cache and cookies in Firefox on a Mac
Screenshot of privacy tab  in Firefox on a Mac
Screenshot of privacy tab in Firefox on a Mac
Screenshot of how to clear cache and cookies in Firefox on a Mac
Screenshot of how to clear cache and cookies in Firefox on a Mac

Clear Browser Cache and Cookies - Safari (Mac)

At the top of your screen, go to “Safari” > “Reset Safari…”.

Make sure the checkboxes for “Clear History” and “Remove all website data” are checked.

Click “Reset”

How to remove cache and cookies with Safari on a Mac
How to remove cache and cookies with Safari on a Mac
How to remove cache and cookies with Safari on a Mac
How to remove cache and cookies with Safari on a Mac

Clear Browser Cache and Cookies - Opera (Mac)

At the top of your screen, go to “Tools” > “Delete Private Data…”

Make sure the checkboxes for “Delete Session Cookies,” “Delete all cookies,” and “Delete entire cache” are checked.

Click “Delete”

How to remove cache and cookies with Opera on a Mac
How to remove cache and cookies with Opera on a Mac
How to remove cache and cookies with Opera on a Mac
How to remove cache and cookies with Opera on a Mac

Read 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.

NOTE: This is not only true for CodeGuard backups. This is true for any third-party service that you want to access your database. It could be a backup solution, security analysis, integration with another website, etc.

However, we do not recommend using GoDaddy for hosting. If you’re looking for a great WordPress managed hosting provider, who will take care of all the backups for you, check out WP Engine.

Allow Direct Database Access on GoDaddy Shared Hosting

When creating a new database on a GoDaddy shared hosting plan (instructions here), there is an option to “Allow Direct Database Access.” It’s buried under an “Additional Options” toggle, and it’s set to NO by default.

If you do not allow direct database access, CodeGuard will not be able to backup your database.

And after talking to GoDaddy customer support, they confirmed that you cannot change this option once you’ve setup your database. It has to be configured when you first create the database.

A Solution To Fix This Problem

The following solution uses GoDaddy’s internal tools for backing up & restoring databases. You could alternatively access the old database via phpMyAdmin, export the database, create a new one, allow direct database access, and then import the .sql file you exported. If you’re comfortable with phpMyAdmin, that’s a perfectly viable solution.

Login to your GoDaddy Hosting Control Panel.

Scroll to the bottom & look for “Databases.” Click the “MySQL” icon.

Next to the database you need to allow direct access for, click the “Actions” button, and choose “Back Up.”

Allow Direct Database Access GoDaddy Shared Hosting
Click “Actions” & choose “Back Up”

Once your database backup is complete, click the “Add” button to add a new database. Give your new database a new name, but this time, make sure you select YES for “Allow Direct Access.”

Allow Direct Database Access - GoDaddy - Setup New Database
Create new database

Once the new database is setup, click the “Actions” button next to it, and choose “Restore.” You should have an option to restore the database that you just backed up. Select it.

After The Database Is Created

If you’re using a CMS, you’ll want to make sure you update your database credentials with the new database name, username & password. With GoDaddy, typically, the database name & username are the same thing.

If you’re using WordPress, open your wp-config.php file, and edit the database settings. You want to make sure your new database has been setup properly, and the restore is complete, before you do this.

Caveats

Even GoDaddy themselves state that allowing direct database access is less secure. In no way am I suggesting you allow this option. I’m simply providing a solution to what I think might be a common problem. Enabling this option is entirely at your discretion.

By no means am I promoting GoDaddy’s hosting, either. GoDaddy’s shared hosting is not the best solution out there. It’s comparatively slow, and less secure, than other, more robust options.

If you’re looking for a great WordPress managed hosting provider, who will take care of all the backups for you, check out WP Engine.

Read 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.

mailto: link with subject line

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.">onecooldude@gmail.com</a>

Example

This would send an email to onecooldude@gmail.com with the subject line of “Hey Dude. You’re Cool.”

mailto: link CC & BCC fields

NOTE: As soon as you add a 2nd parameter (“subject” was our first parameter, now we’re adding “cc” and “bcc”), you need to separate all your parameters with an ampersand (&). You begin your parameters, after the mailto:onecooldude@gmail.com, with a question mark (?), but use ampersands (&) to separate parameters after that.

Adding CC & BCC fields is as simple as adding a subject. For multiple emails, separate each email with a comma.

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com&bcc=invisibledude@gmail.com">onecooldude@gmail.com</a>

Example

Adding multiple emails for these fields would look like this:

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com,thirddude@gmail.com,fourthdude@gmail.com&bcc=invisibledude@gmail.com,ghost@gmail.com">onecooldude@gmail.com</a>

Example

mailto: link body content

Now for the really cool part: Adding a message in the email body. Again, it’s just as easy as before, but be careful of your character encodings. We are using the body parameter. Here’s an example of a mailto: link with subject, body, cc & bcc fields.

<a href="mailto:onecooldude@gmail.com?subject=Hey+Dude.+You're+Cool.&cc=anotherdude@gmail.com&bcc=invisibledude@gmail.com&body=Your+awesome+message+goes+here.%0D%0A%0D%0AThis+is+on+a+new+line.+Go+to+http%3A%2F%2Fwww.google.com%2F.">onecooldude@gmail.com</a>

Example

Blank TO field. Let the user enter the email address.

If you want to let the user type in the TO, CC or BCC fields, you can leave the mailto: blank, like this:

<a href="mailto:?subject=whatever&body=whatever">Email Someone</a>

Example

Character Encoding

Make sure you encode all special characters. Common character encodings are below, or you can use Eric Meyer’s URL encoder tool. If you would rather learn what all the character encodings are, you can use this resource.

Common character encodings

  • space = %20 or + (either one works)
  • line break / carriage return = %0D%0A
  • question mark = %3F
  • / (forward slash) = %2F
  • : (colon) = %3A

You do not need to encode commas (,) or periods (.).

Read 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

When sharing a link on Facebook… if you’re having trouble with the thumbnail images being displayed, the page title or description, give this debug tool a shot. It might lead you to correct the issue.

Facebook Debug Tool for Open Graph Data
Results on Facebook’s debug tool for this blog.

You might want to check out how to add multiple thumbnail images when sharing a Facebook post.

Read 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.

Facebook Share Multiple Images (og:image tags)
29 og:image tags gives us multiple thumbnails to choose from in the Facebook share post box.

og:image Tag on WordPress Sites

If you’re using WordPress, there’s a great SEO plugin that will add 1 og:image tag per page to your WordPress posts & pages. It’s a great place to start, but it won’t fix your problem of multiple images for a Facebook share.

You can open up your header.php file, and write a custom function that pulls all the images attached to that post/page, and inserts them all into their own og:image <meta> tag.

However, sometimes Facebook can scrape your site & find many of your images on its own. It just depends on how much control you want.

Read 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…

Passionate, Educated, Forward-Thinking Leadership

Matt Mullenweg is the founding developer of WordPress. Check out his page to learn more, but the guy’s won every online/tech/influencer award in the book. And above all else—his passion for WordPress is undeniable.

The WordPress core developers work from all over the world. This is more than just an incredible collaboration. It means that you’re using a truly global product. International developers ensure that all perspectives & opinions are represented. And when you have the entire world to pick from, you end up with the best-of-the-best.

Here’s a mind-blowing stat: 137 employees managing 131 million unique visitors a month. If that’s not impressive enough, read up on how they work. And now try to tell me you don’t want to work with these guys.

WordPress Employee Stats
Now that’s efficiency at it’s finest.

Content First

WordPress started out as a blogging platform. Many people who don’t believe WordPress is a true CMS will use this as an argument in their favor. But if you think about where the web is headed, I think the fact that WordPress started as a blogging platform is a huge reason why it’s the best CMS out there.

When you start a blog, what’s arguably the most important component? Content. Above all else, if your content sucks, no one cares about design or functionality.

Today, when you build a website, where do you start? With content. Content should drive all the design & functionality decisions you make. Content drives the different layouts you have for each page; for each device.

WordPress was built around the idea that content is most important. It might not be able to do all the things that other CMSs can do out-of-the-box, but most sites don’t need that. But the plugins, functions & awesome devs out there can make it do just about anything, if need be.

Oh, and what does CMS stand for? Content Management System. That’s interesting…

Awesome, Helpful Community

The amount of free support you can receive for WordPress is staggering. Highly skilled developers tackle intricate problems inthe forums. Bloggers post advanced tutorials on everything from new user registration to SEO to working with video. People have centered their entire business around WordPress. Without it, some developers wouldn’t have a job. Some companies wouldn’t even exist.

There are WordCamps popping up all over the country. And they’ve been around for years.

You won’t find a more active & helpful community than the WordPress community.

Bloggers & WP Experts

There is no shortage of WordPress tutorials, blogs & code snippets. And more are popping up every day. Many of these are edited by WordPress experts. And it’s truly amazing the valuable info they offer up for free (well, they make a few bucks on ads, but still).

Free Plugins

One of the strongest aspects of the WordPress community is the plugin developers. I’m constantly amazed, and very grateful, for all the free plugins that these developers spend hours building, testing & updating. Other CMSs have free plugins & add-ons, but not nearly the amount that WordPress has. And many times, with other CMSs, you have to pay for the good ones. Many of WordPress’ most powerful & useful plugins are completely free.

There are tons of great ones out there, but here’s a short list to get you started: WordPress SEO, Google Analytics for WordPress, MCE Table Buttons, Jetpack, Advanced Custom Fields, WordPress HTTPS, Google XML Sitemaps.

Professional, Responsive Themes

WordPress has more professional, well-constructed, responsive themes than any CMS out there. Not all WordPress themes are great, but there are tons of beautiful ones if you know where to look. This very site runs off a free responsive theme from uxde.net (thanks guys).

You’ve got:

Core Trac Development

WordPress has a very active community of developers who contribute to the core. You can find it at core.trac.wordpress.org. Developers and users alike submit tickets to the trac system. WordPress core developers then respond, sift through, consolidate & prioritize these tickets.

The community often submits code that fixes bugs and/or enhances functionality. It’s a true team effort. And the transparency of it all is quite admirable, if you ask me.

Support Forums

You might argue that a forum like ExpressionEngine is better because it’s moderated by people who work for ExpressionEngine—while WordPress’ forum is 99% run by people like you & me.

To put it bluntly, it doesn’t matter who gives you the right answer, as long as you get your answer. Now, you do have to be careful who you take advice from in the forums. It’s not all great advice. Some of it is downright awful. But with more & more people learning WordPress every day, the good will outweigh the bad.

I’ve had great success on the WordPress support forums. And if you don’t find your answer there, it’s probably on WordPress stackexchange.

Simple Installation & Upgrades

The famous 5-minute installation actually takes less than 5 minutes. And the upgrades happen with one click of a button.

You should be careful when upgrading, especially if you don’t know much about how your theme was built, or what type of server/database your site is hosted on. But if you are knowledgable about those things, and only run with quality code & professionally-built plugins, 99% of the time, you’re just one click away from the latest version.

Mobile Apps

WordPress has created, and actively updates, WordPress mobile apps for iOS, Android, BlackBerry & Windows Phone. Since I don’t use many other CMSs, I’ll let you tell me in the comments if there is any other CMS out there that supports all those platforms, with the same quality apps as WordPress.

Uses PHP, not Proprietary Tags

Some CMSs—sorry ExpressionEngine, but I’m going to pick on you for a minute—use their own proprietary tags with curly braces {}, vertical lines and asterisks |* *|, etc. WordPress uses standard PHP tags. Sure, it has a bunch of WordPress-specific functions, but anyone can create, modify and/or remove those. It’s all right there in the code… hosted on your server, just a few clicks away.

I believe using standard PHP tags lowers the barrier of entry. I was able to learn WordPress faster than any other CMS I’ve experimented with because it uses a language that is ubiquitous in the web community.

WordPress vs. Drupal vs. Joomla

I’m not going into a detailed comparison of CMSs. For one, I haven’t used much of Joomla & Drupal, so I’m not going to pretend to be an expert. And several others have written great articles on the pros & cons of each.

Comparison Articles

Conclusion

I plan to add more to this list when I get more time to pull together convincing reasons. I know there are more out there, and I’ll never get tired of lobbying for the greatest CMS in the world.

Read More