Discussion on Porto - Multipurpose Website Template

Discussion on Porto - Multipurpose Website Template

By
Cart 53,190 sales
Recently Updated
Well Documented

Okler supports this item

Supported

2897 comments found.

While I was about to buy it, the discounted sale was cancelled. I’m waiting for the new discounted sale. :)

Hi, thanks for your interest in our template and sorry about that but the sale was only last week. We hope you still consider it, Porto is huge and $16 is a very good price, I’m sure you won’t regret. :)

Since its my first time on themeforest, once if i buy ur pack what do i get?

Do i get the html files for all those websites or just 1? Or do i get some kind of deployment to my domain. (Sorry it’s my first time here)

https://preview.themeforest.net/item/porto-responsive-html5-template/full_screen_preview/4106987?_ga=2.139616627.1343991107.1712177249-755647888.1712177249&_gac=1.57679192.1712245223.Cj0KCQjwn7mwBhCiARIsAGoxjaLl8i3_1AGvDs9ijlcw1XkAK-5YmSCQn3YZOpFLXDMn_pvNsp9BnJcaAuL9EALw_wcB

Hello, thanks for your purchase.

Please note that the files you receive when you download the template is the same as our preview site (except for the images/videos) the images and videos are replaced with placeholders. All demos included.

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

Kind Regards

Hello,

Using this demo (https://www.okler.net/previews/porto/10.2.0/index-corporate.html) as reference, I would like the seventh service in the services section (seven services) to be centered like in the reference image (https://imgur.com/a/KoBFTBR).

Please and thank you.

Hello, add the class “justify-content-center” in the divs with the class “row”. So it will be class=”row justify-content-center”.

More details: https://getbootstrap.com/docs/5.3/layout/grid/#variable-width-content

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

Best Regards,

Okler Themes

Thank you, it worked. I’ve noticed that even before placing the content in the middle, the space between the second and third row is different from the space between the first and second row. How can they have the same space? Thanks again https://imgur.com/a/B5jXKt5

Hello, you need to add a new row there for that extra item. You may use dev tools to find the differences (it’s probably margins/paddings). – https://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/

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

Best Regards,

Okler Themes

Hello.

I have added these colors in skins/defaults.css:

```css :root { —primer-color: #005e93; —primer-color-80: #337ea9; —primer-color-60: #669ebe; —primer-color-40: #99bfd4; —primer-color-20: #ccdfe9; } ```

And when I change this:

```html <section class=”section bg-color-grey section-height-3 border-0 m-0”> ```

To this, it doesn’t work:

```html <section class=”section bg-color-primer-color section-height-3 border-0 m-0”> ```

But if I use this, it works:

```html <section class=”section bg-color-primary section-height-3 border-0 m-0”> ```

1. What solution is there to add new colors?

2. Of the colors listed like “-primary-100:”, when I call it in index.html, it doesn’t work.

Hello, it’s because you need to set the css class with the var that you created, for example:

.bg-color-primer-color {
    background-color: var(--primer-color) !important;
}

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

Best Regards,

Okler Themes

How can I create a nice 360º Image for the viewer ? I see that there is a prite, but no information about it!

sorry i mean a sprite sheet … LOL

Hello, you need to generate an image with 16 variations and place them side-by-syde, using this file as example: https://www.okler.net/previews/porto/10.2.0/img/products/product-360-sprite.jpg

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

Best Regards,

Okler Themes

Thank you for your fast answer! :)

Hi! I love Porto, I want to use this demo https://www.okler.net/previews/porto/10.2.0/index-corporate.html and I want to know:

What are the files used by that demo? So I don’t have to upload ALL the files when I move my website to my hosting service. I see too much code in the index.html, is there a method to clean it up and use only what is necessary? Thank you!

Hello,

You can remove unecessary files: Folders:

  • /Ajax: The HTML files in that folder are just examples on how to use Ajax requests for your site.
  • /CSS: Make sure you keep in folders Demos and Skins just the demo files that you are using.
  • /Images: Go to Demos folder and remove the demos that you are not using, you can also remove the placeholders images (grey images).
  • /JS: : Make sure you keep in folders Demos, Views and Examples just the demo files that you are using.
  • /Master: : Do not upload that folder to your host server, those are just the source codes to generate the template.
  • /Vendor: That folder is where all the plugins used on Porto are located, make sure to keep only the ones you use and are included in the HTML files.
  • /Videos: Remove the videos that you are not using.

We hope this helps!

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

Best Regards,

Okler Themes

Hello, having issues with demo-creative-agency-2 theme. Keeps pointing to ‘plugins.min.js’ saying uncaught TypeError. But only is occurring in Chrome. Safari works fine. Has anyone else been experiencing this? Thank you.

jQuery.Deferred exception: theme.fn.intObs is not a function TypeError: theme.fn.intObs is not a function at HTMLDocument.<anonymous>

undefined

Hello,

We have made some tests here and could not see that problem here.

Please open a ticket in our Support Center and send us the URL so we can check. – http://okler.net/open-a-ticket/

Best Regards,

Okler Themes

Hello Thank you so kindly for getting back.

The issue has been resolved. Discovered it was because was pointed to the wrong IP address, not allowing files to transmit through HTTPS secured server.. Everything is pointing correctly and looks great! Yeah!!!

hello dear, i am making dynamic php web by using MVC architecture with your html theme, i am facing a problem, if your html theme is updated, how to update my front end side, because it is very difficult to update each folder and html

Hello, you basically need to execute the initialization function related to it.

Check the file js/theme.init.js

For example, for Sticky Header you need to call it again:

theme.StickyHeader.initialize();

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

Best Regards,

Okler Themes

hi, how can i put youtube url for data-video-path?

Hello, sorry but it’s not possible, that element works with mp4 video only, for youtube please check this topic: https://www.okler.net/forums/topic/video-section/

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

Best Regards,

Okler Themes

Can this template be used in a Vue 3 project?

Hello, thanks for the message.

Porto does not comes with anything specifically related to Vue, but the integration is possible.

Let me know if you have any questions.

Kind Regards,

Okler Themes

would be nice to have a mixed content mega menu option. Links and image

Hello, thanks for the message. We will consider that suggestion.

Hi Author, how do I add autoplay option to the architecture 2 main slider which has two images in the slider. I want to just add autoplay sliding. Please help. I’m just updating my template with this slider. Following is the code of the slider.

Thank you John

Hello, you need to add ‘autoplay’: true, ‘autoplayTimeout’: 6000 in the options:

<div id="slider" class="owl-carousel dots-inside dots-horizontal-center show-dots-xs custom-dots-position nav-style-1 nav-inside nav-inside-plus nav-light nav-lg nav-font-size-lg mb-0" data-plugin-options="{'autoplay' : true, 'autoplayTimeout' : 6000, 'responsive' : {'0' : {'items' : 1, 'dots' : true, 'nav' : false}, '479' : {'items' : 1}, '768' : {'items' : 1}, '979' : {'items' : 1}, '1199' : {'items' : 1, 'nav' : true, 'navVerticalOffset' : '-100px', 'dots' : false}}, 'loop' : false, 'autoHeight' : false, 'margin' : 0, 'dots' : true, 'dotsVerticalOffset' : '-115px', 'nav' : false, 'animateIn' : 'fadeIn', 'animateOut' : 'fadeOut', 'mouseDrag' : false, 'touchDrag' : false, 'pullDrag' : false, 'autoplay' : false, 'autoplayTimeout' : 9000, 'autoplayHoverPause' : true, 'rewind' : true}">
...
</div>

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

Best Regards,

Okler Themes

Hello Author, Thanks for the reply. I want autoplay for custom slider.

Thank you John

Hello, you can also add this JS:

(js/custom.js)
(function( $ ) {

    'use strict';

    setInterval(function() {
        $('#slider .owl-next').trigger('click');
    }, 10000);

}).apply( this, [ jQuery ]);

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

Best Regards,

Okler Themes

Hello, unfortunately the mobile version of the navigation does not work on my site when I call up the page with my cell phone or the menu cannot be clicked/opened. Can you check where the error lies? My website is https://gripundverstand.de

Ok, I’ve done that. However, the color of the navigation is still light blue when I call up the page via my cell phone.

Hello, colors are coming from the skin file, as you can see in this screenshot: https://i.imgur.com/7IWzLhB.png – Make sure you generate the skin correctly. How to find the css: https://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/

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

Best Regards,

Okler Themes

Hi, I’m using laravel/livewire, but there is an error while wire:navigate, so I need to initialize the js init function. Is there a way to do that?

Hello, you basically need to execute the initialization function related to it.

Check the file js/theme.init.js

For example, for Sticky Header you need to call it again:

theme.StickyHeader.initialize();

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

Best Regards,

Okler Themes

Hi

Thanks for the very good Proto template. We are using one-page demo <index-one-page.html> and in corousal we are trying 2 things that are not working for us. 1. We have a small paragraph to be added as text in each slide however its not appearing properly on webpage. Words are broken at the end of line. We tried changing animations like <animationName: typeWriter> but still words are not properly appearing on page. Also we tried to set few propeties like overflow-wrap: normal, word-break: keep-all but in vain. 2. To overcome this we also tried to change the width of text span but could not get it working either.

Can you please suggest what animation will work here so that words are not broken.

Thanks in advance.

Hello, can you please open a ticket in our Support Center and send us the URL so we can check? – http://okler.net/open-a-ticket/

Best Regards,

Okler Themes

Hi there, since a updated the theme, im facing this issue, element are not displaying properly, instead im getting this shortcut :

[porto_product_categories view=”products-slider” columns=”5″ text_position=”bottom-center” overlay_bg_opacity=”0″ text_color=”dark” hide_empty=”yes” nav_pos2=”nav-pos-outside” nav_type=”nav-style-4″ show_nav_hover=”yes” number=”6″ el_class=”mb-3″]

How to solve this please, my website is not displaying properly. Thanks

Hello, thanks for your purchase, looks like you purchased the Wordpress version, right? I’m the author of Porto HTML, the Wordpress version was created by another author, if you need support, please contact them at: https://themeforest.net/item/porto-responsive-wordpress-ecommerce-theme/9207399/support

Best Regards,

Okler Themes

scrollableParallaxMinWidth (2) – When I put scrollableParallaxMinWidth:350, 0r 230 or 500 the background image has different behavior in mobile devices (ie Iphone X), I did copy your code and the images size for this purpose.

Hello, in all of our tested it worked well with the default files (just changing scrollableParallaxMinWidth).

Send us a message through our profile contact form – https://themeforest.net/user/okler – with more details, URL, screenshots, browser version, etc…

Best Regards,

Okler Themes

scrollableParallaxMinWidth – When I put scrollableParallaxMinWidth:0, (instead 991) the background image is not ‘cover’ in mobile devices (ie Iphone X), can you check please?

Hello, make sure the image the size of the image that you are using is correct for the content (aspect ratio). Please open a ticket in our Support Center and send us the URL so we can check – http://okler.net/open-a-ticket/

Best Regards,

Okler Themes

HI does this include all media?

Hello, thanks for the message.

Please note that the original images are not included with the template. In the place of original images we place grey placeholders. This described in our item description on ThemeForest. The reason is we use premium images in our preview, and due to copyright issues we can not distribute with the theme.

It works the same way for all templates here on ThemeForest.

Let me know if you have any other question.

Kind Regards,

Okler Themes

I am encountering an issue with your contact form where i’m getting an error message stating, “Error! There was an error sending your message.” how I can solve that .. note: that i change email in code and do all step in documentation

Hello, can you please open a ticket in our Support Center and send us the URL so we can check? – http://okler.net/open-a-ticket/

Best Regards,

Okler Themes

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey