WordPress.org

Ready to get started?Download WordPress

Forums

Spun
Spun Theme Circle Shapes to Hexagon? (12 posts)

  1. ksteven6
    Member
    Posted 10 months ago #

    Hello,
    I'm interested in making the circles in the spun theme into hexagons, I tried looking at tutorials like this: http://jtauber.github.io/articles/css-hexagon.html

    but I just can't get it to work. I have a child theme but am pretty new to everything. Any help would be appreciated!

  2. Andrew
    Forum Moderator
    Posted 10 months ago #

    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.

  3. Andrew
    Forum Moderator
    Posted 10 months ago #

    This is a cleaner way to do this http://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.

  4. Andrew
    Forum Moderator
    Posted 10 months ago #

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

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

    Let us know how you get on.

  5. ksteven6
    Member
    Posted 10 months ago #

    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!

  6. carozu@hotmail.com
    Member
    Posted 10 months ago #

    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!

  7. carozu@hotmail.com
    Member
    Posted 10 months ago #

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

  8. Andrew
    Forum Moderator
    Posted 10 months ago #

    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.

  9. Andrew
    Forum Moderator
    Posted 10 months ago #

    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?

  10. Andrew
    Forum Moderator
    Posted 9 months ago #

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

  11. ksteven6
    Member
    Posted 9 months ago #

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

    http://gubbasbees.com

  12. Andrew
    Forum Moderator
    Posted 8 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic