Créer un thème Keosu

Keosu permet de modifier entièrement le style de son application. Deux mécanismes principaux sont proposés :

  • Les thèmes :  Style général de l’application dans lequel sont définies les couleurs, les polices de caractère et le CSS

  • Les templates de page : dans lesquels nous pouvons définir l’agencement des éléments au sein d’une page (par exemple la position du menu)

  • Les templates de gadget : Agencement des éléments au sein d’un gadget (Par exemple, placer l’image en bas dans le gadget article)

 


 

Créer un thème

Avec un navigateur de fichier, se placer dans votre répertoire d’installation Keosu.

Rendez vous ensuite dans (/keosu)/web/keosu/themes. C’est dans ce répertoire que se trouve l’ensemble de vos thèmes.

Par défaut, vous y trouverez un dossier keosu_base  correspondant au thème par défaut.
Dans cet exemple, nous allons dupliquer le thème de base et nommer la copie « theme »
A la racine du dossier theme, vous trouverez :

  • Une image correspondant à l’illustration du thème dans Keosu

  • Un dossier « header » qui correspond à vos fichiers CSS et javascript

  • Un dossier style qui contient votre CSS et vos images

 


 

Modification du thème :

La première étape consiste à créer une illustration pour notre thème dans keosu.  Il vous suffit de créer une image de taille 644?×?960 et de la renommer <nom de votre thème>.png. Ici nous la nommons theme.png

Depuis l’interface Keosu, nous retrouvons notre nouveau thème, nous le sélectionnons puis nous validons.

edit_app


Écrire du CSS

Nous pouvons ensuite écrire notre propre CSS. Dans cet exemple nous allons changer la couleur du header.

Dans le répertoire theme/style vous trouverez plusieurs fichiers CSS.

Le premier, main.css a pour but d’importer les autres.

Dans notre fichier main.css, nous allons ajouter la ligne

@import url(« theme.css« );

Le fichier complet ressemble à ça

@import url(« style.css« );
@import url(« animate.css« );
@import url(« angular-carousel.css« );
@import url(« facebook-button.css« );
@import url(« theme.css« );

Nous allons ensuite créer le fichier theme.css  au même niveau que main.css.

Dans ce nouveau fichier, nous ajoutons les lignes suivantes, pour changer le header en vert :

.navbar-default {
background-color: #1abc9c;
}

Pour que les modifications soient prises en compte dans l’application,

Depuis l’interface Keosu, nous cliquons sur Publish puis  Export

Pour prévisualiser et tester l’application, il est possible d’utiliser l’émulateur PhoneGap en cliquant sur PREVIEW

Nous allons désormais personnaliser le header en :

  1. Modifiant la police du titre

  2. Modifiant la couleur du titre

  3. Modifiant l’icône du menu

 

Importer une police

  • Importez votre fichier dans style/polices

  • Appelez votre police depuis le fichier style.css


@font-face {
font-family: ‘lobster‘;
src: url(‘polices/lobster/LobsterTwo-regular.otf‘);
}
  • Enfin, appliquez le css au titre de votre application

.title{
font-family:« lobster »;
color:rgba(255,255,255,1.00);
}
  • En passant, nous pouvons également modifier la couleur du background de notre application :

body {
background-color: #2f373f !important;
color: #000000 !important;
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
word-wrap: break-word;
}

Importer / remplacer une image

Ici, nous souhaitons remplacer l’icône du menu.

Il se trouve dans le répertoire :  theme/style/img

Vous pouvez simplement le remplacer par votre nouvel icône.

Vérifions nos modifications sur l’émulateur (sans oublier de cliquer sur Publish puis Export )

modif2

Nos modifications ont bien été prises en compte

Pour savoir quel CSS ajouter, vous pouvez utiliser les debugers inclus dans les navigateurs. Par exemple sous Goolge Chrome Clic droit > Examiner l’élément.

Tout le reste est en pur CSS. Vous pouvez tout modifier, mais n’oubliez par d’exporter pour que vos modifications soient prises en compte.

Le thème par défaut intègre Bootstrap et la librairie flat-ui. Ces deux librairies sont dans le répertoire header -> JS.

Si vous souhaitez ajouter de nouvelles librairies javascript ou CSS externes vous pouvez :

Ajouter les fichiers dans le répertoire JS
Référencer l’import de la librairie dans le fichier theme/header/header.html


Template de page

Vous avez appris à modifier le CSS de votre application dans le chapitre précédent. Nous allons maintenant modifier la structure de la page. Vous pouvez par exemple, ajouter une image à la place du titre de l’application.

Pour commencer, rendez vous dans Keosu > web > Keosu > template > page

Dans ce dossier vous trouverez tous les templates existants de Keosu.

Chaque template est associé à une illustration qui porte le même nom suffixé de « .png ».

Dans cet exemple, nous allons modifier le template slide-template.

  • Dupliquer le fichier keosu-template.html en tuto-template.html

  • Créer l’illustration de votre template en créant une image nomée tuto-template.html.png  L’image doit avoir les dimensions 100?×?150 px.

  • Ouvrir le fichier tuto-template html

Les zones dans lesquelles nous pouvons ajouter  des gadgets sont identifiées par :

La classe « zone »
Un id dans la balise html
Par exemple :

<div id=« body » class=« zone »> </div>

Tout ce qui est à l’intérieur de la balise sera supprimé lors de l’export.

Vous pouvez créer de nouvelles zones, mais elles doivent avoir un id unique.

Ici nous allons ajouter une zone tuto avant le body.

<nav class=« navbar navbar-default navbar-fixed-top classic-navbar » role=« banner »>
<div class=« backButton » ng-click=« previous() » ng-show=« previousButton »>
<span class=« glyphicon glyphicon-remove animated fadeIn .btn » aria-hidden=« true »></span>
</div>
<a href=« index.html »>
<h2 class=« title »>{{::appName}}</h2>
</a>
</nav>
<div class=« content »>
<div class=« container-fluid »>
<div id=« tuto » class=« zone »> </div>
<div id=« body » class=« zone »> </div>
</div>
</div>
<div class=« offline »>
<div ng-show=« {{offline}} »>Network unreachable</div>
</div>
<footer id=« menu » class=« zone classic-menu navbar-fixed-bottom »>
</footer>

En créant une nouvelle page possédant notre tuto template, nous voyons la nouvelle zone apparaître et nous pouvons y ajouter des gadgets.

zone

Vous pouvez ajouter des images dans votre template:

  • Directement en CSS dans le thème : en utilisant la balise <img> directement dans le template

Dans le deuxième cas,

  • Ajouter l’image dans le répertoire img de votre thème

Référencer l’image

Pour changer le logo de l’application,

Dans ce template, nous pouvons remplacer la ligne

<h2 class=« title »>{{::appName}}</h2>

par

<h2 class=« title »><img src=« theme/img/home.png »></h2>

Après l’export de l’application, nous obtenons le résultat suivant :

theme-2


 Template de gadget

Pour modifier l’affichage d’un gadget,  vous pouvez vous rendre dans le dossier / /keosu/app/Resources/packages

A l’intérieur de ce dossier vous trouverez l’ensemble des gadget sous forme de sous dossier. Les gadgets sont préfixés par « Gadget ».

Dans cet exemple nous allons ouvrir le dossier Gadget-keosu-article qui correspond au gadget « article ».

Dans le sous dossier « templates », nous trouvons un ensemble de fichiers html et png sous le même modèle que les templates de page.

Vous pouvez créer ou modifier ces fichiers pour créer un affichage spécifique.

Comme pour les templates de page, vous pouvez référencer des images en utilisant la même règle de définition des chemins.

Pour aller plus loin sur les templates de page qui utilisent AngularJS, vous pouvez consulter la documentation ci-dessous :

https://docs.angularjs.org/guide/templates

Exemple de résultat obtenu en suivant ce cours :

avant-apres

 


 

Découvrez ce cours en vidéo avec Keosu Academy

Programme d'apprentissage de Keosu

Comments are closed, but <a href="https://keosu.com/creer-un-theme/trackback/" title="Trackback URL for this post">trackbacks</a> and pingbacks are open.