Chrome dev tools : how to filter css styles by file name

Sometimes you need to analyze the css styles coming from a specific file, and the chrome developer tools shows all the style from all the linked css files.

Here is an example from NYT website:

If you need to focus only on a specific CSS file type the name on the filter box in the right upper corner, i.e. “_story.scss” :

Now you can browse other pages in the same website and you will see only the styles coming from the _story.scss file.

It works also if you have multiple css files with the same name but with different query strings:

style.css?ver=1.0.1
style.css?ver=2.0.0

Write in the filter box “ver=2.0.0” and you will see only the styles from the 2.0.0 version.

You can also edit and save the css file using this guide.

Hope this helps!

Chrome Developer Tools Autocomplete

If you are using Chrome Developer Tools and you don’t remember a specific CSS value you can ….

Click on the css property and type CTRL + SPACE, the complete list of the accepted values will appear.

 

Hope it helps!!!

Change CSS and SAVE on local file system using Chrome Developer Tools

I’m using chrome for development and I’ve discovered this cool features.
Using the Chrome Developer Tools you can inspect css properties and change on the fly the values.
Try it on CSS garden, download this two files:  html file and css file, and play with them.
Original page:

Inspect some elements and change the css properties:
from:

To:

Here are the changes:

Like it? Click on the css name on the right

Chrome will go to the Resources Pages…

Right Click and… choose SAVE, the first time it will ask you the position of the local CSS file…

Next time the SAVE option will save the file silently without popups.
This trick is useful if you use external css files, it doesn’t work on server pages with hard coded css.

UPDATE:
Here is the link to the Google IO 2011 presentation of this functionality: http://youtu.be/N8SS-rUEZPg, the first section of the video shows the CSS edit improvements in Chrome developer tools.

How to remove Telerik RadGrid selected Row Style

If you need to remove the selected row style applied to the rbSelectedRow element, here is the Css code:

/* override selected row*/

.RadGrid_Office2010Silver .rgRow td
{
border-color:#FFFFFF #FFFFFF #FFFFFF #FFFFFF !important;
}
 
.RadGrid_Office2010Silver .rgAltRow
{
background:none repeat scroll 0 0 #eee !important;
}
 
.RadGrid_Office2010Silver .rgAltRow td
{
border-color:#F1E9DC #F1E9DC #F1E9DC red !important;
}
 
.RadGrid_Office2010Silver .rgRow
{
background: inherit !important;
}
 
.RadGrid_Office2010Silver .rgRow td, .RadGrid_Office2010Silver .rgAltRow td
{
border-left: solid 1px #ddd!important;
padding-left: 7px !important;
}
 
/* finally, need to put this one back in */
 
.RadGrid_Office2010Silver .rgHeader:first-child, .RadGrid_Office2010Silver th.rgResizeCol:first-child, .RadGrid_Office2010Silver .rgFilterRow > td:first-child, .RadGrid_Office2010Silver .rgRow > td:first-child, .RadGrid_Office2010Silver .rgAltRow > td:first-child
{
border-left: 0 none !important;
padding-left: 8px !important;
}

.RadGrid_Office2010Silver .rgSelectedRow > td 
{
    background:inherit!important;
}

Hope it helps!

Multiple CSS class selection

If you have two or more classes inside your HTML element you can select it using :

CSS:

.classA.classB
{
border:1px;
}

JQuery;

$(‘.classA.classB’).css(‘border’,’1px’);

How to use JQuery UI Theme with other themes using CSS Scope

If you need to use the slider element inside you web site you’ll find very useful the JQuery UI Slider:

You can download from the JQuery UI web site the theme you like and you can use it inside your web site.

Theme preview	+	Theme download	=	Theme folder with CSS and Images
	+		=

One problem may arise if your site is using another theme, the second theme will override the first, causing undesired layout effects.

Here comes the “Advanced Theme Settings” option, it permits to define a “CSS namespace” used only by the new control:

Next you need to insert your control code inside an HTML element like div or span with the same CSS Scope, for example:

<div class=”.SLIDER”>
<!—your control using the SLIDER CSS theme here –>
</div>

And this is the effect, two JQuery themes used in the same page: