Blog

Brando html template

February 28, 2019|

01. Change default tab in portfolio filter

Please follow below steps to change default tab in portfolio filter.

STEP 1: Open any .html file which has portfolio filters and find filter navigation code as show in below:

    <!-- filter navigation -->
    <ul class="portfolio-filter nav nav-tabs portfolio-filter-tab-style-3 alt-font text-uppercase letter-spacing-1 xs-margin-eleven xs-no-margin-lr">
    <li class="nav active xs-display-inline"><a href="#" class="xs-display-inline" data-filter="*">All</a></li>
    <li class="nav xs-display-inline"><a id="default-tab" href="#" class="xs-display-inline" data-filter=".holidays">Holidays</a></li>
    <li class="nav xs-display-inline"><a href="#" class="xs-display-inline" data-filter=".family">Family</a></li>
    <li class="nav xs-display-inline"><a href="#" class="xs-display-inline" data-filter=".honeymoon">Honeymoon</a></li>
    <li class="nav xs-display-inline"><a href="#" class="xs-display-inline" data-filter=".safari">Safari</a></li>
    </ul>
    <!-- end filter navigation -->

Add id=”default-tab” in anchor tag as shown in above for example to make Holidays tab active by default.

STEP 2: Open js/main.js file and add below code in top of file.

    $(window).load(function () {
    $('#default-tab').trigger("click");
    })

02. Changing fonts

Brando uses 2 fonts: Roboto and Montserrat from the Google Fonts Library. You can change the fonts from /css/style.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.

    /* ===================================
    Google font
    ====================================== */
    @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
    @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

03. How to implement and get direct link to work detail popup?

Suppose you want a direct link which when opened then you can see specific work popup in opened state, then please follow below steps to achieve it:

Step1: You need to add unique id (popup1, popup2, etc…) to work image thumb link as per below example:

    <a id="popup1" class="work-details-popup"><img src="images/work-1.jpg" alt=""></a>

Step2: Please open /js/main.js file and add below code at the bottom of the file:

    //show portfolio popup with hash URL
    $(document).ready(function () {
    var getHash = window.location.hash.substr(1);
    if (getHash != "") {
        $('#' + getHash).trigger("click");
    }
    });

Step3: Then you can access work popup on the page directly using link like: http://www.yourdomain.com/pagename.html#popup1

04. How to make owl slider auto rotate?

Add autoPlay: 3000 parameter in the element owl slider function you are using in this JS file: /js/main.js

    $(".owl-slider-full").owlCarousel({
        navigation: true, // Show next and prev buttons
        autoPlay: 3000,
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
    });