Foundry and Simple Tabs 1LD

If you check out this page:
https://www.jbostick.ca/test/tabs/page/

In the blue box, all the checkmarks should be white. If you reload the page, you’ll actually see how it should be before it ‘reformats’ and changes colour.

It only happened when I added the tabs at the bottom (Simple Tabs by One Little Designer). Just curious if anyone knows why there is a conflict (are there identical id’s or something)?

Are the checkmarks made with a Foundry stack? I’m just trying to figure out what part of the interaction is Foundry related so I can troubleshoot from there. It looks though like the checkmarks you’ve got there are SVGs. I’m not an SVG expert by any means, but your SVG looks like its fill is set to “currentColor” so maybe that has something to do with it.

If the interaction isn’t a problem you’re running into with Foundry or its stacks, but that of two other stacks, be sure you contact them on their appropriate platforms.

Sorry, yeah the checkmarks in the blue box are in a Foundry List Group stack.

I’m not in possession of the stack you’re using for your tabs and have never used it, so it is hard to say without having it and the project file in-hand. I could pour through the CSS in detail, but that is a lot more work.

If you want to send me a ZIP file containing the necessary items I can have a look on Monday, but from the looks of it there is an incompatibility. Perhaps it is just that the tabs stack you’re using isn’t scoping things tight enough, or something else. Like I said, hard to tell, but if it only does it when you add that stack, I think you’ve found your culprit.

The checkmarks are embedded SVG versions of Fontawesome symbols and appear to be part of the Foundry List stack.

@jabostick The SVG fill is being overridden by text_muted to color: #818a91. As a test set the Foundry Muted text to white and see if that masks the issue.

@jabostick – Unless I’m missing something this morning, and I could be as I’ve not had coffee yet, the Linked List stack does not use SVG images for FontAwesome, so I’m not sure where you’re getting those from (ex: Linked List Documentation).

As for what is affecting them, changing their color – if you remove the Tabs stack does the problem go away?

There is javascript running that is replacing the FontAwesome <i> tags with <SVG> tags. If you disable Javascript and inspect the elements, you see the typical FontAwesome tags. When it’s enabled, they are replaced with SVG’s. It’s replacing them in both Foundry’s List stack and Will Woodgate’s RuleStack.

Something is using FontAwesome v5 and it looks like there is some type of shim script for v4. I suspect that’s the culprit.

1 Like

Ah maybe that is it. Simple Tabs does have a Font Awesome 5 as an option. Even though I’m not using it in that instance, I wonder if that’s the issue

Yep it does. So I realize it is the Tabs stack that is the issue, I was just curious if there people knew the cause (conflicting IDs or something) as my troubleshooting skills are limited.

DLH has identified the SVG observation.

If you are not using FA5, then is there an option to not enable it in the 1LD stack? If not, then it shouldn’t be enabled when using a simple FA4 check icon and a request to 1LD would be a good thing.

All of this may still be a red herring though as the “FA icon colour” looks like it is still being overridden by text_muted to color: #818a91

There is an option to use FA5 within each tab in the Simple Tabs setup, though in this case I am not using an icon (it is set to default Ionicon and left empty).

You could be right on the muted text, though I can’t see where to set that in Foundry. I see it under ‘Text Styles’ in edit mode, but can’t actually find it in the settings.

I should say, I didn’t intend for this to be another easter egg hunt on everyone’s Sunday. Just thought it was odd and maybe there was a simple explanation.

@jabostick – FontAwesome 5 is not yet something Stacks provides support for natively, so I’m sure the developer of your tabs stack has added it in on their own, but because of this it doesn’t seem like it will play well with other stacks which use previous versions of FontAwesome – which is the majority of stacks since that is what is supported by the Stacks plugin API. This is likely something you’ll want to take up with the developer of the tabs stack.

1 Like