Solved

How to use "scope" with jquery-ui css scope defined

Posted on 2011-02-18
3
1,141 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:glkubs
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 53

Accepted Solution

by:
Huseyin KAHRAMAN earned 250 total points
ID: 34929748
try

<test>Hain Kurt</test>
0
 

Author Closing Comment

by:glkubs
ID: 34929830
I sure could not find that on w3schools.com.  Thanks!
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34930215
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).
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to create a table with buttons 3 42
Google Tag Manager - Add Trigger Using Div class 22 100
Execute jQuery after Function 4 41
Drag & Drop Error 5 33
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question