Scroll
ApplyMetrics | Support
Follow

6. Customising the button

Note: this feature is only available on the SmartApply plugin (premium plan only)

CUSTOMIZING THE BUTTON

 

The SmartApply button can be customized by providing css styling in the plugin set up.

data-css='{".btn-custom,.btn-custom:hover":{"color": "#FFFFFF","background-color":"#000000","border-color":"#000000"}}'

This will set the background color, the text color and the border color of the button (for both normal and hover)

You may want to use the following tool to style your button:

http://blog.koalite.com/bbg/

Caution: All of the CSS of the plugin can be overwritten using this technique so please be careful when setting customized css class names. If you are confident and you want to style any aspect of the plugin you can specify using the CSS JSON specification as below:

CSS JSON

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. JSON (JavaScript Object Notation) is a lightweight data-interchange format. CSS may easily be expressed in JSON notation (CSS JSON). CSS JSON is a powerful and flexible approach allowing for inheritance and logical constructs within CSS.

CSS JSON Structure

    {
        "selector-1":{
            "property-1":"value-1",
            "property-n":"value-n"
        }
    }

The above example returns the following CSS text format:

    selector-1 {
       property-1:value-1;
       property-n:value-n;
    }

Extending CSS with CSS JSON

Custom selector property/values can be used in CSS JSON as a mechanism to extend CSS. CSS text pre-processing is possible through the mapping of a specfied property to a conditionally executed parsing routine.

CSS Selector Inheritance with CSS JSON

A CSS selector may be inherited within another selector using CSS JSON.

    var cssjson = {
            ".copy-1":{
                "font-family":"Verdana, Geneva, Arial, Helvetica, sans-serif",        
                "font-size":"11px",
                "color":"#CCC"
            },
            "div#container div#header":{
                "CSSJSON-INHERIT-SELECTOR":".copy-1",
                "position":"absolute",
                "top":"12px",
                "left":"4px"
            }
    }

The above example returns the following CSS text format:

    .copy-1 {
        font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;        
        font-size:11px;
        color:#CCC;
    }
    div#container div#header {
        font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;        
        font-size:11px;
        color:#CCC;
        position:absolute;
        top:12px;
        left:4px;
    }

 

Comments

Powered by Zendesk