Customize the CSS
Pelcro uses the !important tag to ensure all CSS styles are prioritized. In order to override the CSS, add another CSS rule with !important , and either give the selector a higher specificity (adding a tag, id or class to the selector) or add a CSS rule with the same selector at a later point than the existing one (before end of body). This works because, in a specificity tie, the last rule defined wins. The example below to override multiple CSS attributes in our default view.
What can you customize
You can customize any of the following elements. In the example below, you'll find a
Header
Header background-color
Header site name
Button
Background color
Text color
Fields
Field radius
Field background color
Example
Below is an example of the customization and how it was achieved via CSS customization.


#pelcro-app .pelcro-prefix-view .pelcro-prefix-header{
background-color: #3c464b !important;
margin-bottom: 20px !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-modal-header{
border-bottom: 0px !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-btn {
background: #ff5029 !important;
border-color: #ff5029 !important;
background-image: none !important;
border-radius: 0px !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-btn:focus,
#pelcro-app .pelcro-prefix-view .pelcro-prefix-btn:hover
{
background: #ff5029 !important;
border-color: #ff5029 !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-link{
color: #ff5029 !important;
background-image: none !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-site-name {
display: none !important;
}
#pelcro-app #list .pelcro-prefix-view .pelcro-prefix-product-button {
border-radius: 0px !important;
}
#pelcro-app .pelcro-prefix-authorship{
display: none !important;
}
#pelcro-app .pelcro-prefix-view #pelcro-view-select .pelcro-prefix-center-text{
display: none !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-input, #pelcro-app .pelcro-prefix-view .StripeElement{
border-radius: 0px !important;
}
#pelcro-app .pelcro-prefix-view #pelcro-view-dashboard .pelcro-prefix-dashboard-block.logo {
background-color: #3c464b !important;
}
#pelcro-app #list .pelcro-prefix-view .pelcro-prefix-plan-field-wrapper{
overflow-x: hidden !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-close:not(:disabled):not(.disabled) {
color: #fff !important;
}
#pelcro-app .pelcro-prefix-view h1, #pelcro-app .pelcro-prefix-view h2, #pelcro-app .pelcro-prefix-view h3, #pelcro-app .pelcro-prefix-view h4, #pelcro-app .pelcro-prefix-view h5, #pelcro-app .pelcro-prefix-view h6, #pelcro-app .pelcro-prefix-view p, #pelcro-app .pelcro-prefix-view label{
font-family: "foundry_context_boldbold",Helvetica,Arial,sans-serif !important;
}
#pelcro-app .pelcro-prefix-view h4{
font-weight: 600 !important;
}
<script>var Pelcro = window.Pelcro || (window.Pelcro = {}); Pelcro.siteid = "ID";</script>
<script async src="//js.pelcro.com/sdk/main.min.js" type="text/javascript"></script>
<style type="text/css">
#pelcro-app .pelcro-prefix-view .pelcro-prefix-header{
background-color: #3c464b !important;
margin-bottom: 20px !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-modal-header{
border-bottom: 0px !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-btn {
background: #ff5029 !important;
border-color: #ff5029 !important;
background-image: none !important;
border-radius: 0px !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-btn:focus,
#pelcro-app .pelcro-prefix-view .pelcro-prefix-btn:hover
{
background: #ff5029 !important;
border-color: #ff5029 !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-link{
color: #ff5029 !important;
background-image: none !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-site-name {
display: none !important;
}
#pelcro-app #list .pelcro-prefix-view .pelcro-prefix-product-button {
border-radius: 0px !important;
}
#pelcro-app .pelcro-prefix-authorship{
display: none !important;
}
#pelcro-app .pelcro-prefix-view #pelcro-view-select .pelcro-prefix-center-text{
display: none !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-input, #pelcro-app .pelcro-prefix-view .StripeElement{
border-radius: 0px !important;
}
#pelcro-app .pelcro-prefix-view #pelcro-view-dashboard .pelcro-prefix-dashboard-block.logo {
background-color: #3c464b !important;
}
#pelcro-app #list .pelcro-prefix-view .pelcro-prefix-plan-field-wrapper{
overflow-x: hidden !important;
}
#pelcro-app .pelcro-prefix-view .pelcro-prefix-close:not(:disabled):not(.disabled) {
color: #fff !important;
}
#pelcro-app .pelcro-prefix-view h1, #pelcro-app .pelcro-prefix-view h2, #pelcro-app .pelcro-prefix-view h3, #pelcro-app .pelcro-prefix-view h4, #pelcro-app .pelcro-prefix-view h5, #pelcro-app .pelcro-prefix-view h6, #pelcro-app .pelcro-prefix-view p, #pelcro-app .pelcro-prefix-view label{
font-family: "foundry_context_boldbold",Helvetica,Arial,sans-serif !important;
}
#pelcro-app .pelcro-prefix-view h4{
font-weight: 600 !important;
}
</style>
In the example above, the selector of .pelcro-prefix-btn is #pelcro-prefix-app. We've added another selector (.pelcro-prefix-view) to give it more specificity and thus override it.
Updated 10 months ago