@krishnaGandhi11 The pull request shall not include the compiled css results media/templates/site/cassiopeia/css/template.css and media/templates/site/cassiopeia/css/template.min.css.

@krishnaGandhi11 Please fix the code style errors reported here: https://github.com/joomla/joomla-cms/actions/runs/21568209712/job/62143186648?pr=46811

@krishnaGandhi11 The pull request shall not include the compiled css results media/templates/site/cassiopeia/css/template.css and media/templates/site/cassiopeia/css/template.min.css.

Sorry about that! I have removed it now.

@krishnaGandhi11 There are still code style errors reported in the CI checks: https://github.com/joomla/joomla-cms/actions/runs/21568431305/job/62143634597?pr=46811

@krishnaGandhi11 There are still code style errors reported in the CI checks: https://github.com/joomla/joomla-cms/actions/runs/21568431305/job/62143634597?pr=46811

Thanks @richard67

So the question isnt - does the css in this PR address the problem but more why doesnt the css in calendar.css work in the front end bootstrap based site template when it works in the bootstrap based admin template. When you identify that then surely that is what should be fixed and not new css added

So the question isnt - does the css in this PR address the problem but more why doesnt the css in calendar.css work in the front end bootstrap based site template when it works in the bootstrap based admin template. When you identify that then surely that is what should be fixed and not new css added

Backend template (Atum) works because it includes a specific _calendar.scss file that maps the system variables (like --btn-primary-bg) to the template colors. Cassiopeia is missing this mapping entirely.

Instead of adding custom CSS overrides, I tried adding the missing variable definitions to the :root block in template.scss.
This "activates" the existing core styles for the frontend.

it works - the front end calendar behaves as expected.
does this align with your question ?

so you are getting close. look at how and where this is done in the atum template

I have tested this item ✅ successfully on 30ad40e

// Calendar Highlighting in Frontend
.js-calendar .calendar-container tbody td.day.selected {
background-color: var(--cassiopeia-color-primary) !important;
border: 1px solid var(--cassiopeia-color-primary) !important;
color: #fff !important;
border-radius: 4px !important;
}

// Hover Effect
.js-calendar .calendar-container tbody td.day:not(.disabled):not(.othermonth):hover {
background-color: var(--cassiopeia-color-primary) !important;
color: #fff !important;
cursor: pointer;
}issue solved

I have tested this item ✅ successfully on 30ad40e// Calendar Highlighting in Frontend .js-calendar .calendar-container tbody td.day.selected { background-color: var(--cassiopeia-color-primary) !important; border: 1px solid var(--cassiopeia-color-primary) !important; color: #fff !important; border-radius: 4px !important; }

// Hover Effect .js-calendar .calendar-container tbody td.day:not(.disabled):not(.othermonth):hover { background-color: var(--cassiopeia-color-primary) !important; color: #fff !important; cursor: pointer; }issue solved

This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46811.

Although I have changed the way of solving this issue and just pushed the updated fix,
The code snippet you pasted above includes !important flags, but my previous version/fix(which you tested) never used "!important" - I don't understand why you commented that, is that a suggestion ?