Home > Technical Support > Tips & Tricks > Customer portal > How to change customer portal header and footer in Montana theme

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">

                <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand KBLogo" href="/"></a>
                </div>

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

 

Ready to try LiveAgent?

It's free for the first 14 days! No credit card required.

Get Started
We work well with others...
Magento Joomla Wordpress Mailchimp
Contact us

support@liveagent.com

+1-800-811-6590 (Toll Free in USA & Canada)

+421 2 33 456 826 (European Union & Worldwide)

Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

Stay in touch
Blog Google+
© 2004-2020 LiveAgent.com, All rights reserved