Référence des styles Webtop

De Wiki1000
(Différences entre les versions)
(Modification d'un style)
 
(12 révisions intermédiaires par 3 utilisateurs sont masquées)
Ligne 9 : Ligne 9 :
 
Pour ajouter un style il suffit de créer un nouveau fichier CSS 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:
+
Dans la génération des pages web L1000, si l'utilisateur a choisi ce style, on génère une référence vers ce fichier:
  
  
Ligne 23 : Ligne 23 :
 
{{#images:new-style.jpg|stylesweb}}
 
{{#images:new-style.jpg|stylesweb}}
  
==== Modification d'un style  ====
+
==== Modifier un style  ====
  
 
Pour modifier l'aspect visuel d'un composant on surcharge les styles CSS existants dans le répertoire "css" du site:
 
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''
+
'''''Exemple1''' : Modification de la couleur du fond des composants EDIT''
  
Dans le fichier "swtcontrols.css" on trouve:  
+
Dans le fichier "/css/swtcontrols.css" on retrouve:  
 
   .swtEditUnfocus {background-color: #E2EEFA;}
 
   .swtEditUnfocus {background-color: #E2EEFA;}
  
 
{{#images:edit-bkg-old.jpg|stylesweb}}
 
{{#images:edit-bkg-old.jpg|stylesweb}}
  
Dans notre fichier ("Mon premier style.css") on surcharge le style "swtEditUnfocus":
+
Dans notre fichier ("/theme/Mon premier style.css") on surcharge le style "swtEditUnfocus":
  
 
   .swtEditUnfocus {background-color: red;}
 
   .swtEditUnfocus {background-color: red;}
Ligne 40 : Ligne 40 :
 
{{#images:edit-bkg-new.jpg|stylesweb}}
 
{{#images:edit-bkg-new.jpg|stylesweb}}
  
''Exemple2 : Modification de la fenêtre  du login''
+
'''''Exemple2''' : Modification de la fenêtre  du login''
 +
 
 +
Dans le fichier "/css/theme.css" on retrouve:
 +
  .login-1000 {
 +
  position: absolute;
 +
  background-image: url(../img/controls/images/login-1000.png);
 +
  background-repeat: no-repeat;
 +
  background-position: 0px 0px;
 +
  }
 +
 
 +
{{#images:login-bkg-old.jpg|stylesweb}}
 +
 
 +
Dans notre fichier ("/theme/Mon premier style.css") on surcharge le style "login-1000":
 +
      .login-1000 {
 +
      background-image: url(./resources/logo.png);
 +
      }
 +
 
 +
{{#images:login-bkg-new.jpg|stylesweb}}
  
 
==== Supprimer un style ====
 
==== Supprimer un style ====
 +
Pour supprimer un style il suffit de supprimer dans le répertoire du site le fichier CSS associé.
  
 
===Affichage des styles disponibles===
 
===Affichage des styles disponibles===
 +
 +
Pour pouvoir sélectionner un style web il faut ajouter dans le site une liste déroulante qui affiche la liste les styles disponible (la liste des fichiers du répértoire "theme" du site).
 +
 +
Ce composant (la liste déroulante) s'appelle "TStyleChooser" et on le retrouve dans la palette "Contrôles orientés HTML":
 +
 +
{{#images:design.jpg|stylesweb}}
 +
 +
 +
On ajoute ce contrôle dans une fenêtre et  après on affiche cette fenêtre dans site ou dans une vignette portail :
 +
 +
 +
{{#images:style-chooser.jpg|stylesweb}}
 +
 +
 +
Le style choisis est sauvegardé dans les préférences utilisateur.
 +
 +
[[Category:Personnalisation]]

Version actuelle en date du 15 mars 2013 à 08:53

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érence 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

Modifier 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 "/css/swtcontrols.css" on retrouve:

  .swtEditUnfocus {background-color: #E2EEFA;}

edit-bkg-old.jpg

Dans notre fichier ("/theme/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

Dans le fichier "/css/theme.css" on retrouve:

  .login-1000 {
  	position: absolute;
  	background-image: url(../img/controls/images/login-1000.png);
  	background-repeat: no-repeat;
  	background-position: 0px 0px;
  }

login-bkg-old.jpg

Dans notre fichier ("/theme/Mon premier style.css") on surcharge le style "login-1000":

     .login-1000 {
     	background-image: url(./resources/logo.png);
     }

login-bkg-new.jpg

Supprimer un style

Pour supprimer un style il suffit de supprimer dans le répertoire du site le fichier CSS associé.

Affichage des styles disponibles

Pour pouvoir sélectionner un style web il faut ajouter dans le site une liste déroulante qui affiche la liste les styles disponible (la liste des fichiers du répértoire "theme" du site).

Ce composant (la liste déroulante) s'appelle "TStyleChooser" et on le retrouve dans la palette "Contrôles orientés HTML":

design.jpg


On ajoute ce contrôle dans une fenêtre et après on affiche cette fenêtre dans site ou dans une vignette portail :


style-chooser.jpg


Le style choisis est sauvegardé dans les préférences utilisateur.





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