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

Saturday, May 10, 2014

Ravish Jha Webdesigner

Hello there! I’m Ravish Jha Website Designer & Developer living in New Delhi, India. I have been passionate about design and art. Working with Magento, opencart, wordpress, psd to html, psd to worpress theme.

I am also working as a freelancer Web designer and developer. You can see my portfolio on my website: ravishjha.com

Tuesday, March 4, 2014

Background Origin in CSS

The default for background-origin is  padding-box. This means the background applies to the area containing the padding but not to the area containing the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: padding-box;
}


This sample image is scaled to fill its container and set not to repeat.

Setting the origin to border-box means that the background will now extend out under the border:

section {
    margin: 1em;
    padding: 1em;
    border: 1em dashed black;
    background-origin: border-box;
}

Multiple Background in CSS3

Hi 
Adding multiple background images is simply a matter of listing them, along with any relevant attributes, separated by commas in the background property:


background: top right
  url('pitr-head.png') no-repeat,
 bottom right
  url('aj-head.png') no-repeat,
 top left
  url('mike-head.png') no-repeat,
 bottom left
  url('sid-head.png') no-repeat;


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari
Internet Explorer 9+, Firefox 3.6+, Opera 10.5+, Chrome 7+, and Safari 3+ support the <canvas> element.


Tuesday, February 25, 2014

CSS3 :nth-child() Selector

Hi this si css selector for li

li:nth-child(2n)
{
background:#ff0000;
}

Selector Exp 
li:nth-child(odd)
li:nth-child(even)
li:nth-child(3n+0)
li:first-child

after and before

li:after
li:before

Friday, February 14, 2014

CSS3 Transitions, Animation

Hi !

There is some css code for reference of Css3 transitions, animations

div
{
width:100px;
height:100px;
background:red;
transition:width 2s; /* use transition artibute name and animation time  */
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}

Thanks :)