Banner themes (and instructions for customizing them)

Relevant: http://shouldiuseacarousel.com

4 Likes

Carousels pose accessibility issues for keyboard and screen reader users that simply cannot be adequately addressed by markup or hacks. Carousels are this decade’s <blink> tag.”

1% clicked a feature. Of those, 89% were the first position. 1% of clicks for the most significant object on the home page?

How much truth in a few screens (full of frustration)…:wink:

2 Likes

Hey, thank your for providing this great three-column-banner template. I was able to customize it but I have a real problem changing the icons. What exactly do I have to change within the code if I want to place this icon instead of the gearwheel on the left? I do have to change the icon class, do I?

Thank you guys in advance!

You need to change the <!--ICON--> <div class=...></div> code with the new icon

<!--ICON-->
<div class="x-icon"><svg class="fa d-icon d-icon-cog svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use xlink:href="#cog"></use></svg></div>

and then add the icon in the site setting svg icon subset, see Introducing Font Awesome 5 and SVG icons

5 Likes

Hey Daniela, thank you so much for coming back to me so quick.

So the new logo code is <i class="fa fa-connectdevelop" aria-hidden="true"></i>

I still don’t know what code I need to change exactly - is it code within CSS or within After Header, or both? Could you provide me with more guidance on that?

Thanks!!

The code you need to replace is in the After Header section. It should look exactly like the code Daniela posted above.

This is what you should replace it with:

<!--ICON-->
<div class="x-icon"><svg class="fa d-icon d-icon-fab-connectdevelop svg-icon svg-node" aria-hidden="true"><use xlink:href="#fab-connectdevelop"></use></svg></div>

You also will need to add the icon to your svg icon subset site setting if you haven’t already:

2 Likes