Buttons in Footer on donation page don't style correctly

Support Area Forums Grassroots Buttons in Footer on donation page don't style correctly

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://108.167.189.17/~beaconam/product/give-any-amount/
  • Author
    Posts
  • #28977
    Karlson Rapp
    Participant

    Hi Bill,
    I have already fixed this with CSS but wanted you to know about it incase it is a different issue that I just covered up with CSS.
    This is a crazy thing with the buttons in the footer on only the donation page. On every other page of the site all three buttons in the footer are styled correctly. But on the donation/campaign page the first two buttons look like they are styled with the WooCommerce style sheet while the third one is styled by the theme. I do not have my CSS quite right yet, the button height is too short so I will have to play with the CSS a bit more. I think it has to do with the woocommerce class being added to the body element on the shop pages.
    Here is the CSS code I added in to correct the buttons on the one page.

    .woocommerce #footer-sidebar a.button, .woocommerce #footer-sidebar button.button, .woocommerce #footer-sidebar input.button {
     	cursor: pointer;
    	font-weight: bold;
    	padding: 12px 18px;
    	border: none;
    	display: inline-block;
    	text-decoration: none;
    	white-space: nowrap;
    	text-transform: uppercase;
    	-webkit-appearance: none;
    	-webkit-background-clip: padding-box;
    	border-radius: 0;
    	-webkit-border-radius: 0;
    	-moz-border-radius: 0;
    	transition: all 0.2s ease-in-out;
    	-moz-transition: all 0.2s ease-in-out;
    	-webkit-transition: all 0.2s ease-in-out;
            color: #FFF;
            background-color: #0BA14B;
            line-height: 1.5;
    }
    .woocommerce #footer-sidebar a.button:hover, .woocommerce #footer-sidebar button.button:hover, .woocommerce #footer-sidebar input.button:hover{
         background-color: #20409a;}

    I have added some screen shots of the before CSS and after CSS to show you the issue. If you would like me to remove the CSS so you can look at it just let me know.

    Karlson

    #28981
    Bill Robbins
    Moderator

    Karlson,

    You are correct. There are built in color styles inside WooCommerce that override the button colors on WooCommerce pages.. I’ve been spending a lot of time the last few months working on a new WooCommerce project and as part of that I do have a new stylesheet that’s slowing making its way into our themes. Once it’s added to Grassroots it’ll take care of that button color trouble.

    There is a color customizer plugin for WooCommerce you can use to change the default colors. It used to be part of the actual WooCommerce plugin, but was removed to a separate plugin earlier this year. With it you can set the color of the buttons there on the WooCommerce pages.

    Thanks for the tip,
    Bill

    #28982
    Karlson Rapp
    Participant

    Hi Bill,
    Thanks for the tip on the WooCommerce customizer. I’ll check that out. It was strange that it only affected two of the three buttons.

    Karlson

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Buttons in Footer on donation page don't style correctly’ is closed to new replies.