Tutoriels Ja-purity-III

Le logo est la première chose que vous voulez changer/personnaliser. Nous essayons de rendre cela simple dans Purity III. Pour configurer le logo, ouvrir le style de template >> Onglet theme.

Sélectionnez le type de logo : text ou image

 

Les paramètres de logo sont situés dans les paramétrages Theme dans l'administration du ttyle de template. Vous pouvez choisir d'utiliser logo texte ou logo image.

 

Dans Purity III, vous pouvez utiliser des logos différents dans différents Style de template. Par exemple, vous pouvez utiliser un logo texte dans le style de template par défaut de Purity III, mais vous pouvez utiliser le logo image dans d'autre style de template de Purity III.

Comment modifier le logo image

Il y a 2 façons de changer le logo image Purity III:

#1: dans le paramètre de style de template

Ouvrir le style de template dont vous voulez changer le logo, dans le panneau de configuration de style de template, sélectionnez l'onglet thème.

 

#2: Dans le fichier variables.less

Ouvrir le fichier variables.less dans templates/purity_iii/less, puis trouver le code suivant.

 

// T3 LOGO

// --------------------------------------------------

@t3-logo-image:               "@{t3-image-path}/logo.png";

//

// T3 TEMPLATE STYLES

// --------------------------------------------------

@t3-image-path:                 "../images";

 

 

Vous pouvez modifier le chemin de votre image de logo, ou vous pouvez remplacer l'image du logo actuel templates/purity_iii/images/logo.png.

Style logo

Le style du logo est situé dans le fichier style.less dans templates/purity_iii/less. Le fichier comprend le style à la fois pour le type texte et le type image, style de logo pour les mises en page responsive: bureau, tablette ...

// Logo// ----.logo {  padding: 0;  margin: 0;   a {    display: inline-block; line-height: 1;    margin: 0;  } }
 

Style pour logo image

Trouvez logo

// Logo Image// ----------.logo-image {  // Hide sitename and slogan  span, small {    display: none;  }}
 

Style pour logo texte

// Logo Text// ----------.logo-text {  text-transform: uppercase;  font-size: @font-size-large;  position: absolute;  top: 0;  left: 0;  a {    background: transparent;    color: #fff;    text-decoration: none;    line-height: @navbar-height;    padding: 0 @t3-global-padding;  }   &:hover a,  a:hover,  a:active, a:focus {    background: @navbar-default-border;    color: @navbar-default-link-hover-color;    text-decoration: none;  }   // Taglines  .site-slogan {    display: none;  } }
 

Style dans mise en page responsive

// Different Style on Tablets / Desktop@media screen and (min-width: @grid-float-breakpoint) {  .logo-text {    position: static;    a {      background: @navbar-default-border;    }     &:hover a,    a:hover,    a:active,    a:focus {      color: @navbar-default-link-hover-color;    }  }}
 

Style de logo quand Off-canvas est activé

// Logo Position when Off-Canvas enable// ------------------------------------.off-canvas-toggle + .container .navbar-header .logo {  left: @navbar-height;  border-left: 1px solid @navbar-default-border;  // Remove border on Tablets / Desktop  @media screen and (min-width: @grid-float-breakpoint) {    border-left: 0;  }}
 

Personnalisation de Thème Ja purity

Créer un nouveau thème

Pour créer un nouveau thème, le plus simple est de dupliquer un dossier de thème dans templates\purity_iii\less\themes.

Chaque dossier de thème possède 3 fichiers : template.less, variables.less et variables-custom.less.

Personnaliser le thème

Veuillez supprimer tout le contenu dans 2 fichiers: variables.less et variables-custom.less

Fonctionnalité de chaque fichier .less.

• template.less Veuillez ne pas personnaliser ce fichier

• variables.less Vos styles personnalisés dans le thème

• variables-custom.less Ajoute de nouvelles variables utilisées pour styliser le thème

// Brand colors
// -------------------------
@brand-primary: @orange;  
// Scaffolding
// -------------------------
@body-bg: @white;@text-color:              
@gray-dark;  
// Links
// -------------------------
@link-color:              
@brand-primary;    

 

Changer de thème

Chaque style de template peut être affecté d'un thème différent. Pour assigner le nouveau thème créé à un style de template spécifique, veuillez ouvrir le style de template, allez à l'onglet Thème.

Cet outil sert à personnaliser le thème avec des variables définies. Lorsque vous modifiez une variable, vous verrez le changement dans le front-page.

Personnaliser le thème avec ThemeMagic

La toute première étape lorsque vous souhaitez personnaliser le thème avec ThemeMagic est d'activer ThemeMagic.

Si le côté gauche se situe le panneau de configuration, sélectionnez maintenant le thème que vous souhaitez personnaliser.

La prochaine étape sera de personnaliser le thème en utilisant les paramètres disponibles.

Maintenant enregistrez les modifications. Vous pouvez enregistrer comme thème personnalisé pour plus de sécurité.

Personnaliser ThemeMagic

Purity III est développé avec T3 Framework de sorte que vous pouvez vous référer à la documentation T3 pour avoir la documentation détaillée de la façon d'ajouter un nouveau groupe, des paramètres à ThemeMagic.

Ajouter de nouveaux paramètres à ThemeMagic

Vous pouvez ajouter des paramètres illimités, des groupes pour la personnalisation du thème. Les paramètres personnalisés sont définis dans le fichier thememagic.xml dans le dossier: templates/votre_template_t3

Remarque: Veuillez noter que les textes en MAJUSCULES sont des clés de langue

Étape 1. Définissez un nouveau groupe de paramètre.

<fieldset name="custom1_params" label="CUSTOM1_LABEL"></fieldset>
<fieldset name="module_params" label="T3_TM_MODULE"></fieldset>

Étape 2. Définissez le paramètre dans le nouveau groupe

<field name="@nom-de-votre-champ"type="type-de-parametre"default="default-valeur de-parametre"label="FIEL_LABEL"description="FIELD_DESCRIPTION" /></field>
ce qui donnerait par exemple :
<fieldset name="navbar_params" label="T3_TM_NAVBAR"><field name="t3-navbar-bg" type="color" class="t3tm-color" label="T3_TM_VARS_NAVBAR_BGCOLOR_LABEL" description="T3_TM_VARS_NAVBAR_BGCOLOR_DESC" /></fieldset>

Étape 3. Définissez la variable LESS

Définissez le paramètre LESS avec le même nom que celui défini ci-dessus @nom-de-votre-champ dans le fichier variables.less dans template/less/.

 

// Barre de navigation
@t3-navbar-bg:transparent;

Étape 4. Ajouter "@nom-de-votre-champ" quelque part dans le fichier LESS

Cela dépend de vous, il suffit d'imaginer comment vous voulez utiliser ce paramètre et comment il affectera le template. Il est nécessaire que vous ayez quelques connaissances de base sur les LESS et CSS. Nous vous suggérons d'ajouter au fichier: style.less

.navbar-default {background: @t3-navbar-bg;}

Étape 5. Définissez la clé de langage

Ouvrez le fichier de langue du template en-GB.tpl_purity_iii.ini situé dans language\en-GB\ ou dans fr-FR.tpl_purity_iii.ini situé dans language\fr-FR\ si vous utilisez des fichiers de langues francisés et définissez la clé de langage que vous utilisez pour définir des paramètres ci-dessus.

; NAVBAR

T3_TM_NAVBAR="Barre de navigation"

T3_TM_VARS_NAVBAR_BGCOLOR_LABEL="Couleur de fond de la barre de navigation"

Vérifier dans ThemeMagic pour vérifier si le nouveau groupe et les paramètres sont ajoutés ou non