How to keep list style indent for second line in ordered or lists via CSS?

How to keep list style indent for second line in ordered or lists via CSS?

/ No Comments

How to keep list style indent for second line in ordered or lists via CSS?

please check below images and code ,

before 

    Please add below code in to css
    

.ul li {
    padding: 0;
    margin: 0;
    list-style: inherit;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

    

after  

test link https://jsfiddle.net/dzbos70f/

Thanks

How to write Malayalam in Photoshop without installing 3rd party software

How to write Malayalam in Photoshop without installing 3rd party software

/ No Comments

How to write Malayalam in Photoshop without installing 3rd party software

e>

Animated Menu link underline Effect in wordpress or HTML Css

Animated Menu link underline Effect in wordpress or HTML Css

/ No Comments

How to add animated Menu link underline  effect in wordpress or HTML Css

Find your menu li class and insert below CSS code ,

    
Ist Code    

.main-navigation li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

    
  

2nd Code    
    

.main-navigation li a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

    

Enjoy!  

 And that’s it! Firefox has had support for animation and transform without the moz prefix since version 16.0 (for over a year), so I’ve left out the prefix in the code. If you want to be safe, you should add -o and -moz to all animations and transforms.

How to add WooCommerce products or product categories to a custom menu?

How to add WooCommerce products or product categories to a custom menu?

/ No Comments

WooCommerce products or product categories to a custom menu

Its a simple option you can enable in wordpress menu option,

To add a product page or product category page to a custom menu, complete the following steps in your WordPress Admin Panel:

1. Go to Appearance > Menus
2. In the upper right corner, click on Screen Options and ensure the "Products" and "Product Categories" boxes are checked
3. Click the tab for the menu you wish to add the items to on the top right side of the page
4. As long as #2 is correct, then you will see boxes for Products and Product Categories on the bottom left of this page
5. Select the checkboxes beside the products or categories that you wish to add to the menu, then press the Add to Menu button
6. Drag and drop the newly added items into the menu positioning of your choice
7. Press the blue Save Menu button

You should now see the product or product categories in the menu on your website.

Woocommerce category wise Listing with their products

Woocommerce category wise Listing with their products

/ No Comments

How to show Woocommerce each categories and their products in a list .

You can create a new shop page and use the woocommerce shortcodes in combination with headers to create a list of products organized by category. 

For example, in the HTML editor you could do something like this:

    
    

Your Category Name
[product_category category="Your-category-name" per_page="9" columns="3" orderby="date" order="desc"]


    
  

You can create and show multiple categories in a single page,

If you know any other options you can share here..

Good Morning wishes greetings images Download

Good Morning wishes greetings images Download

/ No Comments

Good Morning wishes greetings images Download

Right click and download

WordPress website sub menu items divided in to multiple columns - fixed

WordPress website sub menu items divided in to multiple columns - fixed

/ No Comments

How to make wordpress menu divided in to multiple columns the easy way

1: Enable CSS Classes if its not show in in menu list 

2: Go to Appearance > Menus and select the menu you want to edit.

3: Type sub-menu-columns in the top menu item CSS Classes (optional) field.

4: Save menu module

Go to theme CSS page

5: Add bellow block of CSS to your stylesheet

    
    
.submenu { width:410px; } /*You can set width to anything you want */

.sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
}


    
  

You are done!!!

If you know any other options please share on comment box