glkubs
asked on
How to use "scope" with jquery-ui css scope defined
The jquery-ui themeroller generated this:
"This field allows you to specify a CSS scope to limit your theme to a particular portion of a page. This is helpful when using multiple themes on a page. If you don't provide a CSS scope, your theme will apply to all UI elements on a page."
Since I need to have the jquery css ONLY apply to a portion of my page, i specified a scope of "test." So, the css looks like:
test .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.2em; }
test .ui-widget .ui-widget { font-size: 1em; }
test .ui-widget-content a { color: #222222; }
test .ui-widget-header a { color: #e6e6e6; }
Now, "test" is not a dom id, or a css class (otherwise it would have to have a # or . before it! So now, how do I specify the "scope" of "test." I've tried <div id="test">, <div class="test">, I even tried <div scope="test">. Nothing seems to get the text, or widgets within the <div> to take on the css.
Any ideas, would be greatly appreciated,
Greg
"This field allows you to specify a CSS scope to limit your theme to a particular portion of a page. This is helpful when using multiple themes on a page. If you don't provide a CSS scope, your theme will apply to all UI elements on a page."
Since I need to have the jquery css ONLY apply to a portion of my page, i specified a scope of "test." So, the css looks like:
test .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.2em; }
test .ui-widget .ui-widget { font-size: 1em; }
test .ui-widget-content a { color: #222222; }
test .ui-widget-header a { color: #e6e6e6; }
Now, "test" is not a dom id, or a css class (otherwise it would have to have a # or . before it! So now, how do I specify the "scope" of "test." I've tried <div id="test">, <div class="test">, I even tried <div scope="test">. Nothing seems to get the text, or widgets within the <div> to take on the css.
Any ideas, would be greatly appreciated,
Greg
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
It's worth mentioning that <test> is not a valid tag. What you want to do is create a div with a class name or id of "test", and then in the ThemeRoller, you specify a scope of .test or #test (respectively).
ASKER