Référence des styles Webtop

De Wiki1000
(Différences entre les versions)
(Travailler avec les styles)
(Modification d'un style)
Ligne 25 : Ligne 25 :
 
==== Modification d'un style  ====
 
==== 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;}
 +
 +
 +
 +
 +
 +
''Exemple2 : Modification de la fenêtre  du login''
  
 
==== Supprimer un style ====
 
==== Supprimer un style ====
  
 
===Affichage des styles disponibles===
 
===Affichage des styles disponibles===

Version du 16 décembre 2008 à 16:26

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;}



Exemple2 : Modification de la fenêtre du login

Supprimer un style

Affichage des styles disponibles





Whos here now:   Members 0   Guests 0   Bots & Crawlers 1
 
Outils personnels