Création du template jocassiopeia

Détails
Écrit par : Administrator
English version : English (UK)
Clics : 105

 

Extension
Nom JO's Cassiopeia child template
Joomla Extension  .
Github  JO's Cassiopeia child template
Download  JO's Cassiopeia child template Download

J'ai créé un template "child" du template cassiopeia

 

J'ai créé le template  jo_cassiopeia,
template "child" du template cassiopeia présent depuis la version 4.x dans la distribution standard de Joomla.

 

 

Aller dans le gestionnaire de styles de template et cliquer sur Cassiopeia
 

 

 

Cliquer ensuite sur l'item du menu "Create Child Template", renseigner le sufixe du template et cliquer sur le bouton de création
le nom du template est obligatoirement cassipiopeia_<suffixe>


 

Les Modifications

Reprise des couleurs du template cassiopeia extended

Il n'est pas possible de créer un template "child" du template cassiopeia extended, qui pourtant m'interresse pour la gestion des couleurs.

Du coup je reprend les paramètres contenus dans le fichier  templateDetails.xml ,

et les couleurs contenues dans le ficher  colors.css et paramétrées dans le fichier  index.php

 

auxquelles j'ai rajoutées les couleurs pour btn-info et btn-secondary

J'ai rajouté quelques couleurs custom dans le fichier des couleurs  global/colors.css

 

/* added to cassiopeia_ext */
.container-header .navbar-toggler {
  color: var(--bodycolor) !important;
}

ul.nav-tabs > .metismenu-item.active > a {
  background: color-mix(in srgb,currentColor,#fff 50%);
}

li.metismenu-item > a {
  color: var(--link-color) !important;
  font-weight: 500 !important;
}
@media (width >= 992px) {
  .container-header li.metismenu-item > a:hover {
    color: var(--link-hover-color)!important;
  }
}

.btn-info {
  background-color: #138496;
  border-color: #117a8b;
}
/* end added to cassiopeia_ext */

Reprise des polices template cassiopeia extended

J'ai repris les polices contenues dans le ficher  fonts.css et paramétrées dans le fichier  index.php

 J'ai juste rajouté la police pour la position Breadcrumb.

J'ai rajouté le soulignement des styles h2 à h4  global/fonts.css

 

h1 {
    border-bottom: none!important;
    font-weight: 600!important;
}
h2 {
    line-height: 34px!important;
    border-bottom: 1px solid #a2a9b1 !important;
    font-weight: 600!important;
}


h3 {
    line-height: 20px;
    border-bottom: none!important;
    font-weight: 600!important;
}

h4 {
    font-size :14px! important;
    font-weight: 600!important;
}

h5 {
    font-size :12px! important;
    font-weight: 600!important;
}


h4, h5, h6 {
    border-bottom: none !important;
    margin: 8px 0 6px 0!important;
}

 

Ajout d'un menu "Offcanvas"

Grace à Offcanvas Menu for Cassiopeia j'ai mis en place un menu du type "Offcanvas" pour les mobiles.

Liens Externes

 

RENDER