Spun Theme Circle Shapes to Hexagon?

You see that tutorial for the hexagon bit, it’s not properly explained.
The CSS has 3 sections that apply to different elements.

BTW this method of using borders probably won’t work when there are images inside of the circles.

This is a cleaner way to do this https://cssdesk.com/jqWCQ . That way you don’t have to touch the HTML and compromise on accessibility & SEO.

You may have to do these styles twice, one for desktop and another for mobile when the circles get smaller.

Quick demo: https://snag.gy/ytHxe.jpg

It can be done, but you’ll need to override more CSS.

Let us know how you get on.

Hi there,

Thank you so much for writing to explain this. I just have a question of where I would put the html? Would this go in Functions.php?

Then I can paste the css into the css document? Thank you!

Hello, I have the same question but would like a slightly different hexagon shape. I have a child theme but don’t know much so I’m also using a CSS plugin. What do you mean by overriding more CSS? Thanks!

btw, my website is https://www.thehoneyco.com and the hexagon shape I’m talking about is similar to the logo. Could that be done? Thanks again!

Hi carozu, we’re happy to look into your request and we ask that you create a new thread to discuss it.

Meanwhile you can follow the support given to @ksteven6 in this thread.

I just have a question of where I would put the html?

You don’t need to touch the HTML.

Would this go in Functions.php?

You don’t need to touch the PHP.

Then I can paste the css into the css document?

Do you have a “Custom CSS” (or similarly named) plugin, or are you using a Child Theme?

@ksteven6, just saw that you said you do have a Child Theme – Could you link your site?

Hi Andrew,
I have tried a few different times but haven’t been successful yet. Here is the website that I am working on:

https://gubbasbees.com

The easiest option you have is to create hexagon images and assign the circles to have that image as a CSS background:
https://www.w3schools.com/cssref/pr_background-image.asp