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.

Screen Shot 2020-03-15 at 9.18.13 PM.png

#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.

Pelcro

The Pelcro Developer Hub

Design