CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Backo
Backo

Reputation: 18871

Overriding CSS classes

I am using Ruby on Rails 3.0.9, jQuery 1.6.2 and jQuery UI. I would like to override some CSS class attributes for my tabs without change the original CSS file generated by the ThemeRoller.

How can I do that? What do you advice about?

P.S.: I would like to style my tabs without modifying the jQuery UI CSS file at all so that, in future developments, I can "re-generate" that file without lose my custom CSS statements.

Upvotes: 1

Views: 8078

Answers (6)

Syri
Syri

Reputation: 671

This is quite simple to achieve. CSS applies styling based on load order. To override any style, it needs to be loaded after the core stylesheet.

  1. Load your jQuery UI CSS.
  2. Load your custom CSS file.

In your custom CSS file, you can override your tab structure using the same markup found in the core UI CSS file.

This will allow you to re-generate and replace the core files without losing your customization.

Upvotes: 3

Bilal Murtaza
Bilal Murtaza

Reputation: 795

you can use jquery addclass() and removeclass() selectors.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

A simple thing would be to create a secondary stylesheet.

Include the same styles for the tabs in this secondary sheet.

Place it under the Themeroller CSS in the head.

Because the styles are "last" in order, they will be applied without changing the original styles.

Upvotes: 1

John x
John x

Reputation: 4031

yon use .css 

$("#elemID").css({backgroundColor:'Red',text:'Blue'});

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

You can do it easily. Lets say you want to override the color of any element in jquery.ui.css then you can do as below.

.myClass{
  color:red !important;//specify important to any style you want to override.
}

Upvotes: 0

user686605
user686605

Reputation:

This is a really general question. I'd say to use something like firebug in FF to figure out where the styles are coming from (especially useful when you are using jQuery UI; I find the CSS gets tricky). Then you've got to sort out scoping yourself, or give more details in your question.

Upvotes: 0

Related Questions