Board Thread:Support Requests - Getting Technical/@comment-26293360-20190312221515/@comment-26293360-20190405232102

Ugh, I can't believe I forgot the border-style. Thanks so much for reminding me. Funny how you forget the simple things.

Thanks to you and Fngplg, the vision for my template is 90% done. I just have one last thing to ask of you.

In the game, the tabs in the UI light up when rolled over, and have an underline running underneath all their tabs, except the currently selected one. It looks like this.

My infobox currently looks like this. The most pressing issue is that the labels inside the tabs aren't aligned or bound to the tabs. How would I go about vertically and horizontally centering them with respect to the tabs. Also, is there a way to change the color/gradient of the tabs upon mouse rollover?

Also, I made a different prototype in the browser inspector to attempt to replicate the underline underneath all the inactive tabs in the game example, using border-bottom on the ::before and ::after list elements in the tab bar. It looks ok, except for the small part that extends over the edge of the image-thumbnail, and the small gap between the tabs, but that isn't as important.

I tried to use margin on the ::before and ::after so that they didn't overhang, but some weird things happened. The ::before and ::after sections seem to use the same styling. I tried unlinking the parts so that they were seperate, but that caused its own problems.

Do you think you could help me with this?