Comment créer des thèmes ThemeRoller CSS3 personnalisés - mannequins

Les 24 thèmes CSS3 prédéfinis offrent une large gamme de couleurs, de texte et d'autres choix. Cependant, il est possible de créer un nombre significativement plus important de thèmes en utilisant l'approche personnalisée. Vous pouvez commencer avec la configuration de thème par défaut et travailler à partir de là, mais la meilleure approche est de trouver un thème prédéfini qui ressemble à ce que vous voulez et de le modifier à la place.

Non seulement vous ferez moins de travail de cette façon, mais vous constaterez peut-être qu'il n'y a pas tellement de fonctionnalités à modifier une fois que vous avez un thème prédéfini à l'esprit. Cet article vous aide à créer un thème personnalisé à l'aide de ThemeRoller.

Chaque thème comprend plusieurs paramètres. En modifiant un paramètre particulier, vous contrôlez l'apparence de toutes les fonctionnalités de l'interface utilisateur jQuery, y compris tous les widgets. Chacun de ces paramètres comporte un certain nombre de sous-paramètres que vous pouvez utiliser pour contrôler l'apparence générale de votre thème. La liste suivante fournit un aperçu de ces paramètres.

• Paramètres de police: Détermine l'apparence générale du texte dans le thème. Vous pouvez choisir la famille de police, le poids et la taille de la police.

• Rayon de coin: Détermine la taille des coins arrondis utilisés pour les différents éléments. Ce paramètre n'affecte pas un navigateur qui ne prend pas en charge les coins arrondis, tel qu'Internet Explorer 7.

• En-tête / barre d'outils: Spécifie les paramètres pour l'arrière-plan et la bordure utilisés pour tous les en-têtes et barres d'outils.

  Lorsque vous travaillez avec l'arrière-plan, vous pouvez choisir la couleur d'arrière-plan, la texture et le pourcentage de couverture. Une texture spécifie la façon dont le fond est structuré, tel que l'utilisation de diagonales ou de losanges. En cliquant sur le champ de texture affiche automatiquement une liste d'images acceptables - il suffit de choisir la texture que vous voulez essayer. Choisir la bonne texture peut ajouter du piquant à votre site.

  

  Les paramètres de bordure contrôlent les couleurs des bordures, du texte et des icônes. Lorsque vous cliquez sur l'un de ces champs, vous voyez une boîte de dialogue de sélection de couleur. Cependant, vous pouvez également taper une valeur de couleur spécifique, en utilisant la notation hexadécimale.

  

• Contenu: Fournit les mêmes sélections d'arrière-plan et de bordure que celles fournies par les paramètres En-tête / Barre d'outils. La différence est que ces paramètres affectent le contenu de la page, plutôt que les en-têtes et les barres d'outils.

• Cliquable: état par défaut: Fournit les mêmes sélections d'arrière-plan et de bordure que celles fournies par les paramètres En-tête / Barre d'outils. La différence est que ces paramètres affectent les contrôles qui sont dans l'état par défaut, plutôt que les en-têtes et les barres d'outils.

• Cliquable: état du survol: Fournit les mêmes sélections d'arrière-plan et de bordure que celles fournies par les paramètres En-tête / Barre d'outils. La différence est que ces paramètres affectent les contrôles qui se trouvent dans l'état stationnaire (lorsque le curseur de la souris est placé au-dessus du contrôle), plutôt que les en-têtes et les barres d'outils.

• Cliquable: état actif: Fournit les mêmes sélections d'arrière-plan et de bordure que celles fournies par les paramètres En-tête / Barre d'outils. La différence est que ces paramètres affectent les contrôles qui sont dans l'état actif (sélectionné), plutôt que les en-têtes et les barres d'outils.

• En surbrillance: Fournit les mêmes sélections d'arrière-plan et de bordure que celles fournies par les paramètres En-tête / Barre d'outils. La différence est que ces paramètres affectent tout ce que l'utilisateur a mis en évidence à l'écran, plutôt que les en-têtes et les barres d'outils.

• Erreur: Fournit les mêmes sélections d'arrière-plan et de bordure que celles fournies par les paramètres En-tête / Barre d'outils. La différence est que ces paramètres affectent les messages d'erreur (y compris le contenu), plutôt que les en-têtes et les barres d'outils.

• Écran modal pour les superpositions: Définit la manière dont les superpositions apparaissent à l'écran. Une superposition est une information présentée au-dessus du contenu existant de la même manière qu'une boîte de dialogue s'affiche en haut d'une application. Les paramètres contrôlent l'apparence de l'arrière-plan et de la superposition.

  Les paramètres d'arrière-plan définissent la couleur, la texture et le pourcentage de couverture de l'arrière-plan. Les textures utilisées pour une superposition sont complètement différentes de celles utilisées pour les autres éléments, vous devez donc les vérifier attentivement. À tous les autres égards, les paramètres d'arrière-plan fonctionnent de la même manière que ceux utilisés pour les paramètres En-tête / Barre d'outils.

  Le paramètre Opacité de superposition contrôle la façon dont vous pouvez voir le contenu sous-jacent. Dans la plupart des cas, ThemeRoller fournit un minimum de transparence pour donner à la page un aspect semblable à du verre (présent dans certains systèmes d'exploitation aujourd'hui). Cependant, vous pouvez modifier ce paramètre pour fournir divers effets spéciaux. Mettre cette valeur trop basse tend à distraire le lecteur car le contenu original est trop facilement vu.

• Drop Shadows: Modifie l'apparence des ombres portées, qui ont tendance à donner un effet 3D à certains éléments de la page. Vous pouvez contrôler l'arrière-plan et l'apparence générale de l'ombre portée. Les contrôles d'arrière-plan sont exactement les mêmes que ceux utilisés avec les superpositions d'écran modal.

  L'apparence générale de l'ombre portée est définie par l'opacité de l'ombre, l'épaisseur et le décalage de l'élément ombré. Vous pouvez également contrôler l'arrondi des coins d'ombre (lorsque la fonctionnalité est prise en charge par le navigateur).