In the boxgrid view as well as in the monthly view when event thumbnails are set to be used as calendar cell backgrounds; STEC design is so that:
- all non-active, non-hover images display in full color - the selected/hovered cells display with a dark overlay.
The calendars for which I purchased Stachethemes will be heavy on events, with around 10 daily unique events happening everyday in addition to around 100 ongoing monthly events.
Because of this number of events, the current method of full-color thumbs leads to a significantly noisy and distracting website that will prove difficult to navigate for the site visitor.
To prevent loss of site visitors, would it be possible to change it so that the non-active/non-hover monthly and boxgrid view cell backgrounds are given an hex code overlay whereas the selected/hovered cell's background displays in its regular color?
If that isn't possible, I'm open to any solution where the focused cell is brighter and the other cells are dimmer.
Hope you can help out. Thank you in advance for your time and attention!
Yes, but your video shows only interacting with the boxgrid on the right.
My question pertains to both the month view on the left and the boxgrid view on the right.
Otherwise, yes, exactly, I'd love if their inactive state has an overlay and when it is hovered or selected, for the image to display in its actual color
Both of these worked wonderfully, thank you very much!
However, I have realized that, because Month View on mobile does not have the day's events listed, the mobile version looks pale and insignificant when it uses the same overlay as the desktop version on the images forming the cells' backgrounds.
Would it be possible to change specifically the mobile Month View's inactive and active/hover state overlays?
Thank you for this in advance and thank you for all the great help you have been in the overall!
Hello,
In the boxgrid view as well as in the monthly view when event thumbnails are set to be used as calendar cell backgrounds; STEC design is so that:
- all non-active, non-hover images display in full color
- the selected/hovered cells display with a dark overlay.
The calendars for which I purchased Stachethemes will be heavy on events, with around 10 daily unique events happening everyday in addition to around 100 ongoing monthly events.
Because of this number of events, the current method of full-color thumbs leads to a significantly noisy and distracting website that will prove difficult to navigate for the site visitor.
To prevent loss of site visitors, would it be possible to change it so that the non-active/non-hover monthly and boxgrid view cell backgrounds are given an hex code overlay whereas the selected/hovered cell's background displays in its regular color?
If that isn't possible, I'm open to any solution where the focused cell is brighter and the other cells are dimmer.
Hope you can help out. Thank you in advance for your time and attention!
Attached files: Screenshot 2024-08-07 at 5.10.11 PM.png
"- the selected/hovered cells display with a dark overlay."
Is this what you're talking about? Video attached.
Attached files: Elementor #664 - Google Chrome 2024-08-08 12-17-30.mp4
Stachethemes Developer
Hello again,
Yes, but your video shows only interacting with the boxgrid on the right.
My question pertains to both the month view on the left and the boxgrid view on the right.
Otherwise, yes, exactly, I'd love if their inactive state has an overlay and when it is hovered or selected, for the image to display in its actual color
Thanks for your time and attention :)
The boxgrid overlay can be controlled from the admin panel.
Go to Calendar Dashboard -> Settings -> Fonts & Colors -> Box Grid section and adjust
"Background image dimness" and "Background image dimness (hover)" values:
---
The Month Layout can be adjusted with css.
CSS for the inactive state:
.stec-calendar-cell .stec-calendar-cell-image:after {
background-color: rgba(0,0,0, 0.9 ) !important;
}
CSS for the active/hover state:
.stec-calendar-cell-is-active .stec-calendar-cell-image:after, .stec-calendar-cell:hover .stec-calendar-cell-image:after { background-color: rgba(0,0,0, 0.3 ) !important; }You will need to adjust the alpha values 0.9 and 0.3.
rgba(0,0,0, 0.9 ) means 90% black
rgba(0,0,0, 0.3 ) means 30% black
rgba(0,0,0, 0 ) is no visible overlay
rgba(0,0,0, 1 ) is competely black
Stachethemes Developer
Both of these worked wonderfully, thank you very much!
However, I have realized that, because Month View on mobile does not have the day's events listed, the mobile version looks pale and insignificant when it uses the same overlay as the desktop version on the images forming the cells' backgrounds.
Would it be possible to change specifically the mobile Month View's inactive and active/hover state overlays?
Thank you for this in advance and thank you for all the great help you have been in the overall!
Attached files: Month-view-mobile-overlay.jpeg
The calendar appends .mobile class to its parent container when in mobile mode.
So, to affect the month view when in mobile mode only prepend .stec.mobile to the selectors like this:
.stec.mobile .stec-calendar-cell .stec-calendar-cell-image:after { background-color: rgba(0,0,0, 0.9 ) !important; } .stec.mobile .stec-calendar-cell-is-active .stec-calendar-cell-image:after, .stec.mobile .stec-calendar-cell:hover .stec-calendar-cell-image:after { background-color: rgba(0,0,0, 0.3 ) !important; }Stachethemes Developer