Tuesday, December 27, 2016

How to make colored image gray scale on hover? CSS Tricks

2:16 AM Posted by Ahmed No comments
To make a colored image turn into gray scale on hover and vice versa can be achieved by using some simple css tricks. We will see both the codes here.

1) Turn Colored image to Gray Scale on hover:

 img {  
 filter: gray;  
 filter: grayscale(1);   
 -webkit-filter: grayscale(0);   
 img:hover {  
 filter: none;  
 -webkit-filter: grayscale(1);  


 <div id="wrapper"> <img id="myImage" src="IMAGE.JPG"/></div>  

In the html part, replace IMAGE.JPG with the link to the source image.

2) Turn Gray Scale image to Colored on hover.

 img {  
 filter: gray;  
 filter: grayscale(1);   
 -webkit-filter: grayscale(1);   
 img:hover {  
 filter: none;  
 -webkit-filter: grayscale(0);  

 <div id="wrapper"> <img id="myImage" src="IMAGE.JPG"/></div>  

Same as earlier, replace the IMAGE.JPG with the actual image source link.

Monday, November 7, 2016

How to make heading with separator lines in divi

12:28 AM Posted by Ahmed No comments
Today we will be using CSS tricks to make a heading with separator lines.

The Code: 

h1:before {
  content: "";
  display: block;
  border-top: solid 1px black;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: 1;

h1 span {
  background: #fff;
  padding: 0 20px;
  position: relative;
  z-index: 5;

Where to put this code?

 Go To Divi > Theme Options > General
Scroll down to last section which is CUSTOM CSS and paste the code there.

Let me know if you have any easier ways to implement this in comments. :)

Wednesday, October 26, 2016

Font Awesome CSS links

12:27 PM Posted by Ahmed No comments
Here are the list of css link to adding Font Awesome to your website.

Fontawesome Version 4.5.0: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Fontawesome Version 4.6.3
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Tuesday, January 12, 2016

Keyboard Shortcuts to make symbols in windows

4:35 PM Posted by Ahmed No comments
Many times we come across some application where we wish to use symbols but we do not have a direct option to do that.

One way to do it is to visit the Character Map in windows.

However second option is to use keyboard shortcuts to make symbols.

Find a few of them below :

Alt + 0153 =  ™ (trademark symbol)
Alt + 0169 = ©  (copyright symbol)

Alt + 0174 = ®  (registered trademark symbol

Alt + 0176 = °  (degre­e symbol)

Alt + 0177 = ±  (plus-or­-minus sign)

Alt + 0182 = ¶  (paragraph mark)

Alt + 0190 = ¾  (fractio­n, three-fourths)

Alt + 0215  = ×  (multi­plication sign)

Alt + 0162  = ¢  (the cent sign)

Alt + 0161 = ¡  (upside down exclamation point)

Alt + 0191 = ¿  (­upside down question mark)

Alt + 1 = ☺ (smiley face)

Alt + 2 = ☻  (bla­ck smiley face)

Alt + 15 = ☼  (su­n)

Alt + 12 = ♀  (female sign)

Alt + 11 = ♂  (m­ale sign)

Alt + 6 =   (s­pade)

Alt + 5 =   (Club)

Alt + 3 = ♥   (Heart)

Alt + 4 =   (Diamond)

Alt + 13 = ♪  (e­ighth note)

Alt + 14 = ♫  (beamed eighth note)

Alt + 8721 =  ∑  (N-ary summation (auto sum)

Alt + 251 = √  (s­quare root check mark)

Alt + 8236 = ∞  ( infinity)

Alt + 24 = ↑  (up arrow)

Alt + 25 = ↓  ( down arrow)

Alt + 26 = →  (ri­ght arrow)

Alt + 27 = ←  (l­eft arrow)

Alt + 18 = ↕  (u­p/down arrow)

Alt + 29 = ↔  ((Left right arrow)

Share it with your friends so they know it too

Wednesday, November 25, 2015

Notify me when product is available notification in shopify

5:59 PM Posted by Ahmed No comments
It is very important for an ecommerce store to keep track of the products liked by their customers and make the customer aware when the products are back in stock. If you are not using backorders for your products, you need to inform your customers manually about the re-stocked items. However how would you know which product is like by which customer? or which customer is willing to make a purchase when the product of their choice is back in stock?

Well the solution is simple. Use a custom contact form on the product page that collects customers email and send the admin details of the customers email address along with their product choice.

open the product.liquid file and paste the below code at the position where you would like to show the option to customers to put their email address.

 {% unless product.available %}  
 <div id="sold-out">  
  {% form 'contact' %}  
   {% if form.posted_successfully? %}  
   <p class="accent-text">Thanks! We will notify you when this product becomes available!</p>  
   {% else %}  
   <p>Click <a id="notify-me" href="#"><strong>here</strong></a> to be notified by email when {{ product.title }} becomes available.</p>  
   {% endif %}  
   {% if form.errors %}  
   <div class="error feedback accent-text">  
    <p>Please provide a valid email address.</p>  
   {% endif %}  
   {% unless form.posted_successfully? %}  
   <div id="notify-me-wrapper" class="clearfix" style="display:none">  
    {% if customer %}  
    <input type="hidden" name="contact[email]" value="{{ customer.email }}" />  
    {% else %}  
    <input style="float:left; width:180px;" required="required" type="email" name="contact[email]" placeholder="your@email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />  
    {% endif %}  
    <input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />  
    <input style="float:left; margin-left:5px;" class="btn styled-submit" type="submit" value="Send" />       
   {% endunless %}  
   jQuery('#notify-me').click(function() {   
    {% if customer %}  
    jQuery('#sold-out form').submit();   
    {% else %}        
    {% endif %}  
    return false;  
   } );  
  {% endform %}  
 {% endunless %}  

This tweak was taken from shopify official website. However they have removed this post since many developers have developed apps to include this functionality. You can either use this code or go for an app. Choice is yours.

Monday, November 23, 2015

How to add product sku to the product details page in shopify

4:57 PM Posted by Ahmed No comments
Many shopify themes do not include product sku display options by default and one may need to add them manually.

However, you must be a little familiar with Liquid code so that atleast you can figure out what code to be inserted and where.

I will show you the code to be added. But the location may vary depending on the theme which you are using.

1) From your Shopify admin, click Online Store, then click Themes (or press G W T):

2) click on dropdown and select EDIT HTML/CSS

3) Search for the file product.liquid and open it by selecting it. The file contents will open in the editor at the right side of the screen.

use CTRL + F to search for the codes in the editor.

4) Locate the position where you want to display your product sku. Most stores prefer to show the sku after the product title. in that case look for the term product.title and paste the following code below it.

 <div class="product-sku"><label>SKU</label> {{ product.variants.first.sku }}</div>  

Friday, September 11, 2015

How to remove network login credentials in windows 7

4:56 PM Posted by Ahmed No comments
Today we will talk about how to remove network login credentials in windows 7

Sometimes this issue arises when you are unable to login in to my network with the saved credentials.

If you have used "Remember Credentials" while first logging in the network, you do not get an option to enter the changed credentials again to the same network.

Here is what you need to do to delete the saved network credentials :

>Go to Run (Windows + R)
>Type "cmd" (without quotes) and hit enter
>in the command prompt type the following

 net use \\NETWORK PATH /delete  

replace NETWORK PATH with your actual network patch address.

Sunday, August 16, 2015

How to migrate from Blogger to WordPress

12:18 PM Posted by Ahmed , No comments
Well you might be thinking that why after such a long time i have taken up this topic when a lots of articles are already present on the internet.

The answer is that most of the articles are outdated. And i happened to transfer one of my blogs to wordpress and i was going through a few posts and they all seem to be outdated. Since in version 4.2, you do not get an option to AUTHORIZE the access.

So let me tell you some simple steps by which you can easily migrate your blog.

Please note that this articles is solely for the purpose of migrating blog posts. I have not included anything related to SEO in this blog.

Step 1 :

set the permalinks in your wordpress installation.

Go To Settings > Permalinks > and paste the following in custom structure :


See Image Below :

Step 2 :

Go to blogger dash board and go to Settings > Other > Export Blog

Download the XML file.

Step 3 :

Go to wordpress dashboard go to Tools > Import > Blogger

Select Install and run importer.

Step 4: After the installation is complete, the tool will ask you to upload an XML file. Now locate and upload the XML file downloaded from blogger in Step 2.

Then click upload and import.

Step 5: After the XML file has been imported, you will get an option to set the author name for the imported posts. Either you can select an existing user, or make a new user.

If you make a new user, your posts author, do not forget to set role, and password for the newly created user.

I hope this will help you atleast import all your blogger posts to WordPress safely.

Monday, August 10, 2015

How to embed html audio player in any website

1:49 AM Posted by Ahmed No comments
Most of us want to embed additional functionalities to our website without increasing the load time.

For WordPress users, the use of additional plugin will increase the load time of website in most of the cases.

The best way is to use HTML codes which will not require any additional plugin. It will simply work on the website.

For including the audio player in your website, use the code shown below :

 <audio controls>  
  <source src="yourfile.ogg" type="audio/ogg">  
  <source src="yourfile.mp3" type="audio/mpeg">  
  Your browser does not support the audio element.  

Remember to replace yourfile.ogg/yourfile.mp3 with the actual location of your audio file.
If you are using only mp3 files, you can remove the line which includes .ogg file.

Your audio player will look like this :

There are additional functionalities which you can add to this simple player.

1)Adding Autoplay to audio player

For making the player auto play the audio file as soon as the visitors opens your page, you just need to add "autoplay" in the first line.

Now your code will look like :

 <audio controls autoplay>  
  <source src="horse.ogg" type="audio/ogg">  
  <source src="horse.mp3" type="audio/mpeg">  
  Your browser does not support the audio element.  

2) Restricting the player to auto stream content when the page is loaded

Whenever the page where the audio player is opened, the audio player will start to stream the audio file so that when the user plays the audio, it is available without buffering.

However, in certain cases when there are multiple audio embedded in a single page, for example say a page which contains a music album, in that case, if the audio player stream all of the audio, then it will surely affect the visitors internet speed and data. Also if a visitor is on the webpage to listen only one of the several audios, still the audio player will stream all the audio files.

To restrict the preloading of audio files, use the code preload="none"

the modified code will look like :

 <audio controls preload="none">  
  <source src="horse.ogg" type="audio/ogg">  
  <source src="horse.mp3" type="audio/mpeg">  
  Your browser does not support the audio element.  

Sunday, March 1, 2015

How to disable right click on your website

3:00 PM Posted by Ahmed No comments

There are some websites which do not want their data to be copied or they just want to disable a right click on their website.

Whatever the reason may be... Lets see how we can do this by just using a simple code.

Use the below code on your website :

 <body oncontextmenu="return false;">   

Place this code after <head> tag on your website. This code will work on majority website.

However for security reasons, i would suggest you to take the backup of the original file and then use this code, so that if anything goes wrong, you still have the actual source code.

Always remember, whenever you do a tweak, you should keep a habit of taking backups of the existing files. This will help you in saving your time and efforts for the customization and/or tweaks already done.