Wellness Pro – Hexagonal Buttons to Square

[Alpherjo]

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

[Victor Font]

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?

[fandom]

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.

[Alpherjo]

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.

[rayman]

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?

[rayman]

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