Overriding customStyle.css file

Gwendolyn Chambers · July 2019

I'm working on a new donation form using the new Blackbaud checkout kit. I've gotten this pretty close but we just have a pesky div from the Customstyle.css file messing with the type color (it should not be grey). I see the problem but have no idea how to fix (screenshot of inspector below). https://secure3.convio.net/river/site/SPageNavigator/Blackbaud_checkout.html. How can override Customstyle.css? Some plain old instructions would be great as I'm not a coder.

2874bde3b8fd2768838fcec2e63775a5-huge-bl

Daryl Bunker · July 2019

I'm not sure about the checkout kit, but there should be somewhere that you can enter html/css. It's only changing the color by selecting the div element, so targeting the class should allow you to change it pretty easily. The below code will change it to white.

div.gift-type-label-container {color: #ffffff;}

Gwendolyn Chambers · July 2019

Thank you! There is a style sheet and css specifically attached to this kit. Can I add the div there? I'd rather not edit the CustomSyle.css because I don't know what all it's attached to.

Daryl Bunker · July 2019

Yes, I'd recommend adding it to the kit specifically. I'm sure the CustomStyle.css is used on donation forms, pages, etc.

Philip Nawrocki · July 2019

You definitely don't want to touch CustomStyle.css as that is used across your entire LO site.

You should be able to do this in the PageWrapper you created in the kit.

Add Daryl Bunker‍'s code in you style block, between the <style> and </style> tags and then save. Try re-loading the page and see what happens.

Thanks,

Phil

Gwendolyn Chambers · July 2019

That almost works but not quite. The colors need to toggle depending on if the button is selected or not. Is there a way to add specificity to this code below?



[[?xx::x[[S80:dark_color]]x::[[U0:dark_color=0b4f8d]]::]]

[[?xx::x[[S80:light_color]]x::[[U0:light_color=d5e5e1]]::]]

<style>

/*Secure Checkout dark_color=[[S80:dark_color]] light_color=[[S80:light_color]] */

body {

/* CHANGE BACKGROUND IMAGE HERE*/

background-image: url(' ../images/content/pagebuilder/nyc-harbor-water_summer-1200-8539.jpg ');

   background-color:#486246; /* NOTE: This color is selected to blend in with the bottom of the background image*/



   background-size:100%;

   background-repeat:no-repeat;

/* CHANGE FONT HERE*/

font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

font-size: 14px;

line-height: 1.42857143;

color: #333;

}

#sc_donation_form{

background-color: #fff;

border-radius: 30px;

padding: 40px;

}

h1.h1_checkout {

color: #[[S80:dark_color]];

font-size: 50px;



}

/*Thank You Messsage */

#secure_checkout_container div.responsive div#message span#gift_success_message.success-message-header {

font: normal bold normal 20px Helvetica,Arial,sans-serif;

color: #[[S80:dark_color]];

}

#secure_checkout_container div.responsive div.success {

border: 1px solid #[[S80:dark_color]];

background:#fff;

}

#secure_checkout_container div.donation-form-container.responsive {

background: inherit;

border: none;

padding: 30px 0;



margin: 0;

width: auto;

}

#secure_checkout_container .donation-form-container.responsive .gift-type-container, #secure_checkout_container div.gift-type-container .gift-type-button, #secure_checkout_container
.donation-form-container.responsive .gift-type-container label.gift-type-label {
height: auto;
width:auto; }

.donation-form-container.responsive .gift-type-container label.gift-type-label {
float: left;
clear: none;
background-color: #[[S80:light_color]];
color: #[[S80:dark_color]];
background-image: none;
border-radius: 15px;
font-size: 1.7em;
margin-right: 1%;
padding-left: 0;
text-align: center;
padding: 20px;
}

div.gift-type-container .gift-type-button {

width: 43%;

}

.donation-form-container.responsive .donation-level-input-container label.donation-level-selector {

float: left;

clear: none;

background-color: #[[S80:light_color]];

color: #[[S80:dark_color]];

border-radius: 15px;

}

/*Selected Donation Type Button*/

.donation-form-container.responsive .donation-level-input-container label.selected, .donation-form-container.responsive .donation-level-input-container .selected, .donation-form-container.responsive .gift-type-container label.selected, .donation-form-container.responsive .donation-level-input-container .selected:hover {

background-color: #[[S80:dark_color]];

   color:#fff;

border: 1px solid #fff;

}

/*DONATE BUTTON BEFORE SELECTION*/

.donation-form-container.responsive button#pstep_finish.disabled {

background-color: #[[S80:light_color]];

color: #[[S80:dark_color]];

   border:2px solid #[[S80:dark_color]];



}

div.responsive button.action-button {

border: 0;

filter: none;

background-image: none;

background-image: none;

background-image: none;

background-image: none;

background-image: none;

color: #fff;

}

/*DONATE BUTTON AFTER SELECTION*/

.donation-form-container.responsive button#pstep_finish, .donation-form-container.responsive button#goto_donation_form_button {

padding: 25px;

background-color: #75AB9E;

color: #fff;

border: 1px solid #fff;

border-radius: 6px;



}

div.button-container {

border-top: 0;

margin-top: 20px;

padding-top: 20px;

}

div.sustaining-gift-message {

clear: left;

padding-top: 10px;

padding-bottom: 10px;

font-size: 1.1em;

width: 80%;

}

.donation-form-container.responsive .gift-type-container label.gift-type-label {

padding: 20px;



font-size: 1.7em;

margin-right: 1%;

width: 300px;

}

</style>

Daryl Bunker · July 2019

Yes, you can toggle the styles. Looking at the code on the page, when you click on one of the "buttons", a class of selected is being added to the label element above the previously mentioned div. We can use that to target a click. Looking at that page a bit more, it looks like the code I gave you yesterday would only affect the one-time and monthly buttons, and not the donation amounts. Below is what you should need for changing those as well.

div.gift-type-label-container,

div.donation-level-label-container {

color: #ffffff;

}

label.selected > div.gift-type-label-container,

label.selected > div.donation-level-label-container {

color: #000000;

}

That would make your buttons have white text by default and change it to black when clicked. Just change the color value to whatever color you want.

Gwendolyn Chambers · July 2019

That's it! Thank you!

Elizabeth Makayed 2 · July 2019

Adding my opinion here. I am a developer and have worked with Luminate Online for over 10 years.

I find that CustomStyles.css is overly opinionated and usually adds more headache than offers assistance and the CSS in it written in a very nonstandard and hard to overwrite way.

It was designed to give some generic framework when you have no styles in the wrapper. However, once the global stylesheet is defined in the wrapper this file doesn't offer much.

I found that if I create a wrapper and define all generic styles the wrappers work well without CustomStyles.css. This file can be edited via UI in Page Wrapper editor quite easily.

So my recommendation is to delete the CustomStyles.css at the start of the deployment and then down the line it's easy to style things the way you want and not fight with style overrides.

Overriding customStyle.css file

Comments

Categories