Comment personnaliser un thème avec le Themeroller de jquerymobile et l'utiliser dans Webelement

Comme vous l'avez remarqué, créer un site Web mobile avec Webelement est très facile et simple. Avec ce logiciel de conception de site Web mobile, il n'est pas nécessaire d'être un super webmestre pour concevoir un site Web mobile qui sera beau par défaut :-)

Notre logiciel de conception de site Web mobile vient avec un modèle de base qui contient plusieurs thèmes de couleurs. Vous pouvez utiliser un des thèmes par défaut ou personnaliser ce dernier afin de reproduire les couleurs de votre logo ou organisation facilement.

L'aide qui suit vous montre comment utiliser l'éditeur de thème pour personnaliser le thème par défaut ou autre .

Que voulons-nous accomplir?
Nous allons changer le thème bleu pour un thème vert.

Thème personnalisé avec Webelement - logiciel de coneption de site Web mobile

Webelement - paramètres

1) Cliquez sur "Paramétrages de votre Site Web".

Personnaliser un thème dans Webelement

2) Cliquez sur "Éditer les thèmes personnalisés".

Note* Vous allez être redirigé vers http://jquerymobile.com/themeroller/ . Notre logiciel de conception de site Web mobile est basé sur JqueryMobile pour assurer un maximum de compatibilité avec les divers appareils portables. Alors si vous connaissez déjà JqueryMobile, vous pouvez utiliser votre expertise pour coder des fonctionnalités plus complexes dans l'éditeur de code html de Webelement.

Jquerymobile theme roller

3) Cliquez sur "Get Rolling"

Custom Webelement theme

4) Étant donné que nous avons choisis le thème B dans notre projet dans Webelement, nous devons personnaliser le panneau B dans l'éditeur Themeroller. Pour appliquer une couleur, il faut tout simplement sélectionner une couleur en retenant le bouton gauche de la souris et la glisser dans le panneau B à partir des carreaux de couleur dans le haut de la page.

NOTE* Si vous n'appliquez pas les couleurs sur le même panneau avec la bonne lettre (B par exemple), vous ne verrez pas les changements une fois importés dans Webelement.

5-download-the-theme

5) Cliquez sur "Download" pour télécharger le thème personnalisé dans votre ordinateur.

6-give-a-name

6) Donner un nom au thème.
7) Cliquez sur "Download Zip" pout télécharger le fichier.
8) Sélectionnez l'emplacement de sauvegarde du fichier et Cliquez sur "Enregistrer ou Save".

8-save-the-zip-file

8-save

9-extract-the-theme

9) Allez dans le dossier où vous avez téléchargé le fichier zippé et décompresser ce dernier en le sélectionnant et faire souris droite.
Vous devez avoir un logiciel comme Winrar installé dans votre ordinateur pour décompresser le fichier.

10-open-folder

10) Cliquez sur sur le dossier "ex.: jquery-mobile-theme" (Note* ce dossier aura le nom que vous lui avez donné lors de l'étape de sauvegarde)

11-step

11) Cliquez sur le dossier "themes" pour voir le fichier à attacher à votre projet dans Webelement.

Activer le thème personnalisé dans Webelement

10) Retournez sur la fenêtre de paramétrages de votre site Web mobile dans Webelement et cocher la case "Utiliser un thème personnalisé".

Activer le thème personnalisé dans Webelement

Choisir un thème personnalisé dans Webelement

13) Cliquez sur le bouton situé sur le champ de "Thème personnalisé" afin d'aller sélectionner le thème personnalisé.

14-choose-theme

14) Trouver le dossier où vous avez décompressé votre fichier zippé et cliquez sur "Ouvrir ou Open" pour attacher le fichier à votre projet dans Webelement.

Noe* Il y a 2 fichiers, un optimisé pour la performance et l'autre ne l'est pas. Si vous souhaitez apporter des changements plus poussés, utiliser le fichier sans l'extension ".min,css".

Entregistrer un thème personnalisé dans Webelement