Personnalisation du logo
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; }}
