Diagonal Background for first and last child on Calendar

Author Posts

bluedognz November 11, 2019 at 1:02 am

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

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?

https://share.getcloudapp.com/GGu0BnBB

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)

Sebastian November 11, 2019 at 2:16 pm

Hey,

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).

Cheers,
Sebastian

bluedognz November 11, 2019 at 9:25 pm

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.

Thanks
Clark

Sebastian November 12, 2019 at 12:37 pm

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.

Cheers,
Sebastian

You must login or register to reply to this topic.