+33 03 83 56 65 20 +33 06 87 42 95 30

Tutoriels Astroïd

Ajouter une option dans un template : exemple de dégradé

Une fois que l’on connait les différents types de champs astroid, il faut savoir quoi en faire, quand et où les utiliser:

C’est l’objectif de cette section.

Nous allons chercher à ajouter une fonction pour avoir un fond dégradé en css dans le template Astroid, cette fonctionnalité n’existant pas nativement.

Pour parfaire le tout, nous choisirons entre dégradé radial ou linéaire

 

Préparer le contenu :

Nous allons definir le code à modifier en css

pour le linéaire :

 

body {
background: rgb(9,9,121);
background: -moz-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
background: -o-linear-gradient(180deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%); 
background: linear-gradient(270deg, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%); 
}

 

et pour le radial

 

body { 
 background: rgb(9,9,121);
 background: -moz-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
 background: -webkit-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
 background: -o-radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
 background: radial-gradient(circle, rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
}

 

 

Nous devrons créer :

  • un bouton interrupteur dégradé

  • un bouton radio choix radial / linear

  • un sélecteur de couleur de début

  • un sélecteur de couleur de fin

  • les textes pour l’intégration dans Joomla (.ini)

Textes des boutons / options / descriptions

Ajoutons les chaînes de langues en anglais dans /language/en-GB/en-GB.astroid.ini

TPL_ASTROID_GRADIENT="Gradient Background"
TPL_ASTROID_GRADIENT_DESC="enable to have a gradient background instead of color"
TPL_ASTROID_GRADIENT_CHOICE="Type of gradient"
TPL_ASTROID_GRADIENT_CHOICE_DESC="Choose between linear or radial Background"
TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR="Linear"
TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL="Radial"
TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN="Start color"
TPL_ASTROID_BACKGROUND_COLOR_LABEL_END="End color"

 

puis en français dans /language/fr-FR/fr-FR.astroid.ini

TPL_ASTROID_GRADIENT="Fond dégradé"
TPL_ASTROID_GRADIENT_DESC="activer pour avoir un fond de page dégradé"
TPL_ASTROID_GRADIENT_CHOICE="Type de dégradé"
TPL_ASTROID_GRADIENT_CHOICE_DESC="Choisissez entre dégradé linéaire et dégradé radial"
TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR="Linéaire"
TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL="Radial"
TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN="Couleur de début"
TPL_ASTROID_BACKGROUND_COLOR_LABEL_END="Couleur de fin"

Création des champs dans le fichier xml du template

Dans le fichier /templates/astroid_template_zero/astroid/options/colors.xml qui gère les options des champs dans le gestionnaire de template, ajoutons ces lignes :

<field astroidgroup="body" name="body_gradient" type="astroidtext" astroid-switch="true" default="0" label="TPL_ASTROID_GRADIENT" description="TPL_ASTROID_GRADIENT_DESC"></field>			
<field ngShow="body_gradient" astroidgroup="body" type="astroidradio" name="TPL_ASTROID_GRADIENT_CHOICE" default="linear" title="TPL_ASTROID_GRADIENT_CHOICE" description="TPL_ASTROID_GRADIENT_CHOICE_DESC"> <option value="linear">TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR</option> <option value="radial">TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL</option> </field> <field ngShow="body_gradient" astroidgroup="body" name="body_background_color_begin" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN"> </field> <field ngShow="body_gradient" astroidgroup="body" name="body_background_color_end" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_END"> </field>

 

nous allons détailler :

<field astroidgroup="body" name="body_gradient" type="astroidtext" astroid-switch="true" default="0" label="TPL_ASTROID_GRADIENT" description="TPL_ASTROID_GRADIENT_DESC"></field>

insertion du champ interrupteur qui active le dégradé ( ou pas ), le champ est un switch, mis par défaut sur 0 (désactivé) et il appartient au groupe body ainsi il apparaitra avec les autres options de couleurs du body.

<field ngShow="body_gradient" astroidgroup="body" type="astroidradio" name="TPL_ASTROID_GRADIENT_CHOICE" default="linear" title="TPL_ASTROID_GRADIENT_CHOICE" description="TPL_ASTROID_GRADIENT_CHOICE_DESC">
<option value="linear">TPL_ASTROID_GRADIENT_CHOICE_DESC_LINEAR</option>
<option value="radial">TPL_ASTROID_GRADIENT_CHOICE_DESC_RADIAL</option>
</field>

 

C’est un champ de type astroiradio (radio) du groupe body, il apparaîtra dans la zone body des options de couleur, et l’attribut field ngShow="body_gradient" conditionne son apparition au fait que le bouton body_gradient soit activé.

	<field ngShow="body_gradient" astroidgroup="body" name="body_background_color_begin" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_BEGIN">
			</field>
			<field ngShow="body_gradient" astroidgroup="body" name="body_background_color_end" type="astroidcolor" large="true" label="TPL_ASTROID_BACKGROUND_COLOR_LABEL_END">
			</field>

C’est un champ de type astroidcolor (sélecteur de couleur) du groupe body, ils apparaîtront dans la zone body des options de couleur, et l’attribut field ngShow="body_gradient" conditionne leur apparition au fait que le bouton body_gradient soit activé.

backend fr

Appel et intégration dans les css

Nous avons maintenant des paramètres de template qui sont générés par le framework.
Il nous faut les récupérer, les transformer en variables, et nous en servir correctement dans les css.

Dans /templates/astroid_template_zero/frontend/colors.php ajoutons :

//gradient
$body_body_gradient = $template->params->get('body_gradient', '');
$body_body_gradient_choice = $template->params->get('TPL_ASTROID_GRADIENT_CHOICE', '');
$body_background_gradient_begin = $template->params->get('body_background_color_begin', '');
$body_background_gradient_end = $template->params->get('body_background_color_end', '');

le fichier récupère les paramètres et les transforme en variable utilisables.

Plus bas, dans la section // body coloring ajoutons nos css :

 

<?php
// Body Coloring
$body_styles = [];
if (!empty($body_background_color)) {
   $body_styles[] = 'body{background-color: ' . $body_background_color . ';}';
}
if (!empty($body_text_color)) {
   $body_styles[] = 'body{color: ' . $body_text_color . ';}';
}
if (!empty($body_link_color)) {
   $body_styles[] = 'body a{color: ' . $body_link_color . ';}';
}
if (!empty($body_link_hover_color)) {
   $body_styles[] = 'body a:hover{color: ' . $body_link_hover_color . ';}';
}
//gradient added
if ($body_body_gradient == '1' & $body_body_gradient_choice == 'linear') {
    $body_styles[] = 'body{background-color: ' . $body_background_gradient_begin . ';
background: -moz-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: -webkit-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: -o-linear-gradient(270deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); 
background: linear-gradient(180deg, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); ';
}
if ($body_body_gradient == '1' & $body_body_gradient_choice == 'radial') {
    $body_styles[] = 'body{background-color: ' . $body_background_gradient_begin . ';
background: -moz-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: -webkit-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%);
background: -o-radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); 
background: radial-gradient(circle, ' . $body_background_gradient_begin . ' 0%, ' . $body_background_gradient_end . ' 100%); ';
	} ?>

 

 

On applique donc à body les propriétés css de background, en remplaçant les valeurs de couleurs par les variables $body_background_gradient_begin et $body_background_gradient_end tout en veillant bien que la couleur de début soit chargée par défaut si les navigateurs ne prennent pas en charge les dégradés de couleur.
Le code php s’exécutera si ces deux conditions sont remplies : le dégradé est activé, et linéaire est choisi:

if ($body_body_gradient == '1' & $body_body_gradient_choice == 'linear') 

idem pour les css en radial-gradient

Ainsi, si le bouton est juste inactif, c’est la couleur de fond d’astroid qui est utilisée.

Voici le rendu en linéaire :

frontend linear

Puis en radial :

frontend radial

On pourrait ajouter des éléments tel un sélecteur pour donner une direction au dégradé, mais nous n’allons pas tout faire à votre place : à vous de jouer !!

Donnez une note !
5 sur 5 - 1 votes
Merci d'avoir noté cet article.

Contact

Parlons social

Recevoir des nouvelles du site

 

patenaire paypal