markup not allowed in CSS code from button generator

  • Resolved bereanca

    (@bereanca)


    4 years, 2 months ago

    Hello. I don’t know enough about CSS to recognize what the markup is. The code is less than twenty lines so I’ll post it here:

    href=”#”
    class=”myButton”

    <a href="#">Donate</a>

.myButton {
	box-shadow:inset 0px 1px 0px 0px #bee2f9;
	background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	background-color:#63b8ee;
	border-radius:6px;
	border:1px solid #3866a3;
	display:inline-block;
	cursor:pointer;
	color:#14396a;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #7cacde;
}
.myButton:hover {
	background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
	background-color:#468ccf;
}
.myButton:active {
	position:relative;
	top:1px;
}

    It’s to replace the ugly Donate button for Stripe on the site.

    Also, do I not need to have a bit of code in the Custom HTML widget to call the class of this CSS?

    Once I get this displaying properly I should be able to play with modifications and duplicate it on another site on my own.

    Thank you very much!

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @bereanca.

    You can style the ‘Donate with Stripe’ button on your page using CSS like this:

    .asp_product_buy_btn.blue {
  /* insert your CSS rules here */
}

    You should be able to do this in Appearance → Customize → Additional CSS without having to add any custom HTML.

    Thread Starter bereanca

    (@bereanca)

    Hi Robert,

    Thank you. Very clean. Less code usually means fewer problems.

    Did you add /* insert your CSS rules here */?

    Where do I find this code now to add the rules? This is an Addon to another site so the path I have taken is:

    iceimprint.com >public_html > theunveiling >wp-includes > css, then where?

    Thanks,
    Larry Anderson ??

    Thread Starter bereanca

    (@bereanca)

    Sorry, forgot to add that even without modifications it renders much much better!

    What rules you replace /* insert your CSS rules here */ with depends on how you’d like the button to look. For example this will make it red:

    .asp_product_buy_btn.blue {
  background: red;
}

    In your original post here you had a bunch of rules which you could try copying:

    .asp_product_buy_btn.blue {
	box-shadow:inset 0px 1px 0px 0px #bee2f9;
	background:linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
	background-color:#63b8ee;
	border-radius:6px;
	border:1px solid #3866a3;
	display:inline-block;
	cursor:pointer;
	color:#14396a;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #7cacde;
}
.asp_product_buy_btn.blue:hover {
	background:linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
	background-color:#468ccf;
}
.asp_product_buy_btn.blue:active {
	position:relative;
	top:1px;
}
    Thread Starter bereanca

    (@bereanca)

    Appreciate it.

    I understand how the rules modify the look and how to insert the rules but I can’t find the original code you sent to insert the rules. I put it in Additional CSS but have no idea where to look for it beyond the path I mentioned above. What am I not getting?

    The only other thing I have for the button is a widget with this in it:
    [asp_product id=”254″ fancy=”0″]
    That shouldn’t impact anything we’re trying to do and could probably be included in your suggestion, right?

    I suppose, if I can’t find the file in File Manager, that I could then insert your latest suggestion(s). Am I right in assuming it would override the original code you sent without much effect other than maybe making the button render slightly slower?

    Thanks

    Moderator bcworkz

    (@bcworkz)

    I think you’re reading too much into this. You don’t need to find anything. Just add Robert’s last suggested code (after “you could try copying:”) to Additional CSS. If there is already other CSS there, add it below everything else.

    CSS in Additional CSS overrides equivalent CSS used elsewhere in external files, like the one from the stripe payments plugin. The effect this would have on page speed is negligible.

    Thread Starter bereanca

    (@bereanca)

    Fair enough. Thank you. (I have been accused of overthinking before!)

    Thank you Robert for your help and your patience.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘markup not allowed in CSS code from button generator’ is closed to new replies.