Comment puis-je utiliser les styles de themeroller dans des parties "régulières" d'une page?

Question

J'ai une application Web à laquelle j'ai récemment appliqué un thème jQuery ThemeRoller. Maintenant, je veux avoir un élément simple <h2> avoir le même aspect arrondi-rectangulaire que la barre de titre de la boîte de dialogue ou le titre datepicker. Comment puis-je mieux les appliquer à mes éléments qui ne font pas partie des constructions d'interface utilisateur jQuery plus grandes? J'ai commencé à définir manuellement les valeurs de classe css en me basant sur ce que je pouvais voir dans l'outil inspecteur de Chrome, et je me suis rendu compte que je n'étais pas forcément le meilleur car je contourne toute logique d'affectation de classe CSS qui pourrait se produire dans l'interface utilisateur jQuery.

Alors, y a-t-il un moyen plus facile d'appliquer ces styles, ou devrais-je simplement faire un choix explicite de styles CSS sur mes en-têtes?

Answer 1

Il n'y a pas de magie dans les styles CSS de jQuery ThemeRoller, si vous regardez à travers les fichiers CSS qu'il génère, vous constaterez qu'ils sont généralement clairs et concis et assez faciles à lire. Les coins arrondis dans le CSS de ThemeRoller ne fonctionneront pas dans IE, vous ne voudrez peut-être pas en faire trop, mais si vous le faites, appliquez le CSS en utilisant style = 'blah'.

Answer 2

La réponse de stevedbrown est très correcte.

Vous pouvez appliquer des coins arrondis à n'importe quel élément contenant en utilisant le préfixe ui-corner-. Par exemple, pour appliquer des coins arrondis aux quatre coins d'un élément div, vous devez utiliser ui-corner-all.

Pour ne personnaliser que les angles supérieurs de ce même élément, appliquez ui-corner-tr ui-corner-tl aux coins TopLeft et TopRight.

Answer 3

Une autre possibilité de ce qui précède est, si vous connaissez le CSS attributs que vous voulez copier, vous pouvez le faire par programme comme:

var defaultColor = $(".ui-state-default").css("color"); 
var defaultMargin = $(".ui-state-default").css("margin"); 

et appliquer à vos éléments

$(".your-css-class").css("color",color); 
$(".another-css-class").css("margin",margin); 

etc Un peu maladroit, mais cela permet à vos développeurs de CSS de mettre à jour les thèmes à thème et vous n'avez plus à vous préoccuper de la mise à jour de votre code.