Référence des styles Webtop

De Wiki1000
(Différences entre les versions)
(Modification d'un style)
(Modification d'un style)
Ligne 32 : Ligne 32 :
 
   .swtEditUnfocus {background-color: #E2EEFA;}
 
   .swtEditUnfocus {background-color: #E2EEFA;}
  
 +
{{#images:edit-bkg-old.jpg|stylesweb}}
  
 +
Dans notre fichier ("Mon premier style.css") on surcharge le style "swtEditUnfocus":
  
 +
  .swtEditUnfocus {background-color: red;}
  
 
+
{{#images:edit-bkg-new.jpg|stylesweb}}
  
 
''Exemple2 : Modification de la fenêtre  du login''
 
''Exemple2 : Modification de la fenêtre  du login''

Version du 16 décembre 2008 à 16:35

Sommaire

Référence des styles

Un style permet de modifier l'apparence et les visuels de l'application, par exemple les couleurs, icones, images ... peuvent être modifiés à travers les styles. Les styles sont stockés dans un répertoire du site chaque utilisateur peut sélectionner le style qui lui convient le mieux

Principe des styles dans le Client Léger

Un style web représente un fichier CSS (feuilles de style en cascade) qui se trouve dans le répertoire "themes" du site.

Pour ajouter un style il suffit de créer un nouveau fichier CSS dans le répertoire "themes" du site.

Dans la génération des pages web L1000, si l'utilisateur a choisi ce style, on génère une référencé vers ce fichier:


<link id="custom" type="text/css" rel="Stylesheet" href="../themes/mon style.css" />

Travailler avec les styles

La création d'un style est réalisée en surchargeant le style par défaut.

Créer un nouveau style

Dans le répertoire "theme" du site, on va créer un nouveau fichier CSS, par exemple "Mon Premier Style.css"

new-style.jpg

Modification d'un style

Pour modifier l'aspect visuel d'un composant on surcharge les styles CSS existants dans le répertoire "css" du site:

Exemple1 : Modification de la couleur du fond des composants EDIT

Dans le fichier "swtcontrols.css" on trouve:

  .swtEditUnfocus {background-color: #E2EEFA;}

edit-bkg-old.jpg

Dans notre fichier ("Mon premier style.css") on surcharge le style "swtEditUnfocus":

  .swtEditUnfocus {background-color: red;}

edit-bkg-new.jpg

Exemple2 : Modification de la fenêtre du login

Supprimer un style

Affichage des styles disponibles

Outils personnels