Calendar date colors?

  • You can use a screen capture tool and save the image as PNG and then open it up in a program like Photoshop and get the hex colour for it, then look for the same colour used in the style properties. Or just use browser inspect element and get the colour that way and search it out in style properties.


    light is: 7F7F7F

    dark: 737373

  • You can use a screen capture tool and save the image as PNG and then open it up in a program like Photoshop and get the hex colour for it, then look for the same colour used in the style properties. Or just use browser inspect element and get the colour that way and search it out in style properties.


    light is: 7F7F7F

    dark: 737373

    There is some kind of overlay on the date backgrounds that keeps the actual color from being shown in Inspect Elements.

  • You already posted a PNG screenshot, I just grabbed the two colours from it for you. They should match up as long as the screenshot is saved as PNG and not something like JPG whe you use colour picker on it to get the colours with a graphics program

  • You already posted a PNG screenshot, I just grabbed the two colours from it for you. They should match up as long as the screenshot is saved as PNG and not something like JPG whe you use colour picker on it to get the colours with a graphics program

    You can't look at the color palette and find those colors because there is an overlay on calendar date backgrounds.

  • you must find the hex color in css , when you use the browser with F12 and thus you can find the color in the color palette.


    I don't have calendar with the forum but if it is online , i can find it ...

  • You can't look at the color palette and find those colors because there is an overlay on calendar date backgrounds.

    Not sure what you mean by that. And don't have the Calendar to look at what you mean.

  • This used for the light one in inspect element


    Code
    background-color: rgba(204, 204, 204, .1);

    And the 0.1 looks to be an opacity setting for it



  • This used for the light one in inspect element


    Code
    background-color: rgba(204, 204, 204, 0.1);

    And the 0.1 looks to be an opacity setting for it

    Which element is that inside of?

  • When you click to change colour with the picker, there is also a slider at the bottom to adjust the transparency. If you move that slider all the way to to the right it removes the .1 at the end which must set the transparency used



  • When you click to change colour with the picker, there is also a slider at the bottom to adjust the transparency. If you move that slider all the way to to the right it removes the .1 at the end which must set the transparency used

    There is still an overlay. This is much more difficult than it needs to be.

  • Really not sure what you mean by an overlay. If you only try and change the colour it won't work because it uses some transparency also with that background-color: rgba(204, 204, 204, .1); .1 at the end. You can see that by picking a colour to use and then in the same colour picker box below look for the slider at bottom to move from left to right side. If you move that slider all the way to the right it will change that code to this (removing the transpanacy) if that is what you mean by overlay? background-color: rgba(204, 204, 204);

  • Really not sure what you mean by an overlay.

    If you change the color with CSS it effects some areas but not all. You can see the color change some of the backgrounds and others have something making them lighter, look at the difference between the 21st and 28th date backgrounds. It should be a simple option in the color palette but unfortunately isn't. I have already given up on it.

  • If you change the color with CSS it effects some areas but not all. You can see the color change some of the backgrounds and others have something making them lighter, look at the difference between the 21st and 28th date backgrounds. It should be a simple option in the color palette but unfortunately isn't. I have already given up on it.

    it is because


    Code
    @media screen and (min-width: 769px), print
    .calendarFullMonthView .calendarPastDay::after {
    /* background-color: rgba(255, 255, 255, .4); */

    a css is apply after for the pastday

  • If you want the bygone days to look the same, effectively removing this effect:

    CSS
    @include screen-md-up {
        .calendarFullMonthView .calendarPastDay::after { display: none; }
    }

    Maybe it makes sense to dim the content by overlaying it with a darker color instead:

    CSS
    @include screen-md-up {
    .calendarFullMonthView .calendarPastDay::after { background-color: rgba(0, 0, 0, .4); }
    }

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • If you want the bygone days to look the same, effectively removing this effect:

    CSS
    @include screen-md-up {
        .calendarFullMonthView .calendarPastDay::after { display: none; }
    }

    Maybe it makes sense to dim the content by overlaying it with a darker color instead:

    CSS
    @include screen-md-up {
    .calendarFullMonthView .calendarPastDay::after { background-color: rgba(0, 0, 0, .4); }
    }

    perhaps not apply a different color for sunday and saturday for the past day is a better solution ????

  • The light gray look of the calendarPastDay class comes from this:

    Code
    @media screen and (min-width: 769px), print
    .calendarFullMonthView .calendarPastDay::after {
    background-color: rgba(255, 255, 255, .4);
    }



    In a way, you are correct, there is an overlay. The :after pseudo class is used here to lay an semi-transparent color over the past days. Below 769px, this view completely collapses responsively.


    /edit: Ah, Alexander was faster then me :D. Still; I'll leave this as elaboration

    "A life is like a garden. Perfect moments can be had, but not preserved, except in memory. LLAP" — Leonard Nimoy