Using CSS Variables

Nice to hear! Variables are finally available in CSS. You can declare variables in CSS with var-* prefix, such as

html{
    var-pri-color: #0090f0;
} 

With above code, we created a variable with name ‘pri-color‘ and it stores ‘#0090f0‘ as value. There is an important condition with CSS variables and that is, you must declare them under CSS-Selectors else they will not work. Since we want to use the variable globally, we nested it under html{} selector.

You can use this variable with var() method as shown in following code

body {  
    background-color: var(pri-color);  
} 

Hence the whole code will be

html{
    var-pri-color: #0090f0;
}
body{
    background-color: var(pri-color);
}

Demo
(You will see blue background in following demo, if your browser supports CSS variables.)

See the Pen CSS Variables by Ankur Mhatre (@asmhatre) on CodePen.

How to View your Old Notifications in Android

Lost or dismissed your important notification from your android device? Now you want to get it back?  Well if you are having Android JellyBean or later, you can get back your dismissed notification with few easy steps.

Android Notification History
Android Notification History

Simple go to your android home screen and tap App icon. Switch to Widgets tab, and look for 1×1 Settings Shortcut. Place it on your home screen. Now tap on that newly placed icon and select Notifications from list. That’s all. Tap on it to see all pushed notification history in reverse chronological order.

Image via ibtimes.com and Kārlis Dambrāns

WordPress Hack: Remove Width And Height Attributes From Images

Whenever you upload any image to your WordPress based website, and you use it in your post, automatically WordPress adds Width and Height attributes to all image elements (i.e. in tags).

This is fine in most of the cases, but if you want to stop WordPress from adding those attributes then you can go with following code. You have to put this code in your functions.php file.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

The filters are as follows:

  • post_thumbnail_html – Filter any post thumbnails
  • image_send_to_editor – Filter the HTML when adding an image to the editor
  • the_content – Will remove all attributes from attached images

If you are a Genesis user, the you have to add one more line along with above code.

// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );