Text Module Content

<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's <span class="blur-text">standard dummy text</span> ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<style type="text/css">
  span.blur-text{
transition: 0.25s filter linear;
filter: blur(8px);
}
span.blur-text:hover{filter: blur(0px);}
</style>

 

Note

The CSS can be added via the Text Module’s Advanced tab.

Step 1) Under CSS ID & Classes, add your class. In this example enter “blur-text” without the quotes.
Step 2) Under custom CSS, add your CSS. In this example you would add:

  span.blur-text{
transition: 0.25s filter linear;
filter: blur(8px);
}
span.blur-text:hover{filter: blur(0px);}

 

Add-CSS-Class

Add CSS Code

Text Module Content

<h2>Dad Jokes</h2>
If <strong>Dr. Pepper</strong> was a doctor, what kind of doctor would he be? 

He would be a <span class="obscure-text">fizzician</span>.

Why do crabs never give to charity? 

Because <span class="obscure-text">they’re shellfish.</span>.

Why did the elephant have three red tennis shoes and one yellow shoe?

Because he <span class="obscure-text">forgot to lift his leg</span>!

<style type="text/css">
span.obscure-text{
 transition: all .2s ease-in;
  background: #666;
}
span.obscure-text:hover{background: transparent;}
</style>

 

Divi 5 Released

by Admin | Mar 13, 2025 | Blog, Design, News & Notices

Discover the future of web design with Divi 5, where creativity meets functionality. Elevate your projects with cutting-edge features and seamless integration.Divi 5 marks a significant milestone in the web design industry, offering unparalleled flexibility and power...

Reveal Text on Hover

by Admin | Feb 7, 2025 | Blog, WordPress, WordPress Tips & Tricks

How to use CSS to make text appear when hovering over a div. By using the :hover pseudo-class, one can show and hide text on hover using CSS. In the demos below, I'm using the hover pseudo-class along with the background and text color attributes.Hide Text Until Hover...

Divi Translucent Glass Hover Effect

by Admin | Apr 11, 2024 | Blog, Design, Tips & Tricks

Clinton Eastwood Jr. (born May 31, 1930) is an American actor and film director. After achieving success in the Western TV series Rawhide, Elon Reeve Musk is a businessman and investor. He is the founder, chairman, CEO, and CTO of SpaceX; angel investor, CEO, product...

« Older Entries

The post Reveal Text on Hover appeared first on HQ Secure Global Internet.

Copy and paste this css into your child theme and watch the colors of your WooCommerce buttons magically appear in lime-ish green and purple.

Roll Your Own

Certainly limey green a purple aren’t going to satisfy everybody, and yes there is a trick to it – an easy way to change the colors. I cheated by heading over to ColorZilla’s Ultimate CSS Gradient Generator, picked a couple off the shelf gradients, then simply copied and pasted.

The post WooCommerce Button Colors appeared first on HQ Secure Global Internet.

There are a number of ways to fend off harvesters, each with their pros and cons. Generally speaking, the easier methods to implement are the most difficult for your visitors to use (and vice versa).

his method is simple to follow but comes with the risk that real humans also might get confused and “de-mung” the address incorrectly. Spam bots are also getting better, so it is reasonable to assume that some can pick up variations of an email address. But along with the GIF signature, this remains the easiest one to apply in places like community boards.

Hide via ASCII

Each character can be mapped to a corresponding ASCII code. ASCII codes are translated by browsers into the readable character form, but it handicaps the spam bots as they fail to recognize the codes. You can use the HQ Secure Email Obfuscater to generate and AXCII coded email address. Though not 100% effective, it will eliminate up to 80% of harverters. Now your email will look like:
you@yourdomain.com

Use an Image Email Address

The email address above is not text but a transparent GIF image created in a photo editor. It looks neater and spam bots cannot read it because it is an image file and using OCR is still a long way off. But using GIF email signatures has a couple of disadvantages – the recipient can miss the email ID if images are turned off in his browser. Also, a GIF email sign ideally should not be hyperlinked… so recipients will have to key in the ID themselves, and that’s a bit inconvenient.

Encode With JavaScript

<script type='text/javascript'>var a = new Array('domain.com','you@your');document.write("<a href='mailto:"+a[1]+a[0]+"'>"+a[1]+a[0]+"</a>");</script>

That’s ‘johndoe@email.com’ obscured with JavaScript and inserted into the HTML of a webpage. Spam bots don’t do a good job of reading JavaScript and can’t find the ID in the source code, but our usual browsers render it perfectly. Of course, you need to have it switched on to display the email signature correctly. There are many JavaScript generators available freely on the web that can generate the code for you. Copy the code into your HTML where you want the link to appear.

Use a Disposable Email Address

Disposable email addresses are also a neat solution. These onetime dummy email accounts can be used when giving out email addresses to websites. You can abandon them at will. We have covered quite a few web services which generate disposable email addresses. Suggest: Yahoo, Gmail, Outlook…

I also came across a service called Scrim which protects your email address by disguising it using a custom link. You can try it out.

Use Contact Forms

Secure email forms are the best and most professional way to protect email addresses while soliciting information. All professionally designed websites will have one. It is user-friendly as all the reader has to do is add information and click on submit. Email addresses aren’t displayed to the readers or spam bots. A further barrier of a CAPTCHA prevents auto-populating bots from attacking the system. Yes, the reader cannot use his favored email client to send messages but that’s a small inconvenience.

Summary

These five points cover the bare minimum we can do as individuals and also as web designers to protect email addresses from the scourge of email harvesters. There are a few more advanced techniques that go around like Spider Traps. Anti-spam methods are many and more are coming online as the spam battle evolves. Battle may be a little soft; all out war! How do you combat it at your level? Are you aware of email harvesters and the tricks they play?

Final Word

Never respond to a spam email.  Do not click their ‘unsubscribe’ link. It only confirms your identity and makes your email address more valuable to them.

The post We Hate Email Harvesters appeared first on HQ Secure Global Internet.

My preferred method is to grab the url of the featured image, then use that to construct what will be needed given the design brief. The following is my code to grab the featured image URL:

Display URL Example

<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image; ?>" />
<?php endif; ?>

Easy peasy. How about getting it to display as an image? Note I’ve added an image class to help me style how the image will be displaying.

Image Display Example

<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img class="myFeatured-image" src="<?php echo $image; ?>" />" alt="Featured Image" />
<?php endif; ?>

Let us link that displayed image to something. In this example I’m showing the featured image in a lightbox effect:

Hyperlinked Example

<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a href="<?php echo $image; ?>" title="Featured Image" rel="fancybox"><img class="myFeatured-image" src="<?php echo $image; ?>" />" alt="Featured Image" /></a>
<?php endif; ?>

Showing the featured image full size then linking the same image to appear in a lightbox effect is silly at best. What generally occurs is displaying an image thumbnail, then having that link to the full size image. To achieve this I use the popular (and now secure) timthumb.php script found at Google

TimThumb.php Example

<?php if (has_post_thumbnail( $post->ID )) : ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<a href="<?php echo $image; ?>" title="Featured Image" rel="fancybox">
	<img class="myFeatured-image" src="http://your.path.to.timthumb.php?src=<?php echo $image; ?>&q=100" />" alt="Featured Image" />
</a>
<?php endif; ?>

Notes

In the above example, I’ve added q=100 which sets the rendered jpg quality to 100%. There are more variables that can be added, including how and where to crop. You will need the GD library installed on your server (who doesn’t these days). Learn more about the timthumb script and its primary developer Ben Gilbanks from Ben’s TimThumb website

The post Grab WordPress Featured Image URL appeared first on HQ Secure Global Internet.

Every WordPress website or blog has a functions file located in the theme directory. This function file makes things happen. It can determin what size your featured images appear at, whether or not you have built in custom menu functionality, what widget areas are avaiable in your theme and more. WordPress developers find themselves editing this file to add or modify functionality to ones website or blog. A problem occurs when ones theme is upgraded, resulting in the functions file being overwritten.

Enter Flash Buddy’s Functionality Plugin. Not only do you get several of Flash Buddy’s handy shortcodes, but now too developers can add their custom functions code right inside the plugin and protect their modifications from being overwritten upon theme upgrades.

Line Break “Clear All” Shortcode
Does it drive you crazy when you want a new line to start below an image or other page element, but WordPress won’t let this happen? Use shortcode
and the problem goes away. What is happening behind the scenes? The plugin is inserting html code, which would otherwise be stripped out by the built in WordPress content editor.
Use shortcode [ clear ]

User Adjustable Vertical Spacer Shortcode
Some themes just don’t leave enough breathing room around some elements. This shortcode will allow one to insert a defined amount of vertical space.
Use shortcode [ spacer height=XX ], where XX is the number of pixels of space one wants to add between elements.

Current Date Display
Ever need to have today’s date displayed in your website or blog, but don’t want to open it up for editing on a daily basis?
Use shortcode [date] and today’s date will be automatically displayed and updated for you.

Private Comments
When more than one person is working on a site, this hand shortcode can add comments that only other admins or editors can see. Use it to provide directions or notes.
Use shortcode [ private ]This is content hidden from the public[ /private ].

Note: To allow one to see the shortcode, but not activate it, a space has been added between the square bracket and the trigger text within. In actual real world use, there would be no spaces.

[wpdm_file id=1 title=”true” ]

The post Flashy Functionality appeared first on HQ Secure Global Internet.

Get up and running with WordPress – your local bookstore will have several titles available on using WordPress. Look for the most recent publications if you go this route as WordPress has had many robust updates as of late. In reality, I expect you will most likely figure it out as you go along, so log in and get started with editing existing pages.

Flashy Video Help Library

If you don’t already have the Flashy Video Help Library, you can request it be provided by “yours truly” 🙂 Look in your dashboard and get one click access to WordPress video training. The videos are from the WPtuts+ WP101 tutorial series!

Great Coverage

Most of the commonly used WordPress functions are covered, including but not limited to:

Google is Your Friend

The quickest and easiest way to get  help on WordPress, its associated plugins and working with your theme, would be searching Google or Bing for solutions to your questions. Other great resources are found at the official WordPress website or any number of WordPress specific help resource websites on the internet.

Adding images to posts or pages

Help Document: http://en.support.wordpress.com/images/

Video Help: http://www.youtube.com/watch?v=0WnNHEGjBVI

WordPress Tutorials: http://www.wp-tutorials.org/

Free Stock Image Resources

Here are the free photography website I use and recommend:

• http://morguefile.com
• Pixabay
• http://freestockphotos.com
• http://freerangestock.com
• http://www.freeimages.co.uk/
• http://public-domain-photos.com
• http://photodune.com

The best course of action is to purchase quality stock photography from online stock houses. I have an account at http://istockphoto.com and recommend them highly. Photos for web use cost about two to ten dollars, depending upon the quality/photographer.

Minimum sizes:

Size is dependent upon the dimensions and layout of your WordPress theme. Generally speaking, based upon the themes that I develop:

• Header or full page sized photos should be a minimum of 1000 pixels in width
• Illustrative photos for pages should be a minimum of 640 pixels in width.

Online Photo Editors

• http://www.lunapic.com/editor/
• https://photo-editor.canva.com/
• http://pixlr.com/editor/
• http://www.picnik.com/
• http://www.freeonlinephotoeditor.com/
• http://www.phixr.com/photo/userindex

Desktop Photo Resizers

• http://www.tiptrickmod.com/mac/why-preview-is-the-best-batch-photo-resizer-for-mac/
• http://photo-drop.en.softonic.com/mac
• http://www.batchimage.com/product/cm-batch-photo-resizer-mac-os-x

A Word on Editing

Just because one can change font sizes, typefaces and font colors doesn’t mean one should. A great deal of attention has been given to your WordPress custom theme when it comes to design, layout and typography. There had better be a very good reason to make changes to these areas. I suggest you consult with Flash Buddy, or another graphic designer of your choice.

The post Getting Started with WordPress appeared first on HQ Secure Global Internet.

Currently, there are 15,524 plugins available in the WordPress Plugin Directory. Finding the right plugin is not always an easy task. Through my working with WordPress often through the past fifteen years, and on a daily basis for the last two years, I have acquired substantial knowledge of plugins in general. It is this experience that guides my hand at selecting plugins.

If I Google “Best WordPress Plugins” there are 12,300,000 result pages! Here are a few of the results;

http://slodive.com/web-development/wordpress-plugins-that-power-a-lists-blogs/

http://www.smashingapps.com/2011/07/08/15-wordpress-plugin-every-user-should-know-about.html

http://perishablepress.com/press/2007/09/05/comprehensive-reference-for-wordpress-no-nofollow-dofollow-plugins/

http://weblogs.about.com/od/wordpressplugins/tp/55BestWordpressPlugins.htm

http://www.tripwiremagazine.com/2011/05/34-best-wordpress-plugins-giving-you-an-unfair-advantage.html

http://www.toptut.com/2011/05/28/100-best-wordpress-plugins-you-will-ever-find/

http://wphacks.com/wordpress-plugins/

I occasionally review lists like found in the above links. Many of the plugins have been around for a long time and have a good reputation. Others are new to the game and need to be regarded cautiously. A poorly programed plugin can bring down a website with one click of the mouse.

When I find myself needing a plugin for a new task and have to choose from several unknown resources, I look at how many times the plugin has been downloaded and what,  if any ratings, the plugin has received.

Consider this graphic from the WordPress Plugin Directory for the WP Touch plugin:

Most plugins are created by coders who don’t want to waste the work they have done for a client, or from their personal interest and explorations in particular functions. Often, they are not well thought out and incomplete on one way or another. The best plugins are known as Premium Plugins. They are generally well thought out and coded. The plugin authors request you pay to use some of their versions and insist you pay for others of their versions.

A good resource for Premium Plugins is Code Canyon: http://codecanyon.net/category/plugins/wordpress

I often use Code Canyon for a variety of things, not the least of which are WordPress plugins.

Finally, when I find a useful plugin that is well coded, I keep in in a folder on my local machine. When building a new WordPress website I’ll go through this personal stash of plugin perfection to select those which might be of some use. Consider OZH’s Admin Drop Down Menu plugin; I insist on it for virtually every website I develop: http://planetozh.com/blog/my-projects/wordpress-admin-menu-drop-down-css/

For those who take this approach, I caution them to be very picky. Installing a bunch of unnecessary plugins leads to poor website performance and back end clutter, doing more harm than good.

The post A Word on WordPress Plugins appeared first on HQ Secure Global Internet.