Setting up responsive image in WordPress

In current days maximum websites are getting converted to responsive – device friendly websites. If you have already converted your WordPress blog or website to responsive or will do, you may face some issues to transform your post images to responsive. Because, WordPress set image dimension (width & height) by default while you upload image from content editor or  from featured image box. There are simple ways to set your current WordPress images responsive without using any JavaScript or Plugin.

Step 1: Open functions.php file and add the filter code. It will restrict WordPress to add image dimension (width & height) while you upload next images via content editor or featured image box.

This code will not remove image dimension from the existing uploaded images. 

Step 2: Add the  CSS in your CSS file (style.css). This CSS will make the current all images to responsive. It does not matter if the images have hard coded dimension (width & height) or not.

Replace these class names ‘entry-content’, ‘comment-content’ with your absolute class names.

Continue Reading

Beautify your codes online, format source codes

If you want to be a good coder then you must format your codes properly with block commenting. It will help you a lot to update or modify your code at any time. I have worked with many coders who rarely love their codes and I had so much pain to work on their codes. It is really a pain.

There are several websites from where you can beautify (format) your codes instantly. Here are some good websites.

1. prettyprinter.de

Supports: PHP, Java, C++, C, Perl, JavaScript, CSS

2. styleneat.com

Supports: CSS

3. dirtymarkup.com

Supports: HTML, CSS, JavaScript

4. jsbeautifier.org

Supports: HTML, JavaScript

The ‘Adobe Dreamweaver’ has a built-in tool for source formatting and it is awesome with perfect source format and killing of unnecessary spaces.

Continue Reading

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

Style your web form with CSS

We have to use different forms in our website for different purposes like login form, registration form and so on. Web form plays a great role for the user point of view. Simple form attracts the users more to fill up. We can design a simple User Registration form with CSS in a proper manner as like as the image below.

Continue Reading