BigText plugin doesn't work when parent class is identified in css

Question

I use the following jquery plugin to set the font sizes depending on the width of the div containers: http://www.zachleat.com/web/bigtext-makes-text-big/ I have been able to make it work with different fonts when I I define fonts in css as

.bigtext{ font-family:Arial } 

see http://jsfiddle.net/pF5bQ/3/

however, if I define css with the parent class

 .theme .bigtext{ font-family:Arial } 

It sets the font too large.

see http://jsfiddle.net/pF5bQ/4/

In the application, I work on the functions of various themes that use different fonts, so I need to be able to define different styles for bigtext based on the parent class.

Any ideas?

Answer 1

Not a “true” solution, but the work around I found that if I applied my class to the same div as the large text, I would get the desired result.

 .theme.bigtext{ font-family:Arial } 

It feels really hacked, because in the project I'm working on, I need to perform a class switch and what is not in javascript, but it does its job.

http://jsfiddle.net/pF5bQ/7/

Answer 2

well you can try this hack i did lol

http://jsfiddle.net/pF5bQ/4/

 .bigtext{ font-family:arial } .theme .bigtext{ font-family:arial; color:red; } 

edit: so if you put the .theme line inside your css theme or whatever way you implement it, I think it will work as long as you have the original lol line. That's all I can offer, I never used bigtext before