Social connect button visibility in Gantry5 (Hydrogen) 5.5.15, Joomla4

[asabharwal]

Hello:

I would like to change the default visibility of our social connect buttons to always visible. Right now, it is blank until you hover over it with a cursor (on a laptop or desktop), so it makes it difficult for any users to see them (https://toledosattic.org/) on a tablet or smartphone. I have tried using the Social block on Page Layout and in Particle Defaults. I have also tried to inspect the code and made some quick changes there but nothing turned the letters on. No luck, but I have managed to change the icon size (may change it back to just large), but the visibility is important to improve accessibility to the site. Can you please point me to the file and code line so I can improve this? Thank you in advance!

Arjun

[N8Solutions]

@asabharwal I checked your site and can see that you are using something different now to display your social media icons. In regards to the default Gantry 5 Hydrogen Social Particle, you need to inspect the icons using your browser's inspection tools to determine what class is being applied to them, and there you will be able to see the color being applied to the icons. This would mean that if you are not seeing the icons until you hover over them that their color is the same color as the background. So you would need to create an override for the particle styling giving the icons a different color so they are visible. If you have any questions about how to do this, after you have looked at the Gantry documentation, https://docs.gantry.org, please don't hesitate to ask, and I'll do my best to help you out.

kind regards

P.S. - Since this is not a bug or a feature request, please consider closing this ticket as it has to do with you needing to apply custom styling to the template to get the look you want.

[asabharwal]

Thank you for pointing this out, Michael, but I had swapped the Social particle to Custom HTML, so I can make the social icons visible all the time. Keeping those icons hidden until someone hovers over them is not a solution, but that is how gantry is set up by default and there is no ways to change those settings. A person with vision issues and new to the website will not be able to tell if there are social icons hiding there, so they need to be visible at all times and should only change appearance when you hover. I am fine with my current solution however. Thanks!

From: Michael Koontz Sent: Saturday, May 13, 2023 4:18 AM To: gantry/gantry5 @.> Cc: Sabharwal, Arjun @.>; Mention @.***> Subject: [EXTERNAL] Re: [gantry/gantry5] Social connect button visibility in Gantry5 (Hydrogen) 5.5.15, Joomla4 (Issue #3149)

@asabharwalhttps://github.com/asabharwal I checked your site and can see that you are using something different now to display your social media icons. In regards to the default Gantry 5 Hydrogen Social Particle, you need to inspect the icons using your browser's inspection tools to determine what class is being applied to them, and there you will be able to see the color being applied to the icons. This would mean that if you are not seeing the icons until you hover over them that their color is the same color as the background. So you would need to create an override for the particle styling giving the icons a different color so they are visible. If you have any questions about how to do this, after you have looked at the Gantry documentation, https://docs.gantry.orghttps://docs.gantry.org/, please don't hesitate to ask, and I'll do my best to help you out.

kind regards

- Reply to this email directly, view it on GitHubhttps://github.com/gantry/gantry5/issues/3149#issuecomment-1546594307, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAINC54SDD5KQBAQX2EIFDDXF47S3ANCNFSM6AAAAAAXN5AXSM. You are receiving this because you were mentioned.Message ID: @.***>

[N8Solutions]

@asabharwal You are just flat out wrong with this that you said:

I had swapped the Social particle to Custom HTML, so I can make the social icons visible all the time. Keeping those icons hidden until someone hovers over them is not a solution, but that is how gantry is set up by default and there is no ways to change those settings. A person with vision issues and new to the website will not be able to tell if there are social icons hiding there, so they need to be visible at all times and should only change appearance when you hover.

Gantry is NOT setup by default to hide icons until someone hovers over them. If you use the theme defaults, the icons ARE visible. It is when people start changing the settings and the styles of the theme that they run into the issues like you did, and it is something that you, as a website designer, need to be aware of. I was around and contributing to Gantry 5 after it launched and people had just started using it, and this issue was very common because people would NOT check the settings of the color of the text for a given section or the color applied to the font awesome icons, and when it is the same as the background color for a section it appears as if they are not there but THEY ARE there and all you need to do is either use a different text color for the section or override the color for the font awesome icons to be what you want it to be as I explained in my original reply to you.

So... to reiterate what I first wrote to you:

1. Gantry does not do this by default
2. Developers need to know how to inspect sites and apply overrides if necessary to get the styling they want.
3. This is not a bug or an accessibility issue so please mark this ticket as closed.

kind regards,

Michael