• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Wellness Pro – Hexagonal Buttons to Square

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Wellness Pro – Hexagonal Buttons to Square

This topic is: not resolved

Tagged: buttons, hexagonal, wellness pro

  • This topic has 5 replies, 4 voices, and was last updated 6 years, 8 months ago by rayman.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 31, 2016 at 5:20 pm #195580
    Alpherjo
    Member

    The Wellness Pro theme uses hexagonal button shapes as default as seen on the demo site here: http://my.studiopress.com/themes/wellness/#demo-full

    I am running into all sorts of issues with this button shape and other colors from plugins like WooCommerce.

    I would like to change the hexagonal button shape to a simple rectangle. Essentially remove the top and bottom sections of the default buttons with the "angle" on the ends.

    I've tried adjusting this code myself but still am unable to get it working correctly.

    If anyone can give some insight into just changing these buttons to simple rectangles I would really appreciate it.

    I think this would be a good option for other users in the future too.

    Thank you!

    http://my.studiopress.com/themes/wellness/#demo-full
    November 1, 2016 at 2:03 pm #195607
    Victor Font
    Moderator

    The shape is coming from .button::before at line 524 and .button::after at line 530 in style.css. Remove both of those CSS blocks and you'll have a rectangle.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    November 11, 2016 at 4:21 pm #196046
    fandom
    Participant

    I tried that.

    Removed:

    .button:before {
    border-top-width: 0;
    border-bottom-color: #000;
    top: -5px;
    }

    .button:after {
    border-bottom-width: 0;
    border-top-color: #000;
    bottom: -5px;
    }

    But it did not remove the cut corners.

    November 11, 2016 at 4:40 pm #196047
    Alpherjo
    Member

    First thanks Victor for initial answer to my question. This did work for me, however fandom if you review your code some more you'll find that there are a couple other code snippets which include .button:before and .button:after that Victor did not point out in his initial email.

    If you find those and remove them as well then the cut corners will be removed.

    I'm sorry as I don't have the exact code I removed (since I removed it), but that code was located right around the code that Victor pointed out. It should be pretty easy to spot. Just be sure to backup the original CSS before you remove it, just in case.

    January 12, 2017 at 5:25 pm #199301
    rayman
    Participant

    I've removed all the .button:before, .button:after, code but still have the ugly top and bottom.

    I want to remove them because i've added a lower opacity to the text box background color but they are coded separately from it and are unaffected.

    Where else might i look to eliminate them?

    January 12, 2017 at 7:01 pm #199303
    rayman
    Participant

    And the answer is......

    remove or comment out the selectors
    .image-section .widget-wrap::before, .image-section .widget-wrap::after {}
    .image-section .widget-wrap::before {}
    .image-section .widget-wrap::after {}
    in front-style.css around line 85 to 108

    with thanks to Christoph via a different thread

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble