Transitional mouse hover effect in CSS

Presently we are very much conscious about the look and feel of our blog or website. For different reason we use hyper link text or block to highlight different section. Let’s see, we can draw this by any other way without using JavaScript or jQuery. Here I will explain a simple transitional mouse hover effect with the help of purely CSS.  Check this screen shot.

transitionalhover-effect

 

In the screen shot you can see the blue background effect on normal condition and the purple background effect on mouse hover. But this is not the trick. The changing of the colour will happen with a transition effect from light blue –> light purple –> Original purple colour within 0.5 second time span.

This is the simple HTML block text where I have put the hyper-linked text inside a DIV and main part of the CSS which calls the transitional effect.

If you have any idea to make this script more cool, please post your comment here. I have tested this script on latest version of Firefox, Google Chrome, Opera, Safari and Internet Explorer 9 and it is working fine. Please don’t ask for any update of this script for Internet Explorer 7 or prior versions as those engines do not support CSS3.

Continue Reading

Show related posts on your WordPress blog for custom post type

You can use custom post type for special posts on your blog and there are lots of plugins or hacks available to display related posts but those are limited to the general posts only, not for the custom post type.

Say you have created a new post type function for listing your products on your WordPress website or blog. On the product detailed page (single.php) you just prefer to display the other products info which belongs to the same product category.  Now the trick will work.

Assume you have created (registered) a new taxonomy for your product categories as ‘product_categories’from your functions.php file. Now you can use the template code to display the related products (posts) in any place of the page you prefer. It will display latest 4 posts of the same category, no duplicate at all.

Continue Reading

A new lightweight, responsive jQuery modal window plugin – VenoBox

We like to use modal window (popup window), popular as light box to show content in our websites or blogs. It is easier to show the images in gallery, videos, small notifications in popup windows. But we have to think about the responsiveness of this type of popup/modal windows. Are they really be shown properly in mobile devices as we visit websites in mobile devices more nowadays.

We are very much familiar to Lightbox, Fancybox but now time to think about some more flexible. The option is:

VenoBox

You can use this VenoBox jQuery plugin for images, inline contents, iFrames, Google-Maps, Ajax requests, Vimeo and YouTube videos.

What is the difference from other jQuery modal window is stated by VenoBox team as:

“The big difference compared to many others modal-window plugins is that VenoBox calculates the max width of the image displayed and preserves its height if is taller than the window (so in small devices you can scroll down the content, avoiding vertical microscopic resized images).”

You just need to download the VenoBox script from their official website http://lab.veno.it/venobox/  by clicking the Download button. They use social payment (virtual payment done by facebook like-share, tweet, linkedin share, google+ share). It’s FREE and you just need to social sharing before download the original script. While sharing in social media you need to edit the sharing message otherwise social sharing website will not allow to share VenoBox. As soon you share, you will be able to download the script.

Usage: Visit the official website and you will get proper documentation of this plugin on the front page. Very simple to use.

Continue Reading

Know the Popular Web Server Error Codes

Many a time when we try to visit any particular web page, we get an error code displaying in lieu of the original page. Have you ever surprised what that error code meant? Here is a list of the most popular error codes and their description. The first thing you should do anytime you get an error code is to make sure that you have entered the correct web page addressed.

• 100 Continue
• 101 Switching Protocols
• 102 Processing
• 200 OK
• 201 Created
• 202 Accepted
• 203 Non-Authoritative Information
• 204 No Content
• 205 Reset Content
• 206 Partial Content
• 207 Multi-Status
• 300 Multiple Choices
• 301 Moved Permanently
• 302 Found
• 303 See Other
• 304 Not Modified
• 305 Use Proxy
• 307 Temporary Redirect
• 400 Bad Request
• 401 Authorization Required
• 402 Payment Required
• 403 Forbidden
• 404 Not Found
• 405 Method Not Allowed
• 406 Not Acceptable
• 407 Proxy Authentication Required
• 408 Request Time-out
• 409 Conflict
• 410 Gone
• 411 Length Required
• 412 Precondition Failed
• 413 Request Entity Too Large
• 414 Request-URI Too Large
• 415 Unsupported Media Type
• 416 Requested Range Not Satisfiable
• 417 Expectation Failed
• 422 Unprocessed Entity
• 423 Locked
• 424 Failed Dependency
• 425 No code
• 426 Upgrade Required
• 500 Internal Server Error
• 501 Method Not Implemented
• 502 Bad Gateway
• 503 Service Temporarily Unavailable
• 504 Gateway Time-out
• 505 HTTP Version Not Supported
• 506 Variant Also Negotiates
• 507 Insufficient Storage
• 510 Not Extended

Continue Reading

Gmail 5.0 app with Yahoo, Outlook email support

You can now check your Yahoo and Outlook (previously Hotmail) emails inside your same Gmail 5.0 app. Google will launch this app soon. You do not need to install separate Yahoo or Outlook apps in your phones or other devices. Recently Google has updated some of their apps with Material design and expected the new Gmail app 5.0 will have the same.

Check this video for the quick look of this app.

Gmail 5.o app is expected to supports other Exchange Mail Servers accounts and 3rd party email accounts. Just waiting for the official release, may be it will be with Android Lollipop release.

Continue Reading

How to resolve WordPress white admin screen issue?

WordPress white or blank admin screen except the left navigation bar is a very common issue of WordPress. There are lots of users who do not regularly update their WordPress version. Now one day you logs into your WordPress dashboard and get this blank screen, no content is showing up and you are not able to navigate to any tabs or links.

wp-admin-white-screen

Here is the solution.

  1. Go to ‘wp-adminincludes’ directory via FTP and download  ‘screen.php’ file.
  2. Open this screen.php file in any PHP editor (notepad ++ or Sublime Text  ).
  3. Go to line number: 706 and you can see this
    <?php echo self::$this->_help_sidebar; ?>
  4. Replace the above line with this
    <?php echo $this->_help_sidebar; ?>
  5. Save this screen.php file and upload to the same place.
  6. It’s all, now log into your WordPress dashboard and you can see that everything gets back.

I recommend you update your WordPress and Plugins versions regularly so that you will never have any issue at all.

Continue Reading