Creation of the jocassiopeia template

Details
Written by: Administrator
Hits: 63

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

I created a "child" template of the template cassiopeia

I created the template jo_cassiopeia,
template "child" the Template cassiopeia present since version 4.x in the standard distribution of Joomla.

Go to the template style manager and click on Cassiopeia

Then click on the item of the menu "Create Child Template", fill in the template sufix and click on the creation button
the name of the template must be cassipiopeia_<suffix>


Changes

Resume the colors of the template cassiopeia extended

It is not possible to create a "child" template of the template cassiopeia extended, which nevertheless interests me for color management.

So I take the parameters contained in the file  templateDetails.xml ,

and the colors contained in the file  colors.css and set in the file  index.php

to which I added the colors for btn-info and btn-secondary

I added some custom colors to the color file  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 */

Resume fonts template cassiopeia extended

I have taken the fonts contained in the file  fonts.css and set in the file  index.php

I just added the police for the Breadcrumb position.

I added the underlining of styles h2 to 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;
}

Adding an "Offcanvas" menu

Thanks to Offcanvas Menu for Cassiopeia I have set up a menu of the type "Offcanvas" for mobiles.

External links

RENDER