Friday, June 17, 2016

Gulp image sprite css gulp.spritesmith

npm install --save-dev gulp.spritesmith

var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
    var spriteData = gulp.src('img/sprites/*.png')
        .pipe(spritesmith({
            /* this whole image path is used in css background*/
            imgName: '../img/sprite.png',
            cssName: 'sprite.css'
        }));
    spriteData.img.pipe(gulp.dest('img'));
    spriteData.css.pipe(gulp.dest('css'));
});


Enjoy Comments are welcome 




Wednesday, April 27, 2016

CSS multiline text with ellipsis

HTML

<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>


Css

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 3em 2em;
  font-family: 'Open Sans', Arial, sans-serif;
  color: #cf6824;
  background: #f7f5eb;
}
h2 {
  display: block;
  /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: 400px;
  height: 145.6px;
  /* Fallback for non-webkit */
  margin: 0 auto;
  font-size: 26px;
  line-height: 1.4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Thursday, September 24, 2015

WC Vendor Allow vendors to view all media

Hi friends
If you are using Wc Vendor plugin and
If you want Allow vendors to view all media library
Step 1 
Please open file in editor
wp-content > plugins > wc-vendors > classes > admin > class-admin-users.php

And find filter 
Filter user attachments so they only see their own attachments 

And remove 
Filter Code under this filter  

Tuesday, August 25, 2015

OPENCART ADMIN BLANK PAGE

Our store uses the Script Opencart. It was showing blank page while tried to access Admin page.
I have pasted the following lines in Index.php of Admin directory and checked for errors.
ini_set(‘display_errors’, 1);
ini_set(‘log_errors’, 1);
error_reporting(E_ALL);
After that while reloading the Admin page, I found the error was in the directory path. After renaming the correct directory name in Config.php inside Admin folder, it started working fine..
Finally the blank page problem solved!


Comments Are welcome. 

Wednesday, August 27, 2014

Add a custom currency / symbol

Hi
To add a custom currency paste this code in your theme functions.php file and replace Currency Name with your currency and symbol with own symbol

add_filter( 'woocommerce_currencies', 'add_my_currency' );
function add_my_currency( $currencies ) {
$currencies['ABC'] = __( 'Currency name', 'woocommerce' );
return $currencies;
}
add_filter('woocommerce_currency_symbol', 'add_my_currency_symbol', 10, 2);
function add_my_currency_symbol( $currency_symbol, $currency ) {
switch( $currency ) {
case 'ABC': $currency_symbol = '$'; break;
}
return $currency_symbol; 
}


Enjoy Comments are welcome !!

Sunday, June 22, 2014

how to Make (get) screen 100% height in css

There are many ways to make the height of your HTML elements to be exactly as the height of the browser screen, regardless of the screen resolution, browser, device, etc. Many of these options use JavaScript to find out the height of the window. But there’s a way to do this with pure CSS only.
What is Viewport-Percentage (or Viewport-Relative) Lengths?
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
So, by using viewport-percentage lenghts, HTML elements adjust automatically when the height or width of the screen changes.
There are a few options you may find useful:
  • vh (viewport height)
  • vw (viewport width)
  • vmin (viewport minimum length)
  • vmax (viewport maximum length)

Here’s just a simplified code example of the HTML:
and here’s the CSS using vh:

div#welcome {
height: 100vh;
background: black;
}

div#projects {
height: 100vh;
background: yellow;
}

Enjoy Comments are welcome !!