Border Color

Can you provide a screenshot of what you’re referring to? Or the URL where I can see this for myself so I can try to find the CSS you would need to adjust for you?

Whoops I thought I posted a link. Here you go: https://competenowdev.com/mmf/product/italian-mahogany-dining-chairs-set-4/

It looks like this rule is what’s causing your issue:

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
    background-color: #ebe9eb;
    background-image: none;
    border: 0 none;
    border-radius: 3px;
    box-shadow: none;
    color: #515151;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 100%;
    font-weight: 700;
    left: auto;
    line-height: 1;
    margin: 0;
    overflow: visible;
    padding: 0.618em 1em;
    position: relative;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
}

When I disable that border attribute here then the rule set on the button directly kicks and works as expected.

Not having any luck with that unless I am not doing it right. The border color is being set on the element itself (#fff) and I’m not sure where that is coming from? https://screencast.com/t/IgkEv6LsN

Right, but that rule is getting overridden by the rule I pointed out. Are you familiar with FireBug? In FireBug, if you disable that border attribute in the rule I showed above, then whatever you have in the rule you’re pointing out works as expected.

Right, I guess what I should have asked is how can I replace the border color of #fff with #000. I can disable the border attribute fine, but I am having trouble changing the actual border-color. The border color is automatically adjusting to the background-color of the button which I do not want. As an example, I just changed the button color to black and now the border-color is black without actually choosing the border-color.

That is what I have been explaining to you.

You need to disable border: 0 none; in the snippet I provided above. Along with that, you can change the button border directly to border-color: #000 !important;.

The result would be what you see in this screenshot:

https://fiber.angelleye.com/forums//wordpress-plugins/offer-border.png

Ok, I changed the CSS for the “border: 0” so it is not longer affecting the border of the button. Now I need a CSS snippet that will overwrite the white border and make it black. The snippet which works for font-size and all of that is not working for border-color. Here is an example: https://screencast.com/t/jTBmtysqZ1. Styling the CSS class does not work for border color, but does work for font-style. Is there a different CSS snippet I can use? Obviously I can just edit the #fff that is in “element.style”, but I need a CSS snippet I can save to my theme which will override the direct styling applied to the element.

.offers-for-woocommerce-add-to-cart-wrap.ofwc-button-right-of-add-to-cart .offers-for-woocommerce-make-offer-button-single-product {
border-color: #000 !important;
}

Any updates? Thanks!

There’s really only so much we can do with free support. I’ve provided the rule(s) that are causing you problems, and I’ve explained that you need to make CSS adjustments in your child theme in order to make those rules apply to the site.

If you need somebody to write the actual code and implement for you that would be outside the scope of any free support we can offer. If you want to submit an order for premium support we would be happy to take the time to apply the changes for you.

Got it working using a ::before pseudo element and needed to style it as a content box. Great plugin – it would be awesome if you added border-color control to the actual button the same way you can set the font and background color. Thanks for your time!

We’ll consider that for a future update. Glad you got it worked out!