I am unable to find following (jquery-ui.css) in my word press.

That file is being loaded via CDN – this means you can’t change it and even if you could, I would never suggest to change a core theme file – the minute you “update” all changes will be lost.

Just override the css in your style.css file

Hey Shannon,

I could be tried to override that particular styles into the style.css file, but, can’t see any changes after making it.

Please refer below snapshot is:

• This reply was modified 7 years, 5 months ago by yedukondalu.

You probably need more specificity or need to use !important

https://developer.mozilla.org/en/docs/Web/CSS/Specificity

Hey Shannon,

I make like this:

/* Icons
———————————-*/

/* states and images */
.ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png) ; width: 16px; height: 16px; }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_cccccc_256x240.png) !important; }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png) !important; }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_cccccc_256x240.png) !important; }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png) !important; }
.ui-state-active .ui-icon {background-image: url(“https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-icons_222222_256x240.png”) !important; }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_4b8e0b_256x240.png) !important; }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_a83300_256x240.png) !important; }

======================================================
but it seems not working.

And also I am making this changes from Godaddy file manager.

I can’t really answer that question because I have no idea what you’re trying to override as you haven’t provided the CSS that is creating the problem or the site as an example.

If it’s not working it is because the original styles are more specific = specificity – the more specific you are, the more likely to override. If you can’t override with specificity, that’s where !important comes in.

This is all CSS and not WordPress specific – I recommend going to Google and looking for “CSS tutorial” to get up to speed with CSS but e.g.

.classname { color:red; }

can be overriden with more specificity:

P.classname { color:green; }