Diagonal Background for first and last child on Calendar

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 3 years, 2 months ago.

Author Posts


I want to show the first and last day of a calendar booking as a diagonal background, showing that property is actually available to book from the same day as the previous checkout with a diagonal background on the first and last child of the list.

Is it possible to create this effect I hacked together in photoshop?


I’ve attempted this with Microthemer with no luck so far.

URL: https://antares.bluedogwebdesign.com/property/reef-madness/ (scroll to the bottom of the page)



You could try this code:

background-image: linear-gradient(-62deg, rgb(23, 154, 165) 50%, #fff 50%);

Just paste it into the custom code editor for the selector (to the left of the Font property group).



Hi Sebastian, thanks for the prompt reply.

I was hoping to just target the first and last child items as shown here: https://share.getcloudapp.com/GGu0BnBB

I’m using the first-child Pseudo Class but it’s not working for me.



Hi Clark,

Looking at your table of dates, I think the only way you can get this to work is to get the calendar to add classes to the shoulder days e.g. start-of-stay and end-of-stay. Then use Microthemer to create a selector for those days and apply the gradient above. You would reverse the colors for end-of-stay box.


You must login or register to reply to this topic.