How to change customer portal header and footer in Montana theme

New Montana theme in LiveAgent is coming with it's own header and footer. This header and footer can be customized directly in your LiveAgent agent panel > Customer portal > Settings Customize design > Design Own HTML
 

Video Guide:


 
You can replace our default header and footer with your own custom HTML codes. Feel free to use our default header and footer codes below as inspiration.

This is the original header code:
<nav class="navbar">
        <div class="container">
                <a class="navbar-brand KBLogo" href="/"></a>
                <input class="menu-btn" type="checkbox" id="menu-btn">
                <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
                <div id="navbar" class="navbar-collapse collapse">
                        <ul id="menu-header-menu" class="nav navbar-nav">
                                <li id="menu-item-mytickets" class="menu-item"><a href="{'my_tickets'|module_url}#My-Tickets"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> ##My tickets##</a></li>
                                {if ($submitTicketEnabled)}
                                        <li id="menu-item-submitticket" class="menu-item"><a href="{'submit_ticket'|module_url}"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> ##Submit ticket##</a></li>
                                {/if} 
                                {if ($userLogged)}
                                        <li id="menu-item-user" class="menu-item">
                                                <a id="editProfileButton" href="{'profile'|module_url}">
                                                    <div class="Avatar">
                                                            <img id="loggedUserAvatar" height="33" width="33" src=" {$avatarUrl}" class="UserAvatar" title="##Avatar image##"
                                                                    alt="##Avatar image##" onerror='this.style.display="none"'/>
                                                    </div> 
                                                    {$name} 
                                                </a>
                                        </li> 
                                        <li id="menu-item-logout" class="menu-item"><a href="{'logout'|action_url}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> ##Logout##</a></li>
                                {else}
                                        <li id="menu-item-login" class="menu-item"><a href="{'login'|module_url}"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> ##Login##</a></li>
                                {/if}
                        </ul>
                </div>
        </div>
</nav>
This is the original footer code:
<div class="footer-links">
                <div class="container">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="product-desc">
                                <h5>Powered by...</h5>
                                <p>LiveAgent is an integrated <a href="https://www.liveagent.com">customer support software</a>, <a href="https://www.liveagent.com/tour/ticket-processing-distribution/">ticketing system</a>, <a href=https://www.liveagent.com/tour/live-chat-software/">live chat</a>, <a href="https://www.liveagent.com/features/facebook/">social helpdesk</a> and <a href="https://www.liveagent.com/features/call-center/">voice helpdesk</a>. You name it, it's there. Based in cloud and accessible from everywhere, with SSL safety.</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="product-links">
                                <h5>LiveAgent</h5>
                                <ul>
                                    <li><a href="https://www.liveagent.com/pricing/" title="Subscription plans from $19/month. Downlodable licences(one-time-fee) from $99. 14-day free trial. 30-day money back guarantee.">Pricing</a></li>
                                    <li><a href="https://www.liveagent.com/testimonials/" title="Web-based multichannel help desk software which integrates all channels(Email, Voice, Chat, Facebook and Twitter) into 1 interface. 14-day free trial">Testimonials</a></li>
                                    <li><a href="https://www.liveagent.com/use-cases/" title="Use Cases">Use Cases</a></li>
                                    <li><a href="https://www.liveagent.com/integrations-and-plugins/" title="Maximize the value of your existing help desk and extend customer satisfaction with LiveAgent's range of integrations, plugins and apps.">Integrations and Plugins</a></li>
                                    <li><a href="https://www.liveagent.com/live-agent-alternatives/" title="Live Agent alternatives">Comparisons</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="product-links">
                                <h5>Tour</h5>
                                <ul>
                                    <li><a href="https://www.liveagent.com/tour/universal-inbox/" title="Live chat software with integrated VoIP, live visitors monitoring and automatic chat invitations. Turn visitors into customers. From $29/month.">Helpdesk</a></li>
                                    <li><a href="https://www.liveagent.com/tour/live-chat-software/" title="Live chat software with integrated VoIP, live visitors monitoring and automatic chat invitations. Turn visitors into customers. From $29/month.">Live Chat Software</a></li>
                                    <li><a href="https://www.liveagent.com/tour/customer-portal/" title="Web-based multichannel help desk software which integrates all channels(Email, Voice, Chat, Facebook and Twitter) into 1 interface. 14-day free trial">Customer Portal</a></li>
                                    <li><a href="https://www.liveagent.com/tour/facebook/" title="Web-based multichannel help desk software which integrates all channels(Email, Voice, Chat, Facebook and Twitter) into 1 interface. 14-day free trial">Facebook</a></li>
                                    <li><a href="https://www.liveagent.com/tour/twitter/" title="Web-based multichannel help desk software which integrates all channels(Email, Voice, Chat, Facebook and Twitter) into 1 interface. 14-day free trial">Twitter</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            {$mostPopularArticlesBox}
                        </div>
                    </div>
                </div>
            </div>
                    <div class="footer-container">
                <div class="container">
                    <div class="AppBrandProductWidget" style="display:inline-block; vertical-align:middle; line-height:16px; height:16px; white-space:nowrap;"><a class="AppBrandProductLink" target="_blank" href="https://www.liveagent.com?utm_source=textlink&utm_medium=link&utm_campaign=branding" title="Helpdesk software by LiveAgent" style="line-height:16px; vertical-align:middle; font-family:Arial,Verdana,san-serif; font-size:11px;  font-weight:normal; text-decoration:none; color:inherit"><span class="AppBrandProductLabel">Helpdesk software by</span> <object style="display:inline-block; opacity:0.7; line-height:16px; width:16px; height:16px; vertical-align:top;"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 -9 16 16" enable-background="new 0 -9 16 16" xml:space="preserve"><g><path d="M2.445-0.419c0-0.487,0.248-1.564,1.167-1.564c0.772,0,1.158,0.506,1.158,1.519c0,1.093-0.386,1.64-1.158,1.64 C2.833,1.174,2.445,0.644,2.445-0.419z M8.414,4.338C7.496,5.432,6.44,6.669,5.083,6.667c0.513-0.71,0.872-1.568,1.141-2.455         c-3.305-0.524-5.765-2.51-5.765-4.881c0-1.152,0.813-3.455,3.462-3.455c2.167,0,3.718,1.729,3.718,3.697 c0,1.506-0.705,2.045-1.106,2.045c-0.467,0-0.7-0.336-0.7-1.008v-3.458H4.831v0.309C4.534-2.82,4.128-2.96,3.612-2.96 c-1.921,0-2.235,1.927-2.235,2.541c0,0.826,0.431,2.571,2.235,2.571c0.587,0,1.066-0.201,1.438-0.602    c0.306,0.688,0.8,1.03,1.483,1.03c0.849,0,2.069-0.714,2.069-3.007c0-3.368-3.049-4.702-4.082-4.702 c5.584-1.76,10.939,1.016,10.939,4.459C15.459,2,12.344,4.181,8.414,4.338z"/></g></svg></object><b class='AppBrandProductName'>LiveAgent</b></a> </div>
                </div>
            </div>