Joomla! Issue Tracker - CMS

Download
Launch
Feeling Lucky

[#45098] - fix(calendar): properly highlight selected day using Bootstrap variab…

Pending

User tests: Successful: Unsuccessful:

avatar khushiiagrawal
khushiiagrawal
8 Mar 2025

Pull Request for Issue #45082

Summary of Changes

  • Fixed the issue where the selected day in the calendar was not highlighted in the frontend.
  • Used Bootstrap variables instead of hardcoded colors to ensure consistency across themes.
  • Ensured that the selected date now appears correctly, matching the backend styling.

    • Testing Instructions

  • Open an article and try to set a publishing date (this opens the calendar).
  • Select a date and verify that it is properly highlighted.
  • Check the styling across different browsers (Chrome, Firefox, Edge, Safari).
  • Ensure the hover effect is also applied correctly without overriding Bootstrap styles.

    • Actual result BEFORE applying this Pull Request

  • The selected date in the frontend calendar was not highlighted.
  • The backend calendar displayed the highlight correctly, but the frontend did not.

    • Expected result AFTER applying this Pull Request

  • The selected date is now correctly highlighted in the frontend, matching the backend styling.
  • Bootstrap variables are used for colors, ensuring better theme compatibility.

    • Link to documentations

    Please select:

    • Documentation link for docs.joomla.org:

    • No documentation changes for docs.joomla.org needed

    • Pull Request link for manual.joomla.org:

    • No documentation changes for manual.joomla.org needed

    avatar khushiiagrawal khushiiagrawal - open - 8 Mar 2025
    avatar khushiiagrawal khushiiagrawal - change - 8 Mar 2025
    Status New ⇒ Pending
    avatar joomla-cms-bot joomla-cms-bot - change - 8 Mar 2025
    Category ⇒ Repository NPM Change
    avatar alikon
    alikon - comment - 8 Mar 2025

    alternative of #45096 ?

    avatar khushiiagrawal
    khushiiagrawal - comment - 8 Mar 2025

    alternative of #45096 ?

    As I was also working on this issue so I came up with this solution.

    avatar exlemor exlemor - test_item - 8 Mar 2025 - Tested successfully
    avatar exlemor
    exlemor - comment - 8 Mar 2025

    I have tested this item ✅ successfully on 20ecd72

    I have tested this successfully.

    NOTE:
    I have changed Atum and Cassiopeia colors (as well as the Alternative Scheme) and that did not affect the highlight color - did you hard code the colors? if so, you may want to check PR comments #45096, this is not a good idea.

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

    avatar brianteeman
    brianteeman - comment - 8 Mar 2025

    Sorry this is completely wrong.

    The problem is that the css for the calendar field is using a bootstrap variable that is for some reason not present in the cassiopeia template.

    The correct fix is not to hard code colours (both your approaches are hard coding colours) but to understand why some of the bootstrap variables are not present in the cassiopeia template and then to fix the cassiopeia template so that those variables are present.

    There should be no need to even touch the css file for the calendar field

    avatar khushiiagrawal
    khushiiagrawal - comment - 9 Mar 2025

    Sorry this is completely wrong.

    The problem is that the css for the calendar field is using a bootstrap variable that is for some reason not present in the cassiopeia template.

    The correct fix is not to hard code colours (both your approaches are hard coding colours) but to understand why some of the bootstrap variables are not present in the cassiopeia template and then to fix the cassiopeia template so that those variables are present.

    There should be no need to even touch the css file for the calendar field

    Thanks for mentioning. Will surely look into it.

    Add a Comment

    Login with GitHub to post a comment