Discussion on Porto - Responsive HTML5 Template

Hello, if you want, you can change that to:

<meta name="viewport" content="width=device-width, initial-scale=1">

But it may break the responsiveness in some situations.

We will make some more tests about that too.

If you have any questions, please open a ticket in our Support Center – http://okler.net/open-a-ticket/

Thanks,

Kind Regards,

Jonas

Hello,

Thank you for the message.

No additional tool or frameworks is required. It runs perfectly in a Apache Server.

Porto is a Static HTML5/CSS3 Template, therefore basic knowledge of HTML and CSS is required so that you can edit the templates using a Text Editor like Sublime text, Notepad++ etc. So, it is different from using a CMS since you will have to deal with codes.

All the files that come with the zip package you downloaded can be used as a base/start for your project, the main idea is that you don’t have to start from scratch, just use an existing page from the demo and modify according to your needs, then you can simply upload the files to your server via FTP.

I hope this helps.

Let me know if you have any questions.

Kind Regards,

Jonas

Hello, thanks for your purchase.

Using as base the file “portfolio-extra-load-more.html”.
To use correctly the load more button feature, let’s assume you have 12 items, so in “portfolio-extra-load-more.html” you need to put the HTML for only the first 4 items. Like this code below:

<div class="sort-destination-loader sort-destination-loader-showing">
    <ul id="portfolioLoadMoreWrapper" class="portfolio-list sort-destination" data-sort-id="portfolio" data-total-pages="3">
        <li class="col-md-3 col-sm-6 col-xs-12 isotope-item brands">
            <div class="portfolio-item">
                <a href="portfolio-single-small-slider.html">
                    <span class="thumb-info thumb-info-lighten">
                        <span class="thumb-info-wrapper">
                            <img src="img/projects/project.jpg" class="img-responsive" alt="" />
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">Presentation</span>
                                <span class="thumb-info-type">Brand</span>
                            </span>
                            <span class="thumb-info-action">
                                <span class="thumb-info-action-icon"><i class="fa fa-link" /></span>
                            </span>
                        </span>
                    </span>
                </a>
            </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 isotope-item medias">
            <div class="portfolio-item">
                <a href="portfolio-single-small-slider.html">
                    <span class="thumb-info thumb-info-lighten thumb-info-no-zoom">
                        <span class="thumb-info-wrapper">
                            <span class="owl-carousel owl-theme nav-inside m-none" data-plugin-options="{'items' : 1, 'margin' : 10, 'animateOut' : 'fadeOut', 'autoplay' : true, 'autoplayTimeout' : 3000}">
                                <span>
                                    <img src="img/projects/project-1.jpg" class="img-responsive" alt="" />
                                </span>
                                <span>
                                    <img src="img/projects/project-1-2.jpg" class="img-responsive" alt="" />
                                </span>
                            </span>

                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">Porto Watch</span>
                                <span class="thumb-info-type">Media</span>
                            </span>
                            <span class="thumb-info-action">
                                <span class="thumb-info-action-icon"><i class="fa fa-link" /></span>
                            </span>
                        </span>
                    </span>
                </a>
            </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 isotope-item logos">
            <div class="portfolio-item">
                <a href="portfolio-single-small-slider.html">
                    <span class="thumb-info thumb-info-lighten">
                        <span class="thumb-info-wrapper">
                            <img src="img/projects/project-2.jpg" class="img-responsive" alt="" />
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">Identity</span>
                                <span class="thumb-info-type">Logo</span>
                            </span>
                            <span class="thumb-info-action">
                                <span class="thumb-info-action-icon"><i class="fa fa-link" /></span>
                            </span>
                        </span>
                    </span>
                </a>
            </div>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 isotope-item brands">
            <div class="portfolio-item">
                <a href="portfolio-single-small-slider.html">
                    <span class="thumb-info thumb-info-lighten">
                        <span class="thumb-info-wrapper">
                            <img src="img/projects/project-3.jpg" class="img-responsive" alt="" />
                            <span class="thumb-info-title">
                                <span class="thumb-info-inner">Watch Mockup</span>
                                <span class="thumb-info-type">Brand</span>
                            </span>
                            <span class="thumb-info-action">
                                <span class="thumb-info-action-icon"><i class="fa fa-link" /></span>
                            </span>
                        </span>
                    </span>
                </a>
            </div>
        </li>
    </ul>
</div>

* Note that also is set “data-total-pages=”3”” (3 beacuse we want 12 items) To load the other 8 items, it’s by ajax, on folder ”/ajax/” using the files “portfolio-ajax-load-more-2” and “portfolio-ajax-load-more-3”.

* Make sure that you call on footer this script:

<script src="js/examples/examples.portfolio.js"></script>

Now let’s assume that you want 20 items, so we need 5 pages. In that case you have to set like the code above, but with some modifications:
- “data-total-pages=”3”” should be “data-total-pages=”5””
- You need to create the files: “portfolio-ajax-load-more-4” and “portfolio-ajax-load-more-5”

Please try that and let me know if you need further assistance.

If you have more questions, please open a ticket in our Support Center – http://okler.net/open-a-ticket/

Kind Regards,

Rodrigo.

Hi Okler. Your code above works fine but how can I scale the image based on the section’s width? I want to keep the original image’s width as 991px.

Hello, this is my suggestion:

HTML:

<section class="section custom-parallax-half-section section-no-border match-height custom-parallax-bg-pos-left custom-sec-left m-none" style="background: transparent url(img/demos/finance/parallax/parallax-1.jpg) repeat scroll 50% 50%; min-height: 315px;"></section>

CSS: (css/custom.css)

@media (max-width: 991px) {
    .custom-parallax-half-section {
        min-height: 315px !important;
        background-size: 100% auto !important;
    }
}

If you have any questions, please open a ticket in our Support Center – http://okler.net/open-a-ticket/

Kind Regards,

Jonas

Thanks!

Hello, please open a ticket in our Support Center and send us more details about that question. – http://okler.net/open-a-ticket/

Kind Regards,

Jonas

Hello, please open a ticket in our Support Center and send us more details about that question. – http://okler.net/open-a-ticket/

Also, please make sure you purchased this version, this is Porto HTML version page

Kind Regards,

Jonas

Hello, thanks for your message.

1) Yes, you get updates for lifetime and support for 6 months (or extended support for 12 months)

2) One license is valid for each domain, you can learn more about that in this page: http://themeforest.net/licenses/standard

3) Porto has a very stable code, the template has 4 years of improvements and updates, we update all the plugins very often and add more features. Unfortunately there’s no easy way to update a HTML website when a new version of the theme is released, it’s easy when we just update the vendor (plugins) folder, but when we add more features and you want to use them you need to compare the code and update manually.

4) One purchase code (license) is valid for each domain.

Let me know if you have any questions.

Kind Regards,

Jonas

Hello, we were not able to reproduce that problem that you mentioned. Please send us an e-mail with a screeshot of the problem and more details on how to make that happen.

E-mail: okler@okler.net

Best Regards,

Jonas

Hello, I’m sorry, but we currently do not have any ETA for Angular version.

Let me know if you have any questions.

Kind Regards,

Jonas

Thanks. Can you confirm that you are working on an Angular2 version of this theme?

Hi, I see that you posted that question on Porto, we already started in the Angular Version of Porto Admin, but we are not working on that at the moment. We will release a new version of Porto Admin soon, with more layout options and new features.

Best Regards,

Jonas

Hello, your account displays the Support Expired badge, please renew your support to continue to receive help to your technical questions.

Due to Envato license, the support is valid for 6 months.

After you renew the support, please open a ticket in our Support Center – http://okler.net/open-a-ticket/

Kind Regards,

Jonas

Hello, please go to my profile page and send me a message so I can reply with the icons links.

http://themeforest.net/user/Okler#contact

Kind Regards,

Jonas

Hello, thanks for the message.

Porto does not require any framework to work with. The template comes with HTML/CSS/JS (and a few optional PHP files for the contact form, newsletter integration, etc…).

Let me know if you have any questions.

Kind Regards,

Jonas

Hello, thanks for the message. Yes, you can add a top menu, but it requires a small customization (depends on the menu style you want to use).

Let me know if you have any questions.

Kind Regards,

Jonas

Hello, please check this topic: http://www.okler.net/forums/topic/how-to-redirect-the-contact-form-to-a-thank-you-page-after-submitting/

If you have any questions, please open a ticket in our Support Center – http://okler.net/open-a-ticket/

Kind Regards,

Jonas

Hello, the tabs on Porto are based on Bootstrap. (The JS is the main bootstrap.js file).

If you have any questions, please open a ticket in our Support Center – http://okler.net/open-a-ticket/

Kind Regards,

Jonas