Skip to main content

Posts

How to display 2 columns in mobile view in Divi WordPress theme

While working on a project of a client i had to display 2 coloumns in a row.

By default only 1 column is displayed in mobile view in divi.

However by using css, we can display 2 columns in a row on mobile.


Step 1:

Select the row structure as 1/2, 1/2



Step 2 : Add modules as per the requirement.

Step 3: Open the row settings

Step 4: Go to Advanced Tab and put the css code given below in Column 1 main element and Column 2 main element



margin-right: 2.5%; width: 47.25% !important;
Recent posts

Different Dropdown Arrows in Divi Top Menu

Divi is a great theme for designers as well as newbies trying to learn making professional websites. However one needs to have basic knowledge of css to make almost any change you need on a divi site.

Today we are going to see how we can put different arrows in dropdown and top level.

The top-menu primary link, has by default, down arrow. Now we will use right arrow in the secondary menu.

Use the following code in the custom css field of your Divi child theme.

#top-menu li .menu-item-has-children > a:first-child:after { margin-top: -2px; content: "5"; }
The value 5 in content is used for right arrow. It will display only if your sub-menu has a dropdown.

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

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:

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

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

CSS:
img { filter: gray; filter: grayscale(1); -webkit-filter: grayscale(1); } img:hover { filter: none; -webkit-filter: grayscale(0); }
HTML:
<div id="wrapper"> <img id="myImage" src="IMAGE.JPG"/></div>
Same as earlier, replace the IMAGE.JPG with the actual image source link.



Font Awesome CSS links

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">

Keyboard Shortcuts to make symbols in windows

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 :

HOW TO MAKE SYMBOLS WITH KEYBOARD 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 =

Notify me when product is available notification in shopify

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 …