CMS Developers

{{ require_css("//cdn2.hubspot.net/hubfs/346178/designmodo/ui-kit/ui-kit-header/css/ui-kit-styles.css") }}
<!-- header-4 -->
<header class="header-4 header-4-v2 v-center" style="background-color: {{ module.background_color }};">
    <div class="background" style="background-image: url('{{ module.background_image.src }}'); opacity: {{ module.background_opacity }};">&nbsp;</div>
    <div>
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="hero-unit">
                       {{ module.text }}
                    </div>
                    <div class="btns">
                    {% for item in module.buttons %}
                      	{% if item.choose_cta_button %}
                      		<div class="btn-cta">{% cta guid="{{ item.cta_button }}" %}</div>
                      	{% else %}
                      		{% set styles = 'background-color: {{ item.button.button_color.color }}; color: #ffffff;' %}
                          {% set link = page_by_id(item.button.link).absolute_url %}

                          {% if item.button.use_custom_link %}
                              {% set link = item.button.custom_link %}
                          {% endif %}

                          {% if item.button.button_type == 'clear' %}
                              {% set styles = 'background-color: transparent; border: 2px solid {{ item.button.button_color.color }}; color: {{ item.button.button_color.color }};' %}
                          {% endif %}

                          <a class="btn btn-large js-btn-color" href="{{ link }}" style="{{ styles }}" data-btn-type="{{ item.button.button_type }}" data-btn-color="{{ item.button.button_color.color }}" data-btn-hover-color="{{ item.button.button_hover_color.color }}">{{ item.button.button_text }}</a>
                        {% endif %}
                    {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

          
        

          
            jQuery(document).ready(function($) {
    $(".header-4-v2").each(function() {
        var o = $(this);
        if (o.hasClass("init")) {
            return;
        }
        o.addClass("init");
      
      	var style = "";

        o.find(".js-btn-color").each(function(){
            var btnType = $(this).data('btn-type');
            var btnColor = $(this).data('btn-color');
            var btnHoverColor = $(this).data('btn-hover-color');
            
            var btnId = "id-" + Math.random().toString().slice(2);
            $(this).attr("id", btnId);

            $(this).removeAttr('style');

             if(btnType === 'normal') {
                style += "#" + btnId + ".btn { background-color: " + btnColor + "; color: #ffffff; } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnHoverColor + "; } \n";
            }

            if(btnType === 'clear') {
                style += "#" + btnId + ".btn { background-color: transparent; border: 2px solid " + btnColor + "; color: " + btnColor + " } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnColor + "; color: #ffffff } \n";
            }
        });

        $("<style type='text/css'/>").html(style).appendTo("head");
    });
});