Websites York - Template5

People cards plus lightbox info with scrolling text.

Template Menu

JOE BLOGGS

CO-FOUNDER & MANAGING DIRECTOR

JANE BLOGGS

CO-FOUNDER & MANAGING DIRECTOR

Design Notes

1) I couldn't figure out how to control the aspect ratio of the F6 Lightbox stack. Although it worked at its default size it didn't show the picture at its full depth and was more of a portrait mode than I wanted. Instead, I used Limelight with its launcher and set the Limelight width to be 80% on large and 100% on small. Limelight has a setting to open the lightbox on hover from the launcher so I have allowed that.

2) To enable scrollbars the Container surrounding the text stack with the full bio has been set to 'Overflow: scroll' This causes both x-axis and y-axis scrollbars to appear when we only really need the y-axis scrollbar.

To get rid of the x-axis scrollbar and to style the y-axis scrollbar I used the following CSS code from W3schools:

/* width */: :-webkit-scrollbar { width: 6px; }
/* Track */: :-webkit-scrollbar-track { box-shadow: inset 0 0 5px white; border-radius: 6px; }
/* Handle */: :-webkit-scrollbar-thumb { background: #3B669B; border-radius: 10px; }

The track is set to white so that although the X axis track is still there it becomes invisible against a white background.

3) To get the top portion of the portrait to show, I set the initial position to center/top on the background swatch.

Image from Unsplash.

Web design Yorkshire for well-crafted affordable websites.

Update: 4th Oct 2023 - Using the new Scrollbar swatch

Instead of using the CSS code above which applies to all scrollbars in view, Joe has now released a new swatch called Scrollbar which, when class mode is used, allows the scrollbar settings to be applied by adding a class to the particular stack you want to target.

Here is what that looks like in Rapidweaver. This swatch is being applied to the container which contains the overflowing text stack.

Lighthouse scores:

Contact me

Template6 >