Forum Replies Created
-
Posts
-
You can customize it with this code:
.tabs-modern .nav .nav-link.active { color: #0088cc !important; }
Hello, the ecommerce forms are not ready for the dark mode, you need to customize it, here’s how to start:
html.dark .tabs-modern { background: #21262d; } html.dark .tabs-modern .nav .nav-link { color: #FFF; border-bottom: 1px solid #282d36; } html.dark .tabs-modern .nav .nav-link.active { background: #21262d; } html.dark .tabs-modern .nav .nav-link > i { color: #FFF; } html.dark .card.card-big-info .card-body > .tabs-modern.row > div[class*="col-"]:first-child { background: #191C21; } html.dark .tabs-modern .control-label { color: #FFF; } html.dark .tabs-modern .form-group + .form-group { border-color: #282d36; }
Hello, thanks for your purchase.
Please note that the image will be only visible in a server (localhost or your final server). Unfortunatelly it will no be visible if you open the html file directly in the browser (because that image uses a mask to appear).
If the problem persists please send me the url of your site so we can check.
Thanks.
Hello, the file name must not have any spaces and special characteres: “img/shot-snack’n-go (1).png” is not valid. should be “shot-snack-n-go-1.png” Change the file name and in the HTML as well.
Hello, to do that you need a custom JS:
$('.sidebar-left').on('mouseenter', function() { if($('html').hasClass('sidebar-left-collapsed')) { $('html').removeClass('sidebar-left-collapsed'); } });
Hello, if you want to add a style to the parent item you need to do this:
<li class="active"> <a class="nav-link" href="link.html"> <i class="bx bx-loader-circle" aria-hidden="true"></i> <span>My Menu</span> </a> </li>
(css/custom.css)
ul.nav-main > li.active > a { background-color: #21262d; color: #0099e6; }
Hello, sorry but we’ve never worked with asp .net so unfortunatelly we can’t help you with questions related to that.
What we can say is that this class is what makes that section expanded:
Class “nav-active” on LI is the class that sets the item active too.
Hi, the image is set on data-image-src attribute, it should be working.
Please send us the URL where we can see that.Thanks.
Hello,
– Popper is inside Bootstrap bundle, but if you need that file you can get it in this link: https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.10.2/umd/popper.min.js
– Examples Dashboard: https://www.okler.net/previews/porto-admin/4.2.0/js/examples/examples.dashboard.js
Hello, you can add both and control it with CSS:
<div class="custom-hide btn-cursor-pointer toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened"> <i class="fas fa-xmark" aria-label="Toggle sidebar"></i> <i class="fas fa-bars" aria-label="Toggle sidebar"></i> </div>
CSS:
.toggle-sidebar-left .fa-xmark { display: none; } .toggle-sidebar-left .fa-bars { display: block; } .sidebar-left-opened .toggle-sidebar-left .fa-xmark { display: block; } .sidebar-left-opened .toggle-sidebar-left .fa-bars { display: none; }
Hi,
Start updating:
/css/theme.css
/css/theme-elements.css
js/theme.js
js/theme.init.jsIf there’s any problem, update vendor/ folder also.
Hi, try adding this css:
(css/custom.css)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .main > .section-angled { min-height: 740px; } }
Hi, can you please send more details? Which resolution and device that you’re having that problem? We wasn’t able to see that same thing here.
Thanks.
Hi, you’re using Porto version 8.2.0, which is not compatible with that feature – it was added on Version 9.7.0.
To use that you’re going to have to update CSS/JS files.
Hello,
Regarding the email going to junk folder, this is something you need to set in your server/mail app, marking that email as “safe”. You may also create a new email for that, such as [email protected] – If the problem persists contact the server adminstrator/host provider to fix that.
For recpatcha here are the instructions:
reCaptcha v2
https://www.okler.net/previews/porto/docs/#googlerecaptchaExample: https://www.okler.net/previews/porto/12.0.0/elements-forms-contact-recaptcha-v2.html
reCaptcha v3
https://www.okler.net/previews/porto/docs/#googlerecaptchav3Example: https://www.okler.net/previews/porto/12.0.0/elements-forms-contact-recaptcha-v3.html
Hello, thanks for the interest in our template.
Here are a few things to consider:
What is a HTML Admin Template?
Porto Admin is a HTML template, it’s not fully functional, the theme comes with HTML/CSS/JS files that allows you to integrate with your own system and create your own solution, with server-side scripting languages such as PHP, Ruby on Rails, aspNet, etc… (That integration is responsibility of the buyer). It works the same way for all template under the HTML category on ThemeForest.
How does the integration with the front-end template works?
Porto Admin is not a CMS/Editor system ready to create new pages on Porto Front-End template. The integration is actually a package of new features from the admin to add in the front-end template, such as advanced tables, advanced forms, etc…
You basically need to consider that the HTML Admin Template is not ready to be used as a content manager for Porto Front-End, all that server integration you would have to create from scratch.
It works the same way as all templates under the HTML category on ThemeForest (same as Metronic, for example).
Let me know if you have any questions.
Best Regards,
Okler Themes
Hello, thanks for your purchase.
Unfortunatelly we don’t have an example like that but you may find some similar examples on Codepen: https://codepen.io/cameronknight/pen/qBNvrRQ
Hope that helps.
Kind Regards.
Hello,
We recommend adding the admin under “/admin” folder.
More details: https://www.okler.net/forums/topic/how-to-integrate-porto-admin-extension-on-porto/
Kind Regards.
Hi, try to add HREF to the A element:
<a class='dropdown-item dropdown-toggle' href="catalog.html">Catálogo</a>
Hi, thanks for your purchase.
Here is an example:
HTML:
<button type="button" data-bs-toggle="modal" data-bs-target="#testModal"> Launch modal </button> <div class="modal fade" id="testModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="text-success"> This is a Modal </h1> </div> <div class="modal-footer"> <button data-bs-dismiss="modal"> Close Modal </button> </div> </div> </div> </div>
JS: (js/custom.js)
const modal = document.getElementById('testModal') modal.addEventListener('show.bs.modal', () => { console.log('show instance method called!'); }) modal.addEventListener('shown.bs.modal', () => { console.log('modal element completely visible!'); })
Sorry but we tested in all those devices and different browsers (including Opera) and the result is always the same, success message after form submit. Tested also with iPhone 15.
Please send more details as we continue to not be able to reproduce that here. Must be something very specific as that contact script works for all of our customers.
Hi,
You will find the HTML files for the demo you want inside the HTML folder.
Example, for Marketing 1 demo – Files are:
demo-marketing-1.html
demo-marketing-1-case-studies.html
etc…Porto comes with all the files as our Preview site (except by the images/videos that are replaced by placeholders).
Clean Up: 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. You can remove that folder.
- /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.
Basically regarding CSS and JS fildes that you need you can just check the HTML files, for example:
CSSs:
JSs:
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 VS Code, 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.
We use and recommend VSCode, which is the most advanced and modern editor in our opinion.
(Note it works the same way for all HTML templates on ThemeForest).
I hope this helps.
Let me know if you have any questions.
Best Regards,
Okler Themes
Hi,
There are 2 types of lightbox/modal that you can show on page load.
1) OPTION 1
Lightbox with only an IMG for the content, example:
The POPUP HTML you put right after opening the BODY tag or at the bottom before closing it.
<div id="test-modal" class="white-popup-block p-0 mfp-hide"> <img src="https://placehold.co/600x400" class="img-fluid" /> </div>
2) JS (js/custom.js)
$(function () { $('.popup-modal').magnificPopup({ type: 'inline', preloader: false }); }); $(document).ready(function () { if ($('#test-modal').length) { $.magnificPopup.open({ items: { src: '#test-modal' }, type: 'inline' }); } });2) OPTION 2
HTML:
<button class="d-none" data-bs-toggle="modal" data-bs-target="#defaultModal" id="openModal"> Launch Default Modal </button> <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
JS:
$(window).on('load', function(){ var delay = 300; // Time in mili-seconds setTimeout(function(){ $('#openModal').trigger('click'); }, delay); });* Use only one of them.
Kind Regards.
Hello, thanks for your purchase.
Please upload your site in a temporary URL so we can access and provide solutions for that.
Kind Regards.
Hello, thanks for your purchase.
Unfortunatelly we don’t have an easy way to do that, but you can check the files theme.js and theme.init.js – those files have the “core” of the template, and it’s separated by each plugin. Some of them have dependencies on others plugins, like the carousel, that one uses OwlCarousel to work.
Hope that helps.
Kind Regards.
Hello, sorry but unfortunatelly we don’t have any example of that on Porto.
A few links that may help you:
https://programmablesearchengine.google.com/about/
Hello,
You need to add these classes in the HTML:
Add this:
html.dark .tabs .nav-tabs li.active a, html.dark .tabs .nav-tabs li.active a:hover, html.dark .tabs .nav-tabs li.active a:focus { color: var(--primary) !important; border-top-color: var(--primary) !important; }Customizations are not included on support, my suggestion is to add a custom class for that ineer tabs and customize it with css.
Example:
<div class="tabs tabs-secondary tabs-2">
CSS:
html.dark .tabs-2 .tab-content { background: #FFF !important; }
The claases on page header are also doing that:
You can reduce from mt-5 to mt-3 or simply remove those.
Note that the header classes are different, in that one you are using transparent header.
The header of that demo is “header-effect-shrink”
Replace js/views/view.contact.js with this;
/* Name: View - Contact Written by: Okler Themes - (http://www.okler.net) Theme Version: 10.0.0 */ (function($) { 'use strict'; /* Custom Rules */ // No White Space $.validator.addMethod("noSpace", function(value, element) { if( $(element).attr('required') ) { return value.search(/^(?! *$)[^]+$/) == 0; } return true; }, 'Please fill this empty field.'); /* Assign Custom Rules on Fields */ $.validator.addClassRules({ 'form-control': { noSpace: true } }); /* Contact Form: Basic */ $('.contact-form').each(function(){ $(this).validate({ errorPlacement: function(error, element) { if(element.attr('type') == 'radio' || element.attr('type') == 'checkbox') { error.appendTo(element.closest('.form-group')); } else if( element.is('select') && element.closest('.custom-select-1') ) { error.appendTo(element.closest('.form-group')); } else { if( element.closest('.form-group').length ) { error.appendTo(element.closest('.form-group')); } else { error.insertAfter(element); } } }, submitHandler: function(form) { var $form = $(form), $messageSuccess = $form.find('.contact-form-success'), $messageError = $form.find('.contact-form-error'), $submitButton = $(this.submitButton), $errorMessage = $form.find('.mail-error-message'), submitButtonText = $submitButton.val(); $submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true); // Fields Data var formData = $form.serializeArray(), data = {}; $(formData).each(function(index, obj){ if( data[obj.name] ) { data[obj.name] = data[obj.name] + ', ' + obj.value; } else { data[obj.name] = obj.value; } }); // Google Recaptcha v2 if( data["g-recaptcha-response"] != undefined ) { data["g-recaptcha-response"] = $form.find('#g-recaptcha-response').val(); } // Ajax Submit $.ajax({ type: 'POST', url: $form.attr('action'), data: data }).always(function(data, textStatus, jqXHR) { $errorMessage.empty().hide(); if (data.response == 'error') { $errorMessage.html(data.errorMessage).show(); $messageError.removeClass('d-none'); $messageSuccess.addClass('d-none'); if (($messageError.offset().top - 80) < $(window).scrollTop()) { $('html, body').animate({ scrollTop: $messageError.offset().top - 80 }, 300); } $form.find('.has-success') .removeClass('has-success'); $submitButton.val( submitButtonText ).attr('disabled', false); } else { // Uncomment the code below to redirect for a thank you page // self.location = 'thank-you.html'; $messageSuccess.removeClass('d-none'); $messageError.addClass('d-none'); // Reset Form $form.find('.form-control') .val('') .blur() .parent() .removeClass('has-success') .removeClass('has-danger') .find('label.error') .remove(); if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) { $('html, body').animate({ scrollTop: $messageSuccess.offset().top - 80 }, 300); } $form.find('.form-control').removeClass('error'); $submitButton.val( submitButtonText ).attr('disabled', false); return; } }); } }); }); }).apply(this, [jQuery]);Make sure to clear cache of the browser.
If you could upload it in a temporary server would be great, but like I said, for the colors you can find the css with Chrome Dev Tools.
Hello,
If possible send us the URL of your project so we can provide the exact solution.
For the colors, you basically need to find the css that is being applied and create a “custom” css for it to replace:
Icons are font icons, in that case we use boxincons:
You can see available icons in this link: https://boxicons.com/
You can also use FontAwesome icons: https://fontawesome.com/
Change the HTML
Add CSS:
(css/custom.css)@media (max-width: 991px) { html.dark.sticky-header-active .with-topbar #header .header-body { top: 68px !important; } }
Hello, thanks for your purchase.
You can remove unnecessary 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.
Here are a few tips about the performance:Note that Porto is a static HTML template. The HTML templates doesn’t have a “visual tool / cms interface” to edit the content, the template comes with HTML/CSS/JS (and a few optional PHP files for the contact form, newsletter integration, etc…), all the changes must be done using a installed editor, such as Notepad++, Sublime, Dreamweaver, etc… it’s required that you know at least a little bit about code editing in order to customize your own site using the template. After you do all the changes you upload the template to the server (via FTP).
In the zip file that you downloaded there’s a folder called HTML, in that folder you will find the same files as shown in our preview site: https://www.okler.net/previews/porto/8.3.0/ – Just open the file index.html in your browser and you will see the same demo site. Those are the files that you will use to create your website. All you need to do is to use the example files that comes in the package you download, edit the codes (HTML/JS/CSS) to add your Content using Sublime Text or an Equivalent Text/Code Editor. Creating a website based in a HTML template requires at least a little bit of knowledge in HTML/CSS/JS.
For example, to get the elements you need go to respective element page, copy the element code and paste where you want. The best way is choose a demo to start as scratch and then remove the unwanted sections and copy/paste new elements to this page.
(That’s how all the HTML templates available on ThemeForest work).
To get better website performance, there are a few things you can do after you finish your website.
Hosting Plan: It’s not recommended to use a low-cost common hosting plan. Select a fast hosting service. A2Hosting – https://www.a2hosting.com?aid=601d93569e434&bid=75dbf1c0
Compress and Combine Assets: For example, there are several different ways to compress and combine the assets, this is probably the easiest way: http://www.okler.net/forums/topic/minify-php-how-to-combine-minify-and-cache-javascript-and-css-files-on-demand/
Optimize Your Images: The images can also be improved, consider to export them in a lower quality. JPG 80% is good enough. – https://tinypng.com/
Browser Cache: Page load times can be significantly improved by asking visitors to save and reuse the files included in your website. – https://gtmetrix.com/leverage-browser-caching.html / https://gtmetrix.com/serve-static-assets-with-an-efficient-cache-policy.html#how-to-cache
CDN: The use of a CDN to serve your website files also it’s a good idea. Most of the Hosting Services have an easy way to enable CDN, for or sites we use A2Hosting ( https://www.a2hosting.com?aid=601d93569e434&bid=75dbf1c0 ) and Cloudflare, the tutorial is available in this link: https://www.a2hosting.com/blog/enable-cloudflare/
We hope this helps!
Hi, looks like the way that server returns the success status is different, so open the file js/views/view.contact.js and change line 88
FROM:
if (data.response == 'success') {TO:
if (data.response == 'success' || data.response == 200 || data.response == '200') {
1) Add this:
(css/custom.css)@media (max-width: 991px) { body.with-topbar > .body { transition: none !important; margin-top: 0 !important; } body.with-topbar > .body > .body { transition: none !important; margin-top: 94px !important; } }2) Move the notice-bar to inside the DIV Main:
Hello, I just checked your site and I couldnt see it (tested on Chrome latest version / desktop).
Can you send more details?
Examples:
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-basic.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-advanced.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-wizard.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-code-editor.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-advanced.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-responsive.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-editable.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-ajax.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.html
Hello, thanks for the message.
– Porto – Responsive HTML5 Template comes with a few samples files, such as feature-admin-charts.html, feature-admin-forms-advanced.html, etc… with those, you can see the HTML Markup and the working pages from the preview.
– In each page you can see which CSS/JS files you need to include to get the elements working.
Steps to use the admin extension:
1) Add the CSS files for that specific page (in this example, based on feature-admin-forms-advanced.html):
(Make sure the paths for the admin match with your own structure, in this example, the path is /admin/…)
2) Add the JS files for that specific page:
(Consider to combine and compress all those files on your project)
3) That’s it, now you can start to use the features from the admin as seen in the preview.
SKIN: If you want to change the color skin, don’t forget to generate the extension skin file and save in the file (assets/stylesheets/skins/extension.css):
Hi, to get better website performance, there are a few things you can do after you finish your website.
CDN – Cloudflare: (It’s the most important thing for a better performance). Most of the Hosting Services have an easy way to enable CDN, for or sites we use A2Hosting ( https://www.a2hosting.com?aid=601d93569e434&bid=75dbf1c0 ) and Cloudflare, the tutorial is available in this link: https://www.a2hosting.com/blog/enable-cloudflare/ – https://www.cloudflare.com/ – For other hosts: https://developers.cloudflare.com/learning-paths/get-started/
Browser Cache: Page load times can be significantly improved by asking visitors to save and reuse the files included in your website. – https://gtmetrix.com/leverage-browser-caching.html / https://gtmetrix.com/serve-static-assets-with-an-efficient-cache-policy.html#how-to-cache
Hosting Plan: It’s not recommended to use a low-cost common hosting plan. Select a fast hosting service. A2Hosting – https://www.a2hosting.com?aid=601d93569e434&bid=75dbf1c0
Compress and Combine Assets: For example, there are several different ways to compress and combine the assets, this is probably the easiest way: http://www.okler.net/forums/topic/minify-php-how-to-combine-minify-and-cache-javascript-and-css-files-on-demand/
Optimize Your Images: The images can also be improved, consider to export them in a lower quality. JPG 80% is good enough. – https://tinypng.com/
Best Regards.
Hello, looks like a server issue, your server is probably blocking sending e-mails.
My suggestion is that you contact their support to enable that option and also provide a PHP script that is funcional in their server.
Kind Regards.
Hello, as explained we can’t help wioth customizations for buyer needs, we recommend you to hire a freelancer for those customizations.
For the tabs you can create a custom class and customize that color in that part:
<div class="tabs tabs-primary tabs-custom">
html.dark .tabs-custom .tab-content { background: var(--dark--200); border-color: var(--dark--200); }Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs. Please consider that for the next questions.
Item support does not include:
– Customization and installation services
– Support for third party software and plug-insSupport for our items includes:
– Responding to questions or problems regarding the item and its features.
– Fixing bugs and reported issues.
– Providing updates to ensure compatibility with new software versions.The definition of support we provide is based on Envato/ThemeForest license.
Best Regards,
Okler Themes
Hi,
You can add max-height with css, adding this:
(css/custom.css)
.btn-group .dropdown-menu { max-height: 300px; overflow-y: auto; }
1) You need to have different ids if you want to repeat the same component.
So, check element with ID flotBars and flotBarsData.
You will need to use flotBars2 and flotBarsData2 (for example) and run a code like this in your custom js file:
Each chart must have it’s own JS. Check js/examples/examples.charts.js
(function($) { 'use strict'; /* Flot: Bars */ (function() { if( $('#flotBars2').get(0) ) { var plot = $.plot('#flotBars2', [flotBarsData2], { colors: ['#649b3a'], series: { bars: { show: true, barWidth: 0.8, align: 'center' } }, xaxis: { mode: 'categories', tickLength: 0 }, grid: { hoverable: true, clickable: true, borderColor: 'rgba(0,0,0,0.1)', borderWidth: 1, labelMargin: 15, backgroundColor: 'transparent' }, tooltip: true, tooltipOpts: { content: '%y', shifts: { x: -10, y: 20 }, defaultTheme: false } }); } })(); }).apply(this, [jQuery]);About other problems, you need to check the JS files that you are including (comparing with our EXAMPLES)
You will see that you don’t need to run theme.js from the admin:
CHECK CONSOLE LOG FOR ERRORS.
Hi,
The integration between both templates front-end and admin is basically a possibility to use elements from the Admin in the Front-End, for example:
https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.htmlSo, you can’t copy parts from the admin html code and use in the front-end, it will work only for the elements.
As you can see in the source of this page: https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.html – these are the files you need to include:
CSS:
<!-- Admin Extension Specific Page Vendor CSS --> <link rel="stylesheet" href="admin/vendor/morris/morris.css" /> <link rel="stylesheet" href="admin/vendor/chartist/chartist.min.css" /> <!-- Admin Extension CSS --> <link rel="stylesheet" href="admin/css/theme-admin-extension.css"> <!-- Admin Extension Skin CSS --> <link rel="stylesheet" href="admin/css/skins/extension.css">
JS:
<!-- Admin Extension --> <script src="admin/js/theme.admin.extension.js"></script> <!-- Admin Extension Examples --> <script src="admin/vendor/jquery.easy-pie-chart/jquery.easypiechart.js"></script> <script src="admin/vendor/flot/jquery.flot.js"></script> <script src="admin/vendor/flot.tooltip/jquery.flot.tooltip.js"></script> <script src="admin/vendor/flot/jquery.flot.pie.js"></script> <script src="admin/vendor/flot/jquery.flot.categories.js"></script> <script src="admin/vendor/flot/jquery.flot.resize.js"></script> <script src="admin/vendor/jquery-sparkline/jquery.sparkline.js"></script> <script src="admin/vendor/raphael/raphael.js"></script> <script src="admin/vendor/morris/morris.js"></script> <script src="admin/vendor/gauge/gauge.js"></script> <script src="admin/vendor/snap.svg/snap.svg.js"></script> <script src="admin/vendor/liquid-meter/liquid.meter.js"></script> <script src="admin/vendor/chartist/chartist.js"></script> <!-- Admin Extension Examples --> <script src="admin/js/examples/examples.charts.js"></script>
Check the sources of the example files: view-source:https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.html
Also, check console log (on Google Chrome: https://www.okler.net/forums/topic/how-to-find-a-javascript-error/ ) to see if all files were included and there’s no JS error.
As explained in this topic: https://www.okler.net/forums/topic/how-to-integrate-porto-admin-extension-on-porto/
Create a folder called “/admin” and copy all files that you will use there.
Then refer in the HTML using that folder path:
Hello, thanks for your purchase. Please make sure you understand how Porto Admin works, it works the same way as all templates under the HTML category on ThemeForest (same as Metronic, for example).
Regarding the integration with the Front-End, here are the complete instructions: http://www.okler.net/forums/topic/how-to-integrate-porto-admin-extension-on-porto/ – the integration adds more features from the admin into the front-end, as shown here:
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-basic.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-advanced.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-wizard.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-code-editor.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-advanced.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-responsive.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-editable.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-ajax.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.htmlOkler Themes
Open the file php/contact-form-recaptcha-v3.php
In that same file, after line 102 you need to add those emails address, using this line:
$mail->AddAddress('[email protected]', 'Person 2'); $mail->AddAddress('[email protected]', 'Person 3'); ....Kind Regards.
Try to change the class contact-form in the HTML.
FROM:
<form class="contact-form custom-form-style-1" action="php/contact-form-recaptcha-v3.php" method="POST">
TO:
<form class="contact-form-recaptcha-v3 custom-form-style-1" action="php/contact-form-recaptcha-v3.php" method="POST">
As explained our support doesn’t offer customizations for the buyer needs, you need to use the method explained in this topic:
You will find that the css applied to that is:
.custom-accordion-style-1 > .card .card-header a.collapsed { background-color: var(--primary-inverse); }So you can change that on custom.css
For spacements you can use the same classes explained in the other topic you opened: https://www.okler.net/forums/topic/space-between-price-tables-on-mobile/
It’s because of that part of the CSS:
Change that to:
body.with-topbar { margin-top: 42px !important; }And add the class “with-topbar” in the BODY tag of the pages you want to have the topbar
<body class="with-topbar">
You can always create a custom class to the items you want to change:
(css/custom.css)
.custom-color { color: #588833 !important; }Change the HEX color the way you want and add the class “custom-color” to the elements.
Add this:
(css/custom.css)
body { margin-top: 42px !important; } html.dark.sticky-header-active #header .header-body { top: 0 !important; }
Hi, you can set the price using the S or DEL tag:
Examples:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_s
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_s
Hi,
You can find examples with “special content” in this page: https://www.okler.net/previews/porto/12.0.0/elements-counters.html
Related topics:
Hello, thanks for your purchase. Please note this is not the Reach version, this is pure HTML (The react version was created by another author: https://themeforest.net/item/porto-react-ecommerce-template/29504170 ).
Send us the URL of your site so we can check that for you.
Thanks.
Hello, you can use the class “text-light” in the STRONG element, it will make the font white.
The color of the circle uses this class:
.process .process-step-circle { border-color: #649b3a; }Again, you can find those classes yourself using this method: https://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/
You can add an extra class in the parallax SECTION, example. add “parallax-contain” after the parallax class and then the css:
@media (min-width: 992px) { .parallax-contain .parallax-background { background-size: contain !important; } }
Hi, you can change the background-size from cover to container, adding this:
@media (min-width: 992px) { .parallax-background { background-size: contain !important; } }
Hello, sorry but I could not understand the question very well, you can add elements after the countdown like this:
<div class="row"> <div class="col text-center"> <div class="countdown" data-plugin-countdown data-plugin-options="{'textDay': 'DAYS', 'textHour': 'HRS', 'textMin': 'MIN', 'textSec': 'SEC', 'date': '2025/01/01 12:00:00', 'numberClass': 'font-weight-extra-bold'}"></div> Button Here... </div> </div>Not sure if it’s what you want.
Hi, to change that color you can add this:
(css/custom.css)
@media (max-width: 991px) { #header .header-nav-main:not(.header-nav-main-mobile-dark) nav > ul > li > a { color: #FFF !important; } }
Example on how to change hover color for the menu:
(css/custom.css)
@media (min-width: 992px) { html.dark #header .header-nav.header-nav-links nav > ul > li:hover > a, html.dark #header .header-nav.header-nav-line nav > ul > li:hover > a { color: #FFF !important; } }
Hello,
Unfortunately that is a bit beyond from what support can offer.
Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs. Please consider that for the next questions.Item support does not include:
– Customization and installation services
– Support for third party software and plug-insSupport for our items includes:
– Responding to questions or problems regarding the item and its features.
– Fixing bugs and reported issues.
– Providing updates to ensure compatibility with new software versions.The definition of support we provide is based on Envato/ThemeForest license.
To change the colors and backgrounds, you need to find the CSS related to it, on Google Chrome press f12 and check the console, more details in this topic: https://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/
You will find all color in the CSS related to it.
Regarding social icons, they are based on FontAwesome, you can find available icons in this link: https://fontawesome.com/icons/tiktok?f=brands&s=solid – for TikTok the class is “fa-tiktok”.
Hello,
1)
(css/custom.css)
p { color: #FFF; }2)
(css/custom.css)
html.dark .testimonial.testimonial-style-3 blockquote { background: #000 !important; } .testimonial.testimonial-style-3 blockquote p { color: #FFF; }CHeck this: https://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/
Hi, I believe you are referring to the datatables on Porto Admin, right?
The js file is js/examples/examples.datatables.default.js
Kind Regards.
Hello, thanks for choosing Porto.
Sorry about that but unfortunatelly we are not accepting customization services at the moment as our team is fully busy.
We recommend post your ideas and find a good freelancer in sites like workana.com
Hello, I tested the HTML you provided and add it dinamically and ran the JS and this was the result:
Tested on original forms-advanced.html file.
So it’s probably related to CSS conflict, can you send me the URL of your site so I can check it for you?
Thanks.
Hi, you just need to run that function after you create that new select, it will apply the function/style.
Similar topic: https://www.okler.net/forums/topic/multi-select-how-to-setassign-values-dynamically-using-ajax/
Hello, can you please send us your URL so we can make the tests and provide the best solution? Thanks.
Hello, to initialize the select2 you need to run this code:
// Select2 (function($) { 'use strict'; if ( $.isFunction($.fn[ 'select2' ]) ) { $(function() { $('[data-plugin-selectTwo]').each(function() { var $this = $( this ), opts = {}; var pluginOptions = $this.data('plugin-options'); if (pluginOptions) opts = pluginOptions; $this.themePluginSelect2(opts); }); }); } }).apply(this, [jQuery]);Make sure the HTML has all the attributes as our examples.
Kind Regards.
Hi, at the moment we have only this 404 demo page available: https://www.okler.net/previews/porto/12.0.0/page-404.html – It’s for the “classic” demo.
Hello, try this css:
(css/custom.css)
@media (max-width: 991px) { #header.header-effect-shrink .header-top { display: none; } }It will look like this:
If the problem persists, send me your URL.
Thanks.
Hello, you can center the image and set it not cover the element, adding this css:
(css/custom.css)
@media (min-width: 992px) { .page-header.page-header-modern.page-header-background { padding: 150px 0 !important; background-size: auto !important; background-repeat: no-repeat !important; background-position: center !important; } }Same thing for the video, limit the width and center it, increading the height:
@media (min-width: 992px) { [data-plugin-video-background] { padding: 250px 0 !important; } [data-plugin-video-background] video { max-width: 1280px !important; } }
Hello, thanks for your purchase.
The default behavior is that if you have href = “#” it will open the sub-items and if you have a link it will redirect to the page.
Example:
Hello, thanks for your purchase.
The Dark version works for the “Classic” demo. https://www.okler.net/previews/porto/12.0.0/feature-layout-dark.html
If you want to use the Dark Version you just need to add the class Dark in the
HTMLtag, like this:
Kind Regards.
Hello, here’s an example of slide with video:
<!-- Carousel Slide 2 --> <div class="owl-item position-relative video overlay overlay-color-dark overlay-show overlay-op-2" data-video-path="video/busy" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;"> <div class="container position-relative z-index-3 h-100"> <div class="row justify-content-center align-items-center h-100"> <div class="col-lg-6 text-center"> <div class="d-flex flex-column align-items-center justify-content-center h-100"> <h1 class="text-color-light font-weight-extra-bold text-10 text-md-12-13 line-height-1 line-height-sm-3 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">HELLO & WELCOME</h1> <p class="text-4-5 text-color-light font-weight-light text-center mb-4" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 30}">Porto is trusted by over 40,000 satisfied users. Learn more about us and our amazing projects.</p> <a href="#" class="btn btn-dark btn-modern font-weight-bold text-3 rounded-0 btn-py-3 btn-px-5 mt-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2300" data-plugin-options="{'minWindowWidth': 0}">GET STARTED NOW!</a> </div> </div> </div> </div> </div>
Hello, that image is set to cover all the element, but the aspect ratio of that image is not correct, the image is 1280px x 500px.
My suggestion is that you use an image that is 1920×350.
You can make the image size set to auto, adding the class bg-size-auto to the SECTION element, but you may need to fix that image size. So it’s not recommended.
To remove that add this:
(css/custom.css):
@media (min-width: 992px) { #header .header-nav-features.header-nav-features-lg-show-border:before, #header .header-nav-features.header-nav-features-lg-show-border:after { display: none; } }
Hi, try to add the carousel using this HTML
<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual mb-0" data-plugin-options="{'nav': false, 'dots': false, 'autoplay': false}" style="height: 100vh;"> <div class="owl-stage-outer"> <div class="owl-stage"> <div class="owl-item position-relative pt-5" style="background-image: url(img/demos/business-consulting/slides/slide-1.jpg); background-size: cover; background-position: center;"> <div class="container position-relative z-index-3 pb-5 h-100"> <div class="row align-items-center pb-5 h-100"> <div class="col"> <h1 class="custom-secondary-font text-color-light font-weight-extra-bold text-8 line-height-1 line-height-sm-3 mb-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">Get your<br><span class="custom-secondary-font text-4-5">Free Consultation</span></h1> <a href="#" class="btn btn-primary btn-modern font-weight-bold text-2 py-3 btn-px-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">GET STARTED</a> </div> </div> </div> </div> </div> </div> </div>
Hello, my suggestion is to add the following css for that:
(css/custom.css)
@media (max-width: 991px) { section.video { height: auto !important; } section.video video { max-height: 450px !important; } }Kind Regards.
Hi, thanks for your purchase.
You will find the HTML files for the demo you want inside the HTML folder.
Example, for Marketing 1 demo – Files are:
demo-marketing-1.html
demo-marketing-1-case-studies.html
etc…Porto comes with all the files as our Preview site (except by the images/videos that are replaced by placeholders).
Clean Up: 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. You can remove that folder.
- /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.
Basically regarding CSS and JS fildes that you need you can just check the HTML files, for example:
CSSs:
JSs:
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 VS Code, 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.
We use and recommend VSCode, which is the most advanced and modern editor in our opinion.
(Note it works the same way for all HTML templates on ThemeForest).
I hope this helps.
Let me know if you have any questions.
Best Regards,
Okler Themes
Yes, make sure to create a new API Key and that the only PHP file to send emails on the server is that one.
Hello, thanks for your purchase.
I suggest to recreate (and delete the old one) the API Key as following: https://www.okler.net/previews/porto/docs/#googlerecaptchav3
Make sure to get a default version of the file php/contact-form-recaptcha-v3.php and change only the email and $secret variables.
Please try that and let me know if the problem persists.
Hello, thanks for your purchase.
Sorry about that problem, looks like the problem is with the lazyload on Chrome, to fix that you can add it without lazy load, like this:
<section class="our-services d-flex p-relative z-index-1 bg-color-light" style="background-image: url(img/demos/business-consulting-2/bg/bg-1.jpg);">
We will make more tests and find out why that’s happening and fix it as soon as possible.
Thanks.
Hello, the delay can be set in the JS, check the “delay” below:
JS:
$(window).on('load', function(){ var delay = 5000; // Time in mili-seconds setTimeout(function(){ $('#openModalLink').trigger('click'); }, delay); });HTML:
<button class="btn btn-modern btn-primary d-none" data-toggle="modal" id="openModalLink" data-target="#defaultModal"> Launch Default Modal </button> <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-light" data-dismiss="modal">Close</button> </div> </div> </div> </div>
The fade class will make the default effect.
More details: https://getbootstrap.com/docs/5.0/components/modal/
Hello,
1) I could not see the problem with the navigation, tested here in a real mobile phone and it worked well. Send us more details.
2) Change the class in the headings from line-height-1 to line-height-7
3) Looks like you added a margin-left in the css:
You need a media query for that:
@media (min-width: 992px) { .image-container { margin-left: 100px; } }
It’s safe to have those values in that PHP file that way, no one without FTP access will have access to those.
Hello, it looks like the server is not accepting to send e-mails with PHP.
I recommend you contact your Web Hosting Provider and ask them to enable that option.
After that you may need to add SMTP details:
(Confirm those with them), using an e-mail of that same domain.
Kind Regards.
Hello, thanks for your purchase.
Unfortunatelly we don’t have a calendar example on Porto but we recommend this plugin: https://fullcalendar.io/demos
Kind Regards.
Hi Adam, thanks for your purchase.
You will find the HTML files for Beauty Salon demo inside the HTML folder.
Files are:
demo-beauty-salon.html
demo-beauty-salon-about.html
etc…Porto comes with all the files as our Preview site (except by the images/videos that are replaced by placeholders).
Clean Up: 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.
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 VS Code, 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.
Best Regards,
Okler Themes
OK, sure, got it, in this case we recommend using Modals, here’s an example:
<a class="" href="#" data-bs-toggle="modal" data-bs-target="#defaultModal"> Launch Default Modal </a> <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
Hello,
1) Sorry, I don’t understand exactly what you mean, if you just want blocks to add texts you may consider cards: https://www.okler.net/previews/porto/12.0.0/elements-cards.html
2) You can use:
<span class="d-block d-lg-inline"></span>in the words that you want the line break, example:<h2 class="font-weight-normal text-center text-6 pb-3"> <strong class="font-weight-extra-bold"><span class="d-block d-lg-inline">Mandag til fredag fra</span></strong> 14:00 til 17:00 <span class="d-block d-lg-inline">dagene er delt inn i</span> <strong class="font-weight-extra-bold">6 kategorier</strong> </h2>
Hello,
1) You can use the same contact form for that, just changing a few things, here’s an example:
<form class="contact-form form-style-5 opacity-10" action="php/contact-form.php" method="POST"> <div class="contact-form-success alert alert-success d-none mt-4"> <strong>Success!</strong> Your message has been sent to us. </div> <div class="contact-form-error alert alert-danger d-none mt-4"> <strong>Error!</strong> There was an error sending your message. <span class="mail-error-message text-1 d-block"></span> </div> <input type="hidden" value="Newsletter" name="subject"> <input type="hidden" value="New User" name="message"> <div class="row"> <div class="form-group col"> <input class="form-control" placeholder="Email Address" name="email" id="email" type="text" /> </div> </div> <div class="row"> <div class="form-group col"> <button class="btn btn-primary btn-rounded btn-px-4 btn-py-2 font-weight-bold" type="submit">SUBSCRIBE</button> </div> </div> </form>
It will work the same way as the contact form.
2) The problem with Gmail is that Google recently changed the security mode (they do that a lot of times and the form will just stop working). To send e-mails with PHP code (PHPMAILER) and Gmail you now need to use OAuth2, which is very very complex to setup, so we do not recommend it anymore, as using an email in the same server as the site will guarantee that it will work without any problems.
Related sites and videos:
https://mailtrap.io/blog/phpmailer-gmail/Generating an OAuth2 secret code:
youtube.com/watch?v=-rcRf7yswfMNote this problem is not actually related to Porto, it will be the same way with any template.
Hello, thanks for your purchase.
Can you please send us the URL of your project so we can check that for you?
Thanks.
Hello, to do that you need to customize the plugin, adding this:
(js/custom.js)
$.extend( theme.PluginCountdown.prototype, { build: function() { if (!($.isFunction($.fn.countTo))) { return this; } var self = this, $el = this.options.wrapper, numberClass = ( self.options.numberClass ) ? ' ' + self.options.numberClass : '', wrapperClass = ( self.options.wrapperClass ) ? ' ' + self.options.wrapperClass : ''; if( self.options.uppercase ) { $el.countdown(self.options.date).on('update.countdown', function(event) { var $this = $(this).html(event.strftime(self.options.insertHTMLbefore + '<span class="minutes'+ wrapperClass +'"><span class="'+ numberClass +'">%M</span> '+ self.options.textMin +'</span> ' + '<span class="seconds'+ wrapperClass +'"><span class="'+ numberClass +'">%S</span> '+ self.options.textSec +'</span> ' + self.options.insertHTMLafter )); }); } else { $el.countdown(self.options.date).on('update.countdown', function(event) { var $this = $(this).html(event.strftime(self.options.insertHTMLbefore + '<span class="minutes'+ wrapperClass +'"><span class="'+ numberClass +'">%M</span> '+ self.options.textMin +'</span> ' + '<span class="seconds'+ wrapperClass +'"><span class="'+ numberClass +'">%S</span> '+ self.options.textSec +'</span> ' + self.options.insertHTMLafter )); }); } return this; } } );
Hello, you can find example of language dropdown in this file:
https://www.okler.net/previews/porto/12.0.0/feature-headers-classic-language-dropdown.htmlNote it’s not functional, there’s just the dropdown.
Unfortunately Porto HTML does not come with anything related to language support, but we recommend this: http://i18njs.com/ – or this one: https://github.com/angrymonkeycloud/CloudLocalization
We hope this helps.
Kind Regards.
HTML:
<div class="input-group mb-3"> <input id="timepicker1" type="text" class="form-control"> <span class="input-group-text" id="timepicker1Clock"><i class="fa-regular fa-clock"></i></span> </div>
JS:
(function($) { $('#timepicker1').timepicker({ disableMousewheel: true, icons: { up: 'fas fa-chevron-up', down: 'fas fa-chevron-down' }, showSeconds: true, showMeridian: false }); $('#timepicker1Clock').on('click', function() { $('#timepicker1').focus(); }); }).apply(this, [jQuery]);
Hello, you can see an example of that in this page:
https://www.okler.net/previews/porto/12.0.0/demo-auto-services-appointment.htmlDocumentation: https://jdewit.github.io/bootstrap-timepicker
HTML:
<input type="text" id="timePickerTest" class="form-control">
JS:
(js/custom.js)(function($) { $('#timePickerTest').timepicker({ disableMousewheel: true, icons: { up: 'fas fa-chevron-up', down: 'fas fa-chevron-down' }, showSeconds: true, showMeridian: false }); }).apply(this, [jQuery]);More options can be found in this link: http://jdewit.github.io/bootstrap-timepicker/
Hello, the tooltips comes from Bootstrap, to customize it you can add this custom css:
(css/custom.css)
.tooltip { --bs-tooltip-bg: #FFEB6C; } .tooltip > .tooltip-inner { padding: 15px; font-size: 1.2em; color: #374D40; }More details: https://getbootstrap.com/docs/5.2/components/tooltips/
Hello, we added those examples in the latest version, 12.0.0.
You can go to downloads page and get the latest version. https://themeforest.net/downloads
Update these files:
js/theme.js
js/theme.init.jsand
css/theme.css
css/theme-elements.cssThis is how you use it:
<div class="anim-up-down-infinite appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0"> <a href="#" class="btn btn-light btn-rounded box-shadow-7 btn-xl border-0 text-3 p-0 btn-with-arrow-solid mb-2"><span class="p-static bg-transparent transform-none"><i class="fa-solid fa-arrow-down text-dark"></i></span></a> </div> <div class="anim-left-right-infinite appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0"> <a href="#" class="btn btn-light btn-rounded box-shadow-7 btn-xl border-0 text-3 p-0 btn-with-arrow-solid mb-2"><span class="p-static bg-transparent transform-none"><i class="fa-solid fa-arrow-right text-dark"></i></span></a> </div>
Hello, in that case you can update only the main files:
js/theme.js
js/theme.init.jsand
css/theme.css
css/theme-elements.css
Hello, thanks for your purchase.
You want to change the delay when you click on the scroll to top element, right?
If so, add this:
(js/custom.js)
$.extend(theme.PluginScrollToTop.defaults, { delay: 5000 });5000 is in miliseconds.
Kind Regards.
Hi, you can change it to 16×9:
<div class="ratio ratio-16x9 col-md-8">
Or even customize it:
<div class="ratio custom-ratio col-md-8">
(css/custom.css)
.custom-ratio:before { padding-top: 47% important; }Change that number the way you want.
Hello,
I’m sorry, but unfortunatelly it’s not possible at the moment as all the header/menu was created to be positioned that way.
We added on Porto 12.0.0 released this week the OffCanvas menu:
Kind Regards.
Hello, thanks for your purchase.
Go to Downloads page: https://themeforest.net/downloads and download the zip file of Porto HTML.
In that zip file you will find all the files you need. Inside the HTML folder.
Kind Regards.
Hello, you can add mas-width/height in that CSS and center the video. I used 800×600, but you can change that f you want. Also added the overlay and the close button.
CSS:
.custom-overlay{ position: fixed; top:0px; left: 0px; height:100%; width:100%; z-index: 99999999; opacity:0.7; display:none; } .custom-close{ position: fixed; top:30px; right:30px; width:24px; height:24px; color: #FFF; font-size: 24px; z-index:99999999; display:none; cursor: pointer; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); } .custom-main-vid-box{ position: fixed; width: 100%; height:100vh; display:none; top:0px; left:0px; z-index: 99999999; } .custom-video-wrapper { position: relative; z-index:99999999; background-color: rgba(0, 0, 0, 0.7); width:100%; height: 100%; margin:0 auto; } .custom-video-wrapper video { position: relative; top: 50%; left: 50%; z-index: 99999999; width: 100% !important; height: 100% !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-width: 40px; border-style: solid; border-color: transparent; transform: translate3d(-50%, -50%, 0); max-width: 800px; max-height: 600px; }
Did you receive the test e-mail I just sent to that email?
If you don’t, you may have to confirm with your host provider what are the SMTP setting to send e-mail with PHP form. They may be blocking that too.
We stopped using the Gmail contact form because the result is not good, very unstable, it works sometimes and only with some emails, so we do not recommend it.
Create that new email in your server with the same domain and use this PHP file: php/contact-form.php
<?php /* Name: Contact Form Written by: Okler Themes - (http://www.okler.net) Theme Version: 11.1.0 */ namespace PortoContactForm; session_cache_limiter('nocache'); header('Expires: ' . gmdate('r', 0)); header('Content-type: application/json'); use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\Exception; require 'php-mailer/src/PHPMailer.php'; require 'php-mailer/src/SMTP.php'; require 'php-mailer/src/Exception.php'; // Step 1 - Enter your email address below. $email = ''; // If the e-mail is not working, change the debug option to 2 | $debug = 2; $debug = 1; // If contact form don't has the subject input change the value of subject here $subject = ( isset($_POST['subject']) ) ? $_POST['subject'] : 'Define subject in php/contact-form.php line 29'; $message = ''; foreach($_POST as $label => $value) { $label = ucwords($label); // Use the commented code below to change label texts. On this example will change "Email" to "Email Address" // if( $label == 'Email' ) { // $label = 'Email Address'; // } // Checkboxes if( is_array($value) ) { // Store new value $value = implode(', ', $value); } $message .= $label.": " . nl2br(htmlspecialchars($value, ENT_QUOTES)) . "<br>"; } $mail = new PHPMailer(true); try { $mail->SMTPDebug = $debug; // Debug Mode // Step 2 (Optional) - If you don't receive the email, try to configure the parameters below: //$mail->IsSMTP(); // Set mailer to use SMTP //$mail->Host = 'mail.yourserver.com'; // Specify main and backup server //$mail->SMTPAuth = true; // Enable SMTP authentication //$mail->Username = '[email protected]'; // SMTP username //$mail->Password = 'secret'; // SMTP password //$mail->SMTPSecure = 'tls'; // Enable encryption, 'ssl' also accepted //$mail->Port = 587; // TCP port to connect to $mail->AddAddress($email); // Add another recipient //$mail->AddAddress('[email protected]', 'Person 2'); // Add a secondary recipient //$mail->AddCC('[email protected]', 'Person 3'); // Add a "Cc" address. //$mail->AddBCC('[email protected]', 'Person 4'); // Add a "Bcc" address. // From - Name $fromName = ( isset($_POST['name']) ) ? $_POST['name'] : 'Website User'; $mail->SetFrom($email, $fromName); // Reply To if( isset($_POST['email']) && !empty($_POST['email']) ) { $mail->AddReplyTo($_POST['email'], $fromName); } $mail->IsHTML(true); // Set email format to HTML $mail->CharSet = 'UTF-8'; $mail->Subject = $subject; $mail->Body = $message; // Step 3 - If you don't want to attach any files, remove that code below if (isset($_FILES['attachment']) && $_FILES['attachment']['error'] == UPLOAD_ERR_OK) { $mail->AddAttachment($_FILES['attachment']['tmp_name'], $_FILES['attachment']['name']); } $mail->Send(); $arrResult = array ('response'=>'success'); } catch (Exception $e) { $arrResult = array ('response'=>'error','errorMessage'=>$e->errorMessage()); } catch (\Exception $e) { $arrResult = array ('response'=>'error','errorMessage'=>$e->getMessage()); } if ($debug == 0) { echo json_encode($arrResult); }Change only line 23. Let me know when you do it so I can debug with the browser dev tools.
Hello, thank you for your purchase.
Regarding the folders/files, you will find all files exactly how you see in our preview site. (except for the images/videos that are replaced by placeholders). A few folders that you may remove if you want:
/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.You can basically check which files you added to the header/footer (js/css) of your site and remove the other ones.
Hope that helps.
Best Regards,
Okler Themes
Hello, the dropdown was not created to work in that area, but you can make a few customizations to make that work. First you need to put it outside the UL, example:
<div class="header-column justify-content-end"> <div class="header-row"> <ul class="header-social-icons social-icons social-icons-clean social-icons-icon-light"> <li class="social-icons-facebook"><a href="https://www.facebook.com/PorterCountyGovernment" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li> <li class="social-icons-youtube"><a href="https://www.youtube.com/@portercountygovernment5550" target="_blank" title="YouTube"><i class="fab fa-youtube"></i></a></li> <li class="social-icons-linkedin"><a href="https://www.linkedin.com/company/porter-county-government" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li> <li><span class="header-nav-features-search-reveal-container"><span class="header-nav-feature header-nav-features-search header-nav-features-search-reveal"><a href="#" title="Search" class="header-nav-features-search-show-icon text-decoration-none"><i class="fas fa-search header-nav-top-icon header-search-custom"></i></a></span></span></li> </ul> <div class="header-nav-features header-nav-features-no-border d-none d-lg-block p-relative p-0 m-0 ms-1 border-0 right-0 bottom-1"> <div class="header-nav-feature header-nav-features-user d-inline-flex mx-2 pe-2 signin" id="headerAccount"> <a href="#" class="header-nav-features-toggle text-light" aria-label=""> <i class="far fa-user"></i> </a> <div class="header-nav-features-dropdown header-nav-features-dropdown-mobile-fixed header-nav-features-dropdown-force-right" id="headerTopUserDropdown"> <div class="signin-form"> <h5 class="text-uppercase mb-4 font-weight-bold text-3">Sign In</h5> <form> <div class="form-group"> <label class="form-label mb-1 text-2 opacity-8">Email address* </label> <input type="email" class="form-control form-control-lg"> </div> <div class="form-group"> <label class="form-label mb-1 text-2 opacity-8">Password *</label> <input type="password" class="form-control form-control-lg"> </div> <div class="row pb-2"> <div class="form-group form-check col-lg-6 ps-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="rememberMeCheck"> <label class="form-label custom-control-label text-2" for="rememberMeCheck">Remember Me</label> </div> </div> <div class="form-group col-lg-6 text-end"> <a class="text-uppercase text-1 font-weight-bold text-color-dark" id="headerRecover" href="#">LOST YOUR PASSWORD?</a> </div> </div> <div class="actions"> <div class="row"> <div class="col d-flex justify-content-end"> <a class="btn btn-primary" href="#">Login</a> </div> </div> </div> <div class="extra-actions"> <p>Don't have an account yet? <a href="#" id="headerSignUp" class="text-uppercase text-1 font-weight-bold text-color-dark">Sign Up</a></p> </div> </form> </div> <div class="signup-form"> <h5 class="text-uppercase mb-4 font-weight-bold text-3">Sign Up</h5> <form> <div class="form-group"> <label class="form-label mb-1 text-2 opacity-8">Email address* </label> <input type="email" class="form-control form-control-lg"> </div> <div class="form-group"> <label class="form-label mb-1 text-2 opacity-8">Password *</label> <input type="password" class="form-control form-control-lg"> </div> <div class="form-group"> <label class="form-label mb-1 text-2 opacity-8">Re-enter Password *</label> <input type="password" class="form-control form-control-lg"> </div> <div class="actions"> <div class="row"> <div class="col d-flex justify-content-end"> <a class="btn btn-primary" href="#">Register</a> </div> </div> </div> <div class="extra-actions"> <p>Already have an account? <a href="#" id="headerSignIn" class="text-uppercase text-1 font-weight-bold text-color-dark">Log In</a></p> </div> </form> </div> <div class="recover-form"> <h5 class="text-uppercase mb-2 pb-1 font-weight-bold text-3">Reset My Password</h5> <p class="text-2 mb-4">Complete the form below to receive an email with the authorization code needed to reset your password.</p> <form> <div class="form-group"> <label class="form-label mb-1 text-2 opacity-8">Email address* </label> <input type="email" class="form-control form-control-lg"> </div> <div class="actions"> <div class="row"> <div class="col d-flex justify-content-end"> <a class="btn btn-primary" href="#">Reset</a> </div> </div> </div> <div class="extra-actions"> <p>Already have an account? <a href="#" id="headerRecoverCancel" class="text-uppercase text-1 font-weight-bold text-color-dark">Log In</a></p> </div> </form> </div> </div> </div> </div> </div> </div>
With that you can start your customization.
Hello, thanks for your purchase.
I’m sorry but I could not understand the question very well, can you please send more details?
Thanks.
Hello, I’m not sure if I understand the issue very well, but here’s my suggestion:
<div class="header-column justify-content-end"> <div class="header-row"> <ul class="header-social-icons social-icons social-icons-clean"> <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a></li> <li class="social-icons-x"><a href="http://www.x.com/" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a></li> <li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a></li> <li><span class="header-nav-features-search-reveal-container"><span class="header-nav-feature header-nav-features-search header-nav-features-search-reveal"><a href="#" class="header-nav-features-search-show-icon text-decoration-none"><i class="fas fa-search header-nav-top-icon header-search-custom"></i></a></span></span></li> <li><a href="#" class="header-nav-features-toggle text-decoration-none"><i class="far fa-user"></i></a></li> </ul> </div> </div>
Change from DIV to SPAN, and remove d-inline-flex.
You can also remove the margin.
If you want to make items up/down you can add these classes to elements:
“p-relative top-5”, or “p-relative bottom-5”
* 5 is an example, it can be from 1 to 10.
Hope that helps.
Hello,
Regarding the folders/files, you will find all files exactly how you see in our preview site. (except for the images/videos that are replaced by placeholders). A few folders that you may remove if you want:
/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.You can basically check which files you added to the header/footer (js/css) of your site and remove the other ones.
Hope that helps.
Best Regards,
Okler Themes
Hi, to add overlay with skin color you can do this:
<div class="overlay overlay-show overlay-op-8 overlay-primary"> Image Here... </div>
* overlay-op-8 is 80% of opacity, you can change that number from 1 to 9
* overlay-primary is the color based on the skin you generated.Kind Regards.
Hello, sorry about that issue, try to add this css:
(css/custom.css)
@media (max-width: 991px) { .highlight-scribble-1 path { stroke-dasharray: none; } }
Hi, by default Bootstrap doesn’t have an option to show 5 items side by side, but we added it to Porto, so you can set 5 columns this way:
<div class="row"> <div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5"> 1 </div> <div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5"> 2 </div> <div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5"> 3 </div> <div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5"> 4 </div> <div class="col-sm-6 col-md-4 col-lg-3 col-xl-1-5"> 5 </div> </div>
Hello, you can just add a class to it and make a custom css:
1) Add class “custom-img-1” on that img.
2) Add this:
(css/custom.css)
.custom-img-1 { position: relative; top: -10px; }
Hello, you can adjust the padding of the items in a specific resolution, adding this:
(css/custom.css)
@media(min-width: 992px) and (max-width: 1200px) { #header .header-nav-main nav > ul > li > a { padding: 10px !important; } }It will avoid the line break.
Hi, the items that are not visible on mobile have these classes:
If you remove those it will appear.
Kind Regards.
Hi, we use PHP for the contact form, it’s ready to work with PHP 8, if you are using the standard contact form only from Porto it will work without any problem and you can ask them to upgrade PHP (that should be done in their side).
Kind Regards.
Hello, the name of the file is not correct (must be favicon.ico), please check these references:
https://www.w3schools.com/html/html_favicon.asp
https://realfavicongenerator.net/
Hi, you can get the sample form in this page:
https://www.okler.net/previews/porto/10.2.0/elements-forms-contact-recaptcha-v3.htmlInstructions: https://www.okler.net/previews/porto/docs/#googlerecaptchav3
Hello, looks like your server is blocking the external verification (to Google Recaptcha), it’s limited and the settings can’t be changed.
Ask your server administrator (host provider), to enable allow_url_fopen – Set that to “on”.
Then check this page: http://bimtech.com.tr/php/phpversion.php
It should “On”
Not sure why your server is limited to that, it works for 99% of the servers with this command on PHP: ini_set(‘allow_url_fopen’, true);
Hello, we only have one example of that, on Demo SEO.
https://www.okler.net/previews/porto/10.2.0/demo-seo.html
Check the footer where it says “Request a Quote”, that’s a form popup.
Can you confirm that you entered the $secret variable in the PHP file?
$secret = 'YOUR_RECAPTCHA_SECRET_KEY';
Looks like the validation secret is not correct.
Make sure you generated it for Recaptcha v3, as this: https://www.okler.net/previews/porto/docs/#googlerecaptchav3
Try to remove that key and create a new one, updating the HTML and PHP file.
Change the class of the form:
<form id="contactForm" class="contact-form" action="php/contact-form-recaptcha-v3.php" method="POST" novalidate="novalidate">
TO:
<form class="contact-form-recaptcha-v3" action="php/contact-form-recaptcha-v3.php" method="POST" novalidate="novalidate">
And try again.
Hi, it’s related to the icon, if you’re going to use png instead of svg you can change
FROM:
<img width="75" height="75" src="images/lv-cables.png" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />TO:
<img width="75" height="75" src="images/lv-cables.png" alt="" />
Do that in all icons that are png instead of SVG.
Also, make sure there’s no space at the begging of the file.
https://stackoverflow.com/questions/21433086/fatal-error-namespace-declaration-statement-has-to-be-the-very-first-statement
https://stackoverflow.com/questions/31513201/fatal-error-namespace-declaration-statement-has-to-be-the-very-first-statement
Hello, thanks for your purchase.
1) Get the original PHP file: php/contact-form-recaptcha-v3.php:
2) Change only lines:
– Line 27: https://www.okler.net/previews/porto/docs/assets/img/recaptcha-6.jpg
– Line 56: https://www.okler.net/previews/porto/docs/assets/img/recaptcha-7.jpg
1) Get the original PHP file: php/contact-form-recaptcha-v3.php:
2) Change only lines:
– Line 27: https://www.okler.net/previews/porto/docs/assets/img/recaptcha-6.jpg
– Line 56: https://www.okler.net/previews/porto/docs/assets/img/recaptcha-7.jpg
Hi, were you able to check the logs to see the error description?
For most of the servers there are a folder calles “logs” in the root of your domain, and a file named “.php.error.log”, you may have to access it with FTP.Or you can contact your server administrator support so they can provide that for you.
Hi,
Add this at the top of the PHP file:
<?php ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL);It will make the PHP show the errors. You can also check the server log file to see the error message.
Looks like a server issue.
Kind Regards
Hello, it’s showing an error 500 (server related) on the response:
Can you check server logs and see which line is wrong? You may have to contact the server administrator (host provider).
Hello, try to add the class “mb-4” in the DIVs of each images.
https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding
Kind Regards.
Did you receive the message from the contact form?
Make sure that $debug = 0 on php file.
You only need to set $secret and $email on that file.
Hello, theme.js is where we have all the basic functions that are used on Porto, custom plugins that we created and some of them have dependencies to others, like Carousel (OwlCarousel). You can remove those that you don’t use, but as you said you will have to do that again when you receive an update, unfortunatelly there’s not way to do that automatically. The only way would be having multiple files so you could just not included them, but it would generate much complexity for the theme. Also, that file compressed have a little more than 100kb.
Kind Regards.
You just need to add a DIV with the lightbox class this way:
<div class="lightbox" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}"> <div class="owl-carousel owl-theme full-width" data-plugin-options="{'items': 5, 'loop': false, 'nav': true, 'dots': false}"> <div> <a href="img/projects/project.jpg" aria-label=""> <span class="thumb-info thumb-info-centered-info thumb-info-no-borders"> <span class="thumb-info-wrapper"> <img src="img/projects/project.jpg" class="img-fluid" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Project Title</span> <span class="thumb-info-type">Project Type</span> </span> <span class="thumb-info-action"> <span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span> </span> </span> </span> </a> </div> </div> </div>
Hi, OK, sure, I got it now. This is actually the first time someone complains about that in all these years 🙂
To change that you can simply remove the max-height property of that navigation on mobile, so it will go along the screen and use the same scrollbars from the browsers (not only in that area).
Add this:
(css/custom.css)
@media (max-width: 991px) { #header .header-nav-main nav { max-height: none !important; } }Kind Regards.
Hello, it’s for the logo on the header, for the logo on content you can remove the padding, using just “w-auto mb-2”
“ps-2” is the class for padding. https://getbootstrap.com/docs/5.3/utilities/spacing/#margin-and-padding
Hello, thanks for your purchase.
Sorry but I could not see that problem, when I open that menu I see this:
Can you please provide some more details?
Thanks.
Hello, sorry but we don’t have any examples with Vimeo, but you can add the iframe using this HTML:
<iframe class="owl-video-frame" src="https://player.vimeo.com/video/90617432?autoplay=1&loop=1&muted=1&controls=0" frameborder="0" allowfullscreen=""></iframe>
You may have to make some changes on it to look the way you want. Unfortunately it’s not available on Porto right now.
Hello, thanks for your purchase and sorry about that issue. You are right, it was missing the “expire” value, so please open the file js/theme.js and add these values:
Please try that and let me know if you need further assistance.
Best Regards,
Okler Themes
Hello, thanks for your purchase.
I’m sorry but I could not understand the question, can you please send more details? You can find a lot of slider examples that are included on Porto, with that you can start your customization changing texts/images.
Kind Regards.
Hello, thanks for your purchase, looks like you purchased the WordPress version too, 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://portotheme.com/support/?envato_item_id=9207399Best Regards,
Okler Themes
Hi, you can just remove the “checked” attribute and change the active class:
Kind Regards.
Okler Themes
It’s disabled by default for better performance but you can enable it with this code:
(js/custom.js)
$.extend(theme.PluginParallax.defaults, { enableOnMobile: true });
Hi,
1) Remove the JS code I sent before.
2) You’re going to need an extra plugin, try this:
(js/custom.js)
!function(factory){"function"==typeof define&&define.amd&&define.amd.jQuery?define(["jquery"],factory):factory("undefined"!=typeof module&&module.exports?require("jquery"):jQuery)}(function($){"use strict";function init(options){return!options||void 0!==options.allowPageScroll||void 0===options.swipe&&void 0===options.swipeStatus||(options.allowPageScroll=NONE),void 0!==options.click&&void 0===options.tap&&(options.tap=options.click),options||(options={}),options=$.extend({},$.fn.swipe.defaults,options),this.each(function(){var $this=$(this),plugin=$this.data(PLUGIN_NS);plugin||(plugin=new TouchSwipe(this,options),$this.data(PLUGIN_NS,plugin))})}function TouchSwipe(element,options){function touchStart(jqEvent){if(!(getTouchInProgress()||$(jqEvent.target).closest(options.excludedElements,$element).length>0)){var event=jqEvent.originalEvent?jqEvent.originalEvent:jqEvent;if(!event.pointerType||"mouse"!=event.pointerType||0!=options.fallbackToMouseEvents){var ret,touches=event.touches,evt=touches?touches[0]:event;return phase=PHASE_START,touches?fingerCount=touches.length:options.preventDefaultEvents!==!1&&jqEvent.preventDefault(),distance=0,direction=null,currentDirection=null,pinchDirection=null,duration=0,startTouchesDistance=0,endTouchesDistance=0,pinchZoom=1,pinchDistance=0,maximumsMap=createMaximumsData(),cancelMultiFingerRelease(),createFingerData(0,evt),!touches||fingerCount===options.fingers||options.fingers===ALL_FINGERS||hasPinches()?(startTime=getTimeStamp(),2==fingerCount&&(createFingerData(1,touches[1]),startTouchesDistance=endTouchesDistance=calculateTouchesDistance(fingerData[0].start,fingerData[1].start)),(options.swipeStatus||options.pinchStatus)&&(ret=triggerHandler(event,phase))):ret=!1,ret===!1?(phase=PHASE_CANCEL,triggerHandler(event,phase),ret):(options.hold&&(holdTimeout=setTimeout($.proxy(function(){$element.trigger("hold",[event.target]),options.hold&&(ret=options.hold.call($element,event,event.target))},this),options.longTapThreshold)),setTouchInProgress(!0),null)}}}function touchMove(jqEvent){var event=jqEvent.originalEvent?jqEvent.originalEvent:jqEvent;if(phase!==PHASE_END&&phase!==PHASE_CANCEL&&!inMultiFingerRelease()){var ret,touches=event.touches,evt=touches?touches[0]:event,currentFinger=updateFingerData(evt);if(endTime=getTimeStamp(),touches&&(fingerCount=touches.length),options.hold&&clearTimeout(holdTimeout),phase=PHASE_MOVE,2==fingerCount&&(0==startTouchesDistance?(createFingerData(1,touches[1]),startTouchesDistance=endTouchesDistance=calculateTouchesDistance(fingerData[0].start,fingerData[1].start)):(updateFingerData(touches[1]),endTouchesDistance=calculateTouchesDistance(fingerData[0].end,fingerData[1].end),pinchDirection=calculatePinchDirection(fingerData[0].end,fingerData[1].end)),pinchZoom=calculatePinchZoom(startTouchesDistance,endTouchesDistance),pinchDistance=Math.abs(startTouchesDistance-endTouchesDistance)),fingerCount===options.fingers||options.fingers===ALL_FINGERS||!touches||hasPinches()){if(direction=calculateDirection(currentFinger.start,currentFinger.end),currentDirection=calculateDirection(currentFinger.last,currentFinger.end),validateDefaultEvent(jqEvent,currentDirection),distance=calculateDistance(currentFinger.start,currentFinger.end),duration=calculateDuration(),setMaxDistance(direction,distance),ret=triggerHandler(event,phase),!options.triggerOnTouchEnd||options.triggerOnTouchLeave){var inBounds=!0;if(options.triggerOnTouchLeave){var bounds=getbounds(this);inBounds=isInBounds(currentFinger.end,bounds)}!options.triggerOnTouchEnd&&inBounds?phase=getNextPhase(PHASE_MOVE):options.triggerOnTouchLeave&&!inBounds&&(phase=getNextPhase(PHASE_END)),phase!=PHASE_CANCEL&&phase!=PHASE_END||triggerHandler(event,phase)}}else phase=PHASE_CANCEL,triggerHandler(event,phase);ret===!1&&(phase=PHASE_CANCEL,triggerHandler(event,phase))}}function touchEnd(jqEvent){var event=jqEvent.originalEvent?jqEvent.originalEvent:jqEvent,touches=event.touches;if(touches){if(touches.length&&!inMultiFingerRelease())return startMultiFingerRelease(event),!0;if(touches.length&&inMultiFingerRelease())return!0}return inMultiFingerRelease()&&(fingerCount=fingerCountAtRelease),endTime=getTimeStamp(),duration=calculateDuration(),didSwipeBackToCancel()||!validateSwipeDistance()?(phase=PHASE_CANCEL,triggerHandler(event,phase)):options.triggerOnTouchEnd||options.triggerOnTouchEnd===!1&&phase===PHASE_MOVE?(options.preventDefaultEvents!==!1&&jqEvent.preventDefault(),phase=PHASE_END,triggerHandler(event,phase)):!options.triggerOnTouchEnd&&hasTap()?(phase=PHASE_END,triggerHandlerForGesture(event,phase,TAP)):phase===PHASE_MOVE&&(phase=PHASE_CANCEL,triggerHandler(event,phase)),setTouchInProgress(!1),null}function touchCancel(){fingerCount=0,endTime=0,startTime=0,startTouchesDistance=0,endTouchesDistance=0,pinchZoom=1,cancelMultiFingerRelease(),setTouchInProgress(!1)}function touchLeave(jqEvent){var event=jqEvent.originalEvent?jqEvent.originalEvent:jqEvent;options.triggerOnTouchLeave&&(phase=getNextPhase(PHASE_END),triggerHandler(event,phase))}function removeListeners(){$element.unbind(START_EV,touchStart),$element.unbind(CANCEL_EV,touchCancel),$element.unbind(MOVE_EV,touchMove),$element.unbind(END_EV,touchEnd),LEAVE_EV&&$element.unbind(LEAVE_EV,touchLeave),setTouchInProgress(!1)}function getNextPhase(currentPhase){var nextPhase=currentPhase,validTime=validateSwipeTime(),validDistance=validateSwipeDistance(),didCancel=didSwipeBackToCancel();return!validTime||didCancel?nextPhase=PHASE_CANCEL:!validDistance||currentPhase!=PHASE_MOVE||options.triggerOnTouchEnd&&!options.triggerOnTouchLeave?!validDistance&¤tPhase==PHASE_END&&options.triggerOnTouchLeave&&(nextPhase=PHASE_CANCEL):nextPhase=PHASE_END,nextPhase}function triggerHandler(event,phase){var ret,touches=event.touches;return(didSwipe()||hasSwipes())&&(ret=triggerHandlerForGesture(event,phase,SWIPE)),(didPinch()||hasPinches())&&ret!==!1&&(ret=triggerHandlerForGesture(event,phase,PINCH)),didDoubleTap()&&ret!==!1?ret=triggerHandlerForGesture(event,phase,DOUBLE_TAP):didLongTap()&&ret!==!1?ret=triggerHandlerForGesture(event,phase,LONG_TAP):didTap()&&ret!==!1&&(ret=triggerHandlerForGesture(event,phase,TAP)),phase===PHASE_CANCEL&&touchCancel(event),phase===PHASE_END&&(touches?touches.length||touchCancel(event):touchCancel(event)),ret}function triggerHandlerForGesture(event,phase,gesture){var ret;if(gesture==SWIPE){if($element.trigger("swipeStatus",[phase,direction||null,distance||0,duration||0,fingerCount,fingerData,currentDirection]),options.swipeStatus&&(ret=options.swipeStatus.call($element,event,phase,direction||null,distance||0,duration||0,fingerCount,fingerData,currentDirection),ret===!1))return!1;if(phase==PHASE_END&&validateSwipe()){if(clearTimeout(singleTapTimeout),clearTimeout(holdTimeout),$element.trigger("swipe",[direction,distance,duration,fingerCount,fingerData,currentDirection]),options.swipe&&(ret=options.swipe.call($element,event,direction,distance,duration,fingerCount,fingerData,currentDirection),ret===!1))return!1;switch(direction){case LEFT:$element.trigger("swipeLeft",[direction,distance,duration,fingerCount,fingerData,currentDirection]),options.swipeLeft&&(ret=options.swipeLeft.call($element,event,direction,distance,duration,fingerCount,fingerData,currentDirection));break;case RIGHT:$element.trigger("swipeRight",[direction,distance,duration,fingerCount,fingerData,currentDirection]),options.swipeRight&&(ret=options.swipeRight.call($element,event,direction,distance,duration,fingerCount,fingerData,currentDirection));break;case UP:$element.trigger("swipeUp",[direction,distance,duration,fingerCount,fingerData,currentDirection]),options.swipeUp&&(ret=options.swipeUp.call($element,event,direction,distance,duration,fingerCount,fingerData,currentDirection));break;case DOWN:$element.trigger("swipeDown",[direction,distance,duration,fingerCount,fingerData,currentDirection]),options.swipeDown&&(ret=options.swipeDown.call($element,event,direction,distance,duration,fingerCount,fingerData,currentDirection))}}}if(gesture==PINCH){if($element.trigger("pinchStatus",[phase,pinchDirection||null,pinchDistance||0,duration||0,fingerCount,pinchZoom,fingerData]),options.pinchStatus&&(ret=options.pinchStatus.call($element,event,phase,pinchDirection||null,pinchDistance||0,duration||0,fingerCount,pinchZoom,fingerData),ret===!1))return!1;if(phase==PHASE_END&&validatePinch())switch(pinchDirection){case IN:$element.trigger("pinchIn",[pinchDirection||null,pinchDistance||0,duration||0,fingerCount,pinchZoom,fingerData]),options.pinchIn&&(ret=options.pinchIn.call($element,event,pinchDirection||null,pinchDistance||0,duration||0,fingerCount,pinchZoom,fingerData));break;case OUT:$element.trigger("pinchOut",[pinchDirection||null,pinchDistance||0,duration||0,fingerCount,pinchZoom,fingerData]),options.pinchOut&&(ret=options.pinchOut.call($element,event,pinchDirection||null,pinchDistance||0,duration||0,fingerCount,pinchZoom,fingerData))}}return gesture==TAP?phase!==PHASE_CANCEL&&phase!==PHASE_END||(clearTimeout(singleTapTimeout),clearTimeout(holdTimeout),hasDoubleTap()&&!inDoubleTap()?(doubleTapStartTime=getTimeStamp(),singleTapTimeout=setTimeout($.proxy(function(){doubleTapStartTime=null,$element.trigger("tap",[event.target]),options.tap&&(ret=options.tap.call($element,event,event.target))},this),options.doubleTapThreshold)):(doubleTapStartTime=null,$element.trigger("tap",[event.target]),options.tap&&(ret=options.tap.call($element,event,event.target)))):gesture==DOUBLE_TAP?phase!==PHASE_CANCEL&&phase!==PHASE_END||(clearTimeout(singleTapTimeout),clearTimeout(holdTimeout),doubleTapStartTime=null,$element.trigger("doubletap",[event.target]),options.doubleTap&&(ret=options.doubleTap.call($element,event,event.target))):gesture==LONG_TAP&&(phase!==PHASE_CANCEL&&phase!==PHASE_END||(clearTimeout(singleTapTimeout),doubleTapStartTime=null,$element.trigger("longtap",[event.target]),options.longTap&&(ret=options.longTap.call($element,event,event.target)))),ret}function validateSwipeDistance(){var valid=!0;return null!==options.threshold&&(valid=distance>=options.threshold),valid}function didSwipeBackToCancel(){var cancelled=!1;return null!==options.cancelThreshold&&null!==direction&&(cancelled=getMaxDistance(direction)-distance>=options.cancelThreshold),cancelled}function validatePinchDistance(){return null===options.pinchThreshold||pinchDistance>=options.pinchThreshold}function validateSwipeTime(){var result;return result=!options.maxTimeThreshold||!(duration>=options.maxTimeThreshold)}function validateDefaultEvent(jqEvent,direction){if(options.preventDefaultEvents!==!1)if(options.allowPageScroll===NONE)jqEvent.preventDefault();else{var auto=options.allowPageScroll===AUTO;switch(direction){case LEFT:(options.swipeLeft&&auto||!auto&&options.allowPageScroll!=HORIZONTAL)&&jqEvent.preventDefault();break;case RIGHT:(options.swipeRight&&auto||!auto&&options.allowPageScroll!=HORIZONTAL)&&jqEvent.preventDefault();break;case UP:(options.swipeUp&&auto||!auto&&options.allowPageScroll!=VERTICAL)&&jqEvent.preventDefault();break;case DOWN:(options.swipeDown&&auto||!auto&&options.allowPageScroll!=VERTICAL)&&jqEvent.preventDefault();break;case NONE:}}}function validatePinch(){var hasCorrectFingerCount=validateFingers(),hasEndPoint=validateEndPoint(),hasCorrectDistance=validatePinchDistance();return hasCorrectFingerCount&&hasEndPoint&&hasCorrectDistance}function hasPinches(){return!!(options.pinchStatus||options.pinchIn||options.pinchOut)}function didPinch(){return!(!validatePinch()||!hasPinches())}function validateSwipe(){var hasValidTime=validateSwipeTime(),hasValidDistance=validateSwipeDistance(),hasCorrectFingerCount=validateFingers(),hasEndPoint=validateEndPoint(),didCancel=didSwipeBackToCancel(),valid=!didCancel&&hasEndPoint&&hasCorrectFingerCount&&hasValidDistance&&hasValidTime;return valid}function hasSwipes(){return!!(options.swipe||options.swipeStatus||options.swipeLeft||options.swipeRight||options.swipeUp||options.swipeDown)}function didSwipe(){return!(!validateSwipe()||!hasSwipes())}function validateFingers(){return fingerCount===options.fingers||options.fingers===ALL_FINGERS||!SUPPORTS_TOUCH}function validateEndPoint(){return 0!==fingerData[0].end.x}function hasTap(){return!!options.tap}function hasDoubleTap(){return!!options.doubleTap}function hasLongTap(){return!!options.longTap}function validateDoubleTap(){if(null==doubleTapStartTime)return!1;var now=getTimeStamp();return hasDoubleTap()&&now-doubleTapStartTime<=options.doubleTapThreshold}function inDoubleTap(){return validateDoubleTap()}function validateTap(){return(1===fingerCount||!SUPPORTS_TOUCH)&&(isNaN(distance)||distance<options.threshold)}function validateLongTap(){return duration>options.longTapThreshold&&distance<DOUBLE_TAP_THRESHOLD}function didTap(){return!(!validateTap()||!hasTap())}function didDoubleTap(){return!(!validateDoubleTap()||!hasDoubleTap())}function didLongTap(){return!(!validateLongTap()||!hasLongTap())}function startMultiFingerRelease(event){previousTouchEndTime=getTimeStamp(),fingerCountAtRelease=event.touches.length+1}function cancelMultiFingerRelease(){previousTouchEndTime=0,fingerCountAtRelease=0}function inMultiFingerRelease(){var withinThreshold=!1;if(previousTouchEndTime){var diff=getTimeStamp()-previousTouchEndTime;diff<=options.fingerReleaseThreshold&&(withinThreshold=!0)}return withinThreshold}function getTouchInProgress(){return!($element.data(PLUGIN_NS+"_intouch")!==!0)}function setTouchInProgress(val){$element&&(val===!0?($element.bind(MOVE_EV,touchMove),$element.bind(END_EV,touchEnd),LEAVE_EV&&$element.bind(LEAVE_EV,touchLeave)):($element.unbind(MOVE_EV,touchMove,!1),$element.unbind(END_EV,touchEnd,!1),LEAVE_EV&&$element.unbind(LEAVE_EV,touchLeave,!1)),$element.data(PLUGIN_NS+"_intouch",val===!0))}function createFingerData(id,evt){var f={start:{x:0,y:0},last:{x:0,y:0},end:{x:0,y:0}};return f.start.x=f.last.x=f.end.x=evt.pageX||evt.clientX,f.start.y=f.last.y=f.end.y=evt.pageY||evt.clientY,fingerData[id]=f,f}function updateFingerData(evt){var id=void 0!==evt.identifier?evt.identifier:0,f=getFingerData(id);return null===f&&(f=createFingerData(id,evt)),f.last.x=f.end.x,f.last.y=f.end.y,f.end.x=evt.pageX||evt.clientX,f.end.y=evt.pageY||evt.clientY,f}function getFingerData(id){return fingerData[id]||null}function setMaxDistance(direction,distance){direction!=NONE&&(distance=Math.max(distance,getMaxDistance(direction)),maximumsMap[direction].distance=distance)}function getMaxDistance(direction){if(maximumsMap[direction])return maximumsMap[direction].distance}function createMaximumsData(){var maxData={};return maxData[LEFT]=createMaximumVO(LEFT),maxData[RIGHT]=createMaximumVO(RIGHT),maxData[UP]=createMaximumVO(UP),maxData[DOWN]=createMaximumVO(DOWN),maxData}function createMaximumVO(dir){return{direction:dir,distance:0}}function calculateDuration(){return endTime-startTime}function calculateTouchesDistance(startPoint,endPoint){var diffX=Math.abs(startPoint.x-endPoint.x),diffY=Math.abs(startPoint.y-endPoint.y);return Math.round(Math.sqrt(diffX*diffX+diffY*diffY))}function calculatePinchZoom(startDistance,endDistance){var percent=endDistance/startDistance*1;return percent.toFixed(2)}function calculatePinchDirection(){return pinchZoom<1?OUT:IN}function calculateDistance(startPoint,endPoint){return Math.round(Math.sqrt(Math.pow(endPoint.x-startPoint.x,2)+Math.pow(endPoint.y-startPoint.y,2)))}function calculateAngle(startPoint,endPoint){var x=startPoint.x-endPoint.x,y=endPoint.y-startPoint.y,r=Math.atan2(y,x),angle=Math.round(180*r/Math.PI);return angle<0&&(angle=360-Math.abs(angle)),angle}function calculateDirection(startPoint,endPoint){if(comparePoints(startPoint,endPoint))return NONE;var angle=calculateAngle(startPoint,endPoint);return angle<=45&&angle>=0?LEFT:angle<=360&&angle>=315?LEFT:angle>=135&&angle<=225?RIGHT:angle>45&&angle<135?DOWN:UP}function getTimeStamp(){var now=new Date;return now.getTime()}function getbounds(el){el=$(el);var offset=el.offset(),bounds={left:offset.left,right:offset.left+el.outerWidth(),top:offset.top,bottom:offset.top+el.outerHeight()};return bounds}function isInBounds(point,bounds){return point.x>bounds.left&&point.x<bounds.right&&point.y>bounds.top&&point.y<bounds.bottom}function comparePoints(pointA,pointB){return pointA.x==pointB.x&&pointA.y==pointB.y}var options=$.extend({},options),useTouchEvents=SUPPORTS_TOUCH||SUPPORTS_POINTER||!options.fallbackToMouseEvents,START_EV=useTouchEvents?SUPPORTS_POINTER?SUPPORTS_POINTER_IE10?"MSPointerDown":"pointerdown":"touchstart":"mousedown",MOVE_EV=useTouchEvents?SUPPORTS_POINTER?SUPPORTS_POINTER_IE10?"MSPointerMove":"pointermove":"touchmove":"mousemove",END_EV=useTouchEvents?SUPPORTS_POINTER?SUPPORTS_POINTER_IE10?"MSPointerUp":"pointerup":"touchend":"mouseup",LEAVE_EV=useTouchEvents?SUPPORTS_POINTER?"mouseleave":null:"mouseleave",CANCEL_EV=SUPPORTS_POINTER?SUPPORTS_POINTER_IE10?"MSPointerCancel":"pointercancel":"touchcancel",distance=0,direction=null,currentDirection=null,duration=0,startTouchesDistance=0,endTouchesDistance=0,pinchZoom=1,pinchDistance=0,pinchDirection=0,maximumsMap=null,$element=$(element),phase="start",fingerCount=0,fingerData={},startTime=0,endTime=0,previousTouchEndTime=0,fingerCountAtRelease=0,doubleTapStartTime=0,singleTapTimeout=null,holdTimeout=null;try{$element.bind(START_EV,touchStart),$element.bind(CANCEL_EV,touchCancel)}catch(e){$.error("events not supported "+START_EV+","+CANCEL_EV+" on jQuery.swipe")}this.enable=function(){return this.disable(),$element.bind(START_EV,touchStart),$element.bind(CANCEL_EV,touchCancel),$element},this.disable=function(){return removeListeners(),$element},this.destroy=function(){removeListeners(),$element.data(PLUGIN_NS,null),$element=null},this.option=function(property,value){if("object"==typeof property)options=$.extend(options,property);else if(void 0!==options[property]){if(void 0===value)return options[property];options[property]=value}else{if(!property)return options;$.error("Option "+property+" does not exist on jQuery.swipe.options")}return null}}var VERSION="1.6.18",LEFT="left",RIGHT="right",UP="up",DOWN="down",IN="in",OUT="out",NONE="none",AUTO="auto",SWIPE="swipe",PINCH="pinch",TAP="tap",DOUBLE_TAP="doubletap",LONG_TAP="longtap",HORIZONTAL="horizontal",VERTICAL="vertical",ALL_FINGERS="all",DOUBLE_TAP_THRESHOLD=10,PHASE_START="start",PHASE_MOVE="move",PHASE_END="end",PHASE_CANCEL="cancel",SUPPORTS_TOUCH="ontouchstart"in window,SUPPORTS_POINTER_IE10=window.navigator.msPointerEnabled&&!window.PointerEvent&&!SUPPORTS_TOUCH,SUPPORTS_POINTER=(window.PointerEvent||window.navigator.msPointerEnabled)&&!SUPPORTS_TOUCH,PLUGIN_NS="TouchSwipe",defaults={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,hold:null,triggerOnTouchEnd:!0,triggerOnTouchLeave:!1,allowPageScroll:"auto",fallbackToMouseEvents:!0,excludedElements:".noSwipe",preventDefaultEvents:!0};$.fn.swipe=function(method){var $this=$(this),plugin=$this.data(PLUGIN_NS);if(plugin&&"string"==typeof method){if(plugin[method])return plugin[method].apply(plugin,Array.prototype.slice.call(arguments,1));$.error("Method "+method+" does not exist on jQuery.swipe")}else if(plugin&&"object"==typeof method)plugin.option.apply(plugin,arguments);else if(!(plugin||"object"!=typeof method&&method))return init.apply(this,arguments);return $this},$.fn.swipe.version=VERSION,$.fn.swipe.defaults=defaults,$.fn.swipe.phases={PHASE_START:PHASE_START,PHASE_MOVE:PHASE_MOVE,PHASE_END:PHASE_END,PHASE_CANCEL:PHASE_CANCEL},$.fn.swipe.directions={LEFT:LEFT,RIGHT:RIGHT,UP:UP,DOWN:DOWN,IN:IN,OUT:OUT},$.fn.swipe.pageScroll={NONE:NONE,HORIZONTAL:HORIZONTAL,VERTICAL:VERTICAL,AUTO:AUTO},$.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,FOUR:4,FIVE:5,ALL:ALL_FINGERS}}); $(function() { $(".owl-carousel-light").swipe( { swipe:function(event, direction, distance, duration, fingerCount, fingerData) { if(direction == 'right') { $(this).find('.owl-prev').trigger('click'); } else if(direction == 'left') { $(this).find('.owl-next').trigger('click'); } }, allowPageScroll: "vertical" }); });
Hello, it’s because the default parallax script won’t work with a fixed css for it (bottom fixed to 0), test it with the parallax disabled to see how it works:
.parallax-custom-1 .parallax-background { transform: none !important; }
So, in that case you can create a custom css for it with, like this:
Add a class: “parallax-custom-1”
<section class="parallax parallax-custom-1 section section-text-light section-parallax section-center mt-0 mb-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'horizontalPosition': '50%', 'offset': 0, 'parallaxDirection': 'top', 'parallaxHeight': '180%', 'startOffset': 7, 'transitionDuration': '200ms', 'cssValueStart': 40, 'cssValueEnd': 100}" data-image-src="images/backgrounds/8.jpg">(css/custom.css)
.parallax-custom-1 .parallax-background { top: auto !important; bottom: 0 !important; }Hope that helps.
Hello, unfortunatelly not, but you can check the data-plugin-options to see the available changes you can make in the parallax and see if it works the way you want:
<section id="" class="parallax section section-text-light section-parallax section-center mt-0 mb-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'horizontalPosition': '50%', 'offset': 0, 'parallaxDirection': 'top', 'parallaxHeight': '180%', 'startOffset': 7, 'transitionDuration': '200ms', 'cssValueStart': 40, 'cssValueEnd': 100}" data-image-src="images/backgrounds/8.jpg">Change some of those values and see the result.
Hello,
1) You can add this code:
(js/custom.js)
$(function(){ $(".owl-carousel-light").on('mouseup touchend', function(){ $(this).find('.owl-next').trigger('click'); }); });2)
(css/custom.css)
@media (max-width: 991px) { .owl-carousel .owl-next, .owl-carousel .owl-prev { opacity: 0 !important; display: none !important; } }3) The problem is that the carousel image is actually the background, not a full image, so it depends on the resolution and aspect ratio.
The background-size controls that:
@media (max-width: 991px) { .owl-carousel-light .owl-item { background-size: contain !important; } }
Hi,
Change all classes where you have “-sm-” to “-xs-” in that part.
Example:
<div class="col-12 col-sm-auto text-center text-sm-start order-2 order-sm-1">
TO:
<div class="col-12 col-xs-auto text-center text-xs-start order-2 order-xs-1">
Hi, I see that you copied the HTMl from the browser (after rendered), you need to copy the HTML of the carousel from the HTML file itself.
You can use this one:
<div class="owl-carousel owl-theme" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': false, 'dots': true}"> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-5.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-6.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-7.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-1.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-2.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-5.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-6.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-7.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-1.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-2.jpg"> </div> </div>Try that and let me know if you need any help.
Kind Regards.
Hello, thanks for your purchase.
This is a simple example of carousel with “dots”:
<div class="owl-carousel owl-theme" data-plugin-options="{'items': 6, 'margin': 10, 'loop': false, 'nav': true, 'dots': true, 'stagePadding': 40}"> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-5.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-6.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-7.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-1.jpg"> </div> <div> <img alt="" class="img-fluid rounded" src="img/projects/project-2.jpg"> </div> </div>For the basic modes the JS file is not necessary.
Please send me the URL of your site so I can check what is going on.
Thanks!
Hello, my suggestion is that you use Chrome Dev Tools (press f12) and check which CSS is being applied to the elements you want. Example:
In that part on the right you see the css applied.
Hi, thanks for the message.
You can ignore that message, we use just the standard API commands (not polyfill), so there will be no issue related to that.
Kind Regards.
Hello, sorry but we don’t have an example of that on Porto Admin, but you can start adding the following HTML
<div class="progress progress-reading p-fixed top-0 w-100 left-0" style="height: 8px; z-index: 9999;"> <div class="progress-bar border-radius-0 bg-color-primary" id="progressbar" style="width: 50%"></div> </div>
So with JS you set the percentual you want to show, for example:
$('#progressbar').css('width', '90%');We will consider such feature in next versions.
Hello,
This can be done by adding this custom JS code below in (js/custom.js):
$.extend(theme.PluginScrollToTop.defaults, { visibleMobile: true });Please try that and let us know if you need further assistance.
Kind Regards.
Hello, I’m sorry but I could not understand the question very well, if possible please upload that in a temporary URL (server) or use WeTransfer (or similar) to send me the files: https://wetransfer.com/
Regarding pagination, please note that the pagination in the HTML version is not functional, there are just links with the style to show the other pages.
The filter can use isotope to show/hide some items, like in this example: https://www.okler.net/previews/porto/10.2.0/portfolio-sidebar-right.html#websites
It works with classes in the items:
Hello, it’s because that design was created that way, with a fixed aspect ratio for the images, not the standard pattern, like 800×600. You can change the way the images shows, changing background-size, background-repeat, etc… Like this:
<div class="custom-slider-background overflow-hidden"> <div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600"> <div class="custom-slider-background-image-stage"> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img1); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img2); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img3); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img4); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> </div> </div> <div class="custom-slider-background-image-stage-outer appear-animation" data-appear-animation="maskUp" data-appear-animation-delay="1600"> <div class="custom-slider-background-image-stage reverse"> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img4); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img3); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img1); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> <div class="custom-slider-background-image-item" style="background-image: url(https://placehold.co/1200x900/000000/FFF?text=img2); background-repeat: no-repeat; background-size: contain; background-position: center 0;"></div> </div> </div> </div>
It will make the image appear, showing all parts of the image (not cropped), but the design will be different, the area of the images will be different, the height will be smaller.
Note: It’s impossible to show images with different aspect ratios in the same area showing all parts of the image.
Hello, I’m sorry but unfortunatelly it’s not possible, for both cases (Architecture 2 & Auto Services) you’re going to follow the original aspect ratio of the images and crop the images you want to use showing the most important part of the image. To change that you would have to make many more changes in the code and change the design itself of the template, which is not included in the support we provide here (customization for the buyer needs). The online crop tool that we suggested before is the best option: https://www.iloveimg.com/crop-image
Thanks.
Hello, you can put the value inside the bar:
<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar bg-primary" style="width: 10%">10%</div> </div>
More examples:
https://getbootstrap.com/docs/5.3/components/progress/#bar-sizing
Hi, the easiest way to do that inside the carousel is to set a min-height in the card-body, for example:
<div class="card-body text-center custom-card-body">
CSS (css/custom.css):
.custom-card-body { min-height: 200px; }* Set that size based in the content you have.
Best Regards,
Okler Themes
Hello, try to set loop to false:
<div class="owl-carousel owl-theme nav-style-1 nav-outside nav-font-size-lg custom-nav-grey mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 2}, '992': {'items': 1}, '1200': {'items': 2}}, 'loop': false, 'nav': true, 'dots': false, 'margin': 20}">
Hello, looks like FontAwesome folder is not complete, it’s missing some files.
Get the latest version in this link:
https://fontawesome.com/downloadhttps://use.fontawesome.com/releases/v6.5.2/fontawesome-free-6.5.2-web.zip
Hello, the JS file used on index-one-page is /js/examples/examples.portfolio.js – the “content could not be loaded” message is because it uses Ajax and you are not running that in a server. To make it work as our preview site you just need to upload the files to your server (FTP), or just run that in a localserver (localhost).
* Try to upload your site to your server and you will see it works exactly like our preview.
Kind Regards.
Hello,
Yes, it’s possible to change the language, here’s an example:
Let’s say you want to change the language of the date picker to Spanish:
1) Add the locale file in the HTML
2) Change the options:
To change the format, you can just set it like this:
<input type="text" data-plugin-datepicker data-plugin-options='{"format": "yy/mm/dd"}' class="form-control">Or change the default settings:
(js/custom.js)$.extend(theme.PluginDatePicker.defaults, { format: "yy/mm/dd" });Available Options:
http://bootstrap-datepicker.readthedocs.org/en/release/options.htmlKind Regards,
Okler Themes
Hello,
It’s probably missing the
view.contact.jsscript on footer of page. This is the file that makes the validation of the form and submit.
<script src="js/views/view.contact.js"></script>
Please try that and let us know if you need further assistance.
Kind Regards.
Hello, thanks for your purchase.
I’m sorry but we never worked with Sharepoint, could you send us the URL of your project so we can check?
Regarding the colors, check this topic: https://www.okler.net/forums/topic/how-to-use-a-skin/
Kind Regards.
Hi, looks like it’s the default behavior from latest Bootstrap version 5+, when you have data-bs-toggle=”tab” in the links it ignores the keyboard tabbing (not sure why), removing that attribute the keyboard tabbing work but it won’t show the content you want. Not sure if it’s a Bootstrap bug or they really want that to be this way. I can confirm it used to work in older versions from Bootstrap – on version 3 for example: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tab&stacked=h
Hello, we recommend a custom class and media queries in the CSS, example:
@media (min-width: 992px) and (max-width: 1199px) { .text-bigsolut { font-size: 0.85em !important; } }* adjust the sizes the way you want.
Hello, use this css:
.owl-carousel.nav-style-1 .owl-nav .owl-next:before, .owl-carousel.nav-style-1 .owl-nav .owl-next:after, .owl-carousel.nav-style-1 .owl-nav .owl-prev:before, .owl-carousel.nav-style-1 .owl-nav .owl-prev:after { font-size: 28px !important; }
Hello, add the class border-top-0, example:
<section class="section section-quaternary border-top-0">
Hello, it’s because the button is commented in the HTML, so change:
FROM:
<!--<div class="d-flex"> <div class="d-none d-xxl-flex custom-header-1-extra-links"> <ul class="nav me-3 mt-1 "> <li class="nav-item"> <a class="nav-link text-color-light text-2 font-weight-semibold" target="_blank" href="https://www.okler.net/open-a-ticket/">Support</a> </li> <li class="nav-item"> <a class="nav-link text-color-light text-2 font-weight-semibold" target="_blank" href="https://www.okler.net/previews/porto/docs/">Documentation</a> </li> </ul> <a class="btn btn-primary font-weight-semibold text-3 py-3 border-radius p-relative bottom-1 custom-header-1-btn-1" href="https://themeforest.net/checkout/from_item/4106987?license=regular&support=bundle_6month&ref=Okler" target="_blank"><span class="px-4 d-block ws-nowrap">Buy Now</span></a> </div> <button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav"><i class="fa fa-bars"></i></button> </div>-->
TO:
<div class="d-flex"> <button class="btn header-btn-collapse-nav" data-bs-toggle="collapse" data-bs-target=".header-nav-main nav"><i class="fa fa-bars"></i></button> </div>
Hello,
We don’t have an example of that but you can start adding the video in the first slide, like this:
<div class="owl-carousel-wrapper" style="height: 100vh;"> <div class="owl-carousel dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 1}, '979': {'items': 1}, '1199': {'items': 1}}, 'loop': false, 'autoHeight': false, 'margin': 0, 'dots': true, 'dotsVerticalOffset': '-75px', 'nav': true, 'animateIn': 'fadeIn', 'animateOut': 'fadeOut', 'mouseDrag': false, 'touchDrag': false, 'pullDrag': false, 'autoplay': true, 'autoplayTimeout': 9000, 'autoplayHoverPause': true, 'rewind': true}"> <!-- Carousel Slide 1 --> <div class="position-relative" style="background-color: #35383d; height: 100vh;"> <section class="section border-0 video overlay overlay-show overlay-op-8 m-0" data-video-path="video/memory-of-a-woman" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;"> <div class="container position-relative z-index-3 h-100"> <div class="row align-items-center h-100"> <div class="col"> <div class="d-flex flex-column align-items-center justify-content-center h-100"> <h1 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}"> <span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> GET READY TO <span class="position-relative">SEE<span class="position-absolute left-50pct transform3dx-n50 top-0 mt-3"><img src="img/slides/slide-blue-line.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span> <span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> </h1> <h1 class="text-color-light font-weight-extra-bold text-12 line-height-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">PERFECT VIDEOS</h1> <p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">Check out our options and features</p> </div> </div> </div> </div> </section> </div> </div> </div>
Hello, it’s probably because of the “appear-animation”, so try to change the padding from BODY to MAIN.
FROM:
CSS (css/custom.css):body { padding-top: 100px; }TO:
CSS (css/custom.css):.main { padding-top: 100px; }Or remove appear-animation from header-body in the HTML.
Best Regards,
Okler Themes
Hi, that’s really strange, could you please upload that in a temporary URL and send me the link so I can check what is going on?
Thanks.
Hi, my suggestion is that you find the css classes and overwrite them on custom.css (adding !important too).
#footer .footer-copyright p { color: #999 !important; }
Hi, thanks for your purchase.
Make sure to include this JS file as well:
https://www.okler.net/previews/porto/10.2.0/js/views/view.home.jsKind Regards.
Hi, thanks for your purchase.
I just tried to send a message and it shows the success message:
Did you receive the email?
More information: https://www.okler.net/forums/topic/important-contact-form-is-not-working/
Regarding the second question, I’m not sure I understand, can you send more details?
Thanks.
So youo can add a second class in the element with the class “featured-boxes-full”, adding “featured-boxes-full-custom” and set the css to:
<div class="row featured-boxes-full featured-boxes-full-custom">
CSS (css/custom.css):
.featured-boxes-full-custom .featured-box-full p { opacity: 1 !important; }Best Regards,
Okler Themes
Hello,
This code can fix it:
CSS (css/custom.css):
.featured-boxes-full .featured-box-full p { opacity: 1 !important; }Best Regards,
Okler Themes
Hi, sure, we recommend adding at the bottom to avoid conflict with any other content.
With the following code in the default HTML file – page-full-width.html – this is the result:
<button class="btn btn-modern btn-primary" data-bs-toggle="modal" data-bs-target="#alert2130"> Launch Large Modal </button> <div class="modal fade" id="alert2130" tabindex="-1" role="dialog" aria-labelledby="alert2130Label" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="alert2130Label">Title</h4> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> This is the actual detailed message. </div> <div class="modal-footer"> <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
Please send me the URL of your site so we can check.
Hello, the modal HTML must be added before the BODY tag close, can’t be anywhere in the code, please try to add at the bottom of the content and try again.
Kind Regards.
Hi, sorry, but in the HTML version we don’t have anything related to books and ecommerce, you may check our WordPress version which has an ecommerce demo for book store: https://themeforest.net/item/porto-responsive-wordpress-ecommerce-theme/9207399
Kind Regards.
Hi, in the HTML files you will not find a way to do that, it must be done with PHP or similar.
You will find some example like: https://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages
Hi, yes, the “New” label is because it’s the latest added. Regarding performance, all are the same.
To get better website performance, there are a few things you can do after you finish your website.
CDN – Cloudflare: (It’s the most important thing for a better performance). Most of the Hosting Services have an easy way to enable CDN, for or sites we use A2Hosting ( https://www.a2hosting.com?aid=601d93569e434&bid=75dbf1c0 ) and Cloudflare, the tutorial is available in this link: https://www.a2hosting.com/blog/enable-cloudflare/ – https://www.cloudflare.com/ – For other hosts: https://developers.cloudflare.com/learning-paths/get-started/
Browser Cache: Page load times can be significantly improved by asking visitors to save and reuse the files included in your website. – https://gtmetrix.com/leverage-browser-caching.html / https://gtmetrix.com/serve-static-assets-with-an-efficient-cache-policy.html#how-to-cache
Hosting Plan: It’s not recommended to use a low-cost common hosting plan. Select a fast hosting service. A2Hosting – https://www.a2hosting.com?aid=601d93569e434&bid=75dbf1c0
Compress and Combine Assets: For example, there are several different ways to compress and combine the assets, this is probably the easiest way: http://www.okler.net/forums/topic/minify-php-how-to-combine-minify-and-cache-javascript-and-css-files-on-demand/
Optimize Your Images: The images can also be improved, consider to export them in a lower quality. JPG 80% is good enough. – https://tinypng.com/
Best Regards.
Hi, thanks for your purchase.
All demos use the same main files, and all are optimized and fast. Regarding the latest demo, check in the zip file under the HTML folder where you have the file demo-creative-agency-2.html
All files are included, expect the images that are replaced by placeholders (it is the same for all templates on ThemeForest).
Kind Regards.
Hi, you can just add padding-top to the BODY of the page:
(css/custom.css)
body { padding-top: 100px; }Kind Regards.
Hi, can you please send me the URL of your site so I can check it live?
Btw, the image in thelink you sent is not in the correct resolution, it’s different. https://i.imgur.com/fuvhOiD.jpeg – that image is 1200×664
Also, that slider crops the image in low resolution (of your monitor), so for resolutions below 1200 it will be different from 1900.
Hi, you can reduce that height with css, limited to mobile, adding this:
(css/custom.css)
@media (max-width: 991px) { .main > section.video { max-height: 60vh !important; } }Kind Regards.
Hi, sure, it should be working, generating the skin color and replacing the file css/skins/skin-architecture-2.css is the right way to do that. Just make sure you used the skin from the same version.
For example:
Latest 10.2.0 – https://www.okler.net/previews/porto/10.2.0/demo-architecture-2.html
9.9.1 – https://www.okler.net/previews/porto/9.9.1/demo-architecture-2.htmlThe skin file will be different.
Check the header of the file /css/theme.css to see which version you’re using.
Hi, sure you can change those values and also add more than one:
@media (max-width: 991px) { #header .header-logo img { max-width: 400px !important; height: auto !important; } } @media (max-width: 480px) { #header .header-logo img { max-width: 220px !important; height: auto !important; } }
Hi, you can set a max-width value for the logo, adding this css:
@media (max-width: 991px) { #header.header-effect-shrink .header-logo { width: auto !important; height: auto !important; } } @media (max-width: 991px) { #header .header-logo img { max-width: 220px !important; height: auto !important; } }
Hello, thanks for your purchase.
Sorry, but unfortunately it’s no possible to remove jQuery.
Kind Regards.
Hi, Porto WordPress is available on ThemeForest too (it’s from another auhtor), might be a good option for you: https://themeforest.net/item/porto-responsive-wordpress-ecommerce-theme/9207399
Hello, you need to use different names/ids, so:
<div class="row"> <div class="form-group col"> <div class="form-check"> <input class="form-check-input" name="checkboxes10[]" type="checkbox" data-msg-required="Debe aceptar nuestra política de privacidad" id="inlineCheckbox10" value="OK" required> <label class="form-check-label" for="inlineCheckbox10"> He leído y acepto la <a href="politica-de-privacidad.html" target="_blank">política de privacidad</a> </label> </div> </div> </div>
You have that checkbox in the other contact form page, so you can use the same html:
<div class="row"> <div class="form-group col"> <div class="form-check"> <input class="form-check-input" name="checkboxes[]" type="checkbox" data-msg-required="Debe aceptar nuestra política de privacidad" id="inlineCheckbox1" value="option1" required> <label class="form-check-label" for="invalidCheck2"> He leído y acepto la <a href="politica-de-privacidad.html" target="_blank">política de privacidad</a> </label> </div> </div> </div>
Hello,
We recommend checking this post: https://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/
Regarding the changes:
1)
(css/custom.css).page-header.page-header-modern.page-header-background:after { display: none; }2)
(css/custom.css)
.custom-cards .col-custom-cards:nth-child(2) { transform: translateY(0); } .custom-cards .col-custom-cards:nth-child(3) { transform: translateY(0); }
The problem is the same that has in the other form. The checkbox of “política de privacidad”. Remove or modify that checkbox to be the same as in the contact form.
Hi, set the carousel with this code:
<div class="owl-carousel owl-theme stage-margin nav-style-1" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 2}, '979': {'items': 3}, '1199': {'items': 3}}, 'margin': 20, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}">So you can control how many items for each resolution. (Better for mobile).
Hello, in that page I still can’t see the API Key, as this:
https://www.okler.net/previews/porto/10.2.0/contact-us-recaptcha.html
https://www.okler.net/previews/porto/docs/#googlerecaptchav3
Hello, the IMG must be positioned “absolute”. Like I said before, you won’t have as much control in the size as you have using background-image. So, this will be the result:
<section class="page-header page-header-modern page-header-background page-header-background-md mb-0 p-relative"> <div class="overlay overlay-color-secondary overlay-show overlay-op-7 p-absolute top-0 left-0 w-100 h-100 overflow-hidden z-index-0"> <img src="https://placehold.co/600x400" alt="" srcset="https://placehold.co/1200x400 1200w" sizes="100vw"> </div> <div class="container p-relative z-index-1"> <div class="row"> <div class="col align-self-center p-static text-center"> <h1>Extra Breadcrumb Outside</h1> <span class="sub-title">This is a subtitle example.</span> </div> </div> </div> </section>
We hightly recommend do it this way (from the first reply): https://www.okler.net/forums/topic/overlay-with-srcset-instead-of-style-background-image/#post-10044829
Hello, thank you for your purchase.
I’m sorry but I’m a little confused about those questions. Please note that Porto Admin is a HTML template.
What is a HTML Admin Template?
Porto Admin is a HTML template, it’s not fully functional, the theme comes with HTML/CSS/JS files that allows you to integrate with your own system and create your own solution, with server-side scripting languages such as PHP, .Net, etc… (That integration is responsibility of the buyer). It works the same way for all template under the HTML category on ThemeForest.
How does the integration with the front-end template works?
Porto Admin is not a CMS/Editor system ready to create new pages on Porto Front-End template. The integration is actually a package of new features from the admin to add in the front-end template, such as advanced tables, advanced forms, etc…
If you have any questions, just let me know.
Best Regards,
Okler Themes
Hello, sorry about that, what I actually said was that the overlay class on Porto is not ready to work in IMG tags directly, because it was created to be used on DIVS/Sections, using css :after – so you would have to add a DIV in the IMG:
<div class="overlay overlay-color-quaternary overlay-show overlay-op-8"><img src="https://placehold.co/600x400" alt="" srcset="https://placehold.co/1200x400 1200w" sizes="100vw"></div>
The :after will not work in the IMGs, another wrapper element is required.
Hope that helps 🙂
Sorry, but the overlay will not work in an IMG element, it was created to be used in a secion/DIV. You must add a new div around the IMG for that.
Hi, add this:
#footer a { color: #f4f4f4 !important; } #footer a:hover { color: #FFF !important; } #footer .social-icons li a { color: #333 !important; } #footer .social-icons li a:hover { color: #111 !important; }
Hello, thank you for your purchase. Sure, we recommend using srcset as much as possible, for backgrounds you can set it like this:
background-image:
image-set(url("small-landscape-750x536.jpg") 1x, url("large-landscape-2048x1536.jpg") 2x);You can also add a custom class and add that CSS in a file, like this (for better browser compatibility):
.my-custom-class { background-image: url("small-landscape-750x536.jpg"); background-image: -webkit-image-set( url("small-landscape-750x536.jpg") 1x, url("large-landscape-2048x1536.jpg") 2x); background-image: image-set( url("small-landscape-750x536.jpg") 1x, url("large-landscape-2048x1536.jpg") 2x); }Let me know if you have any questions.
Hello, it’s the opacity of the overlay, to change that add this:
(css/custom.css)
.rev_slider:after { background: rgba(34, 37, 41, 0.05) !important; }Or remove it:
(css/custom.css).rev_slider:after { background: transparent !important; }
Hello, thank you for your interest in our template. It’s possible, but Porto does not come with any Angular file, the integration with Angular should be done from your side.
Kind Regards.
Hi, please try this:
(css/custom.css)
@media (min-width: 992px) { #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a:hover, #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a.active { color: var(--primary) !important; } }
Hello,
I couldn’t find in the html page – contacto.html – where you set the reCpatcha API key.
https://www.okler.net/previews/porto/docs/#googlerecaptchav3Make sure to follow all the steps, including adding the Javascript at the bottom of the page.
HTML for the form must be like this example:
<form class="contact-form-recaptcha-v3" action="php/contact-form-recaptcha-v3.php" method="POST"> <div class="contact-form-success alert alert-success d-none mt-4"> <strong>Success!</strong> Your message has been sent to us. </div> <div class="contact-form-error alert alert-danger d-none mt-4"> <strong>Error!</strong> There was an error sending your message. <span class="mail-error-message text-1 d-block"></span> </div> <div class="row"> <div class="form-group col-lg-6"> <label class="form-label mb-1 text-2">Full Name</label> <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control text-3 h-auto py-2" name="name" required> </div> <div class="form-group col-lg-6"> <label class="form-label mb-1 text-2">Email Address</label> <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control text-3 h-auto py-2" name="email" required> </div> </div> <div class="row"> <div class="form-group col"> <label class="form-label mb-1 text-2">Subject</label> <input type="text" value="" data-msg-required="Please enter the subject." maxlength="100" class="form-control text-3 h-auto py-2" name="subject" required> </div> </div> <div class="row"> <div class="form-group col"> <label class="form-label mb-1 text-2">Message</label> <textarea maxlength="5000" data-msg-required="Please enter your message." rows="5" class="form-control text-3 h-auto py-2" name="message" required></textarea> </div> </div> <div class="row"> <div class="form-group col"> <input type="submit" value="Send Message" class="btn btn-primary btn-modern" data-loading-text="Loading..."> </div> </div> </form>
The success/error message will appear at the top of the form.
Hello, the plugin only allow to change the lineWidth and size, so here are a few examples:
<div class="circular-bar"> <div class="circular-bar-chart p-relative" data-percent="85" data-plugin-options='{ "barColor": "#0088CC", "delay": 300, "size": 100, "lineWidth": 5 }'> <strong class="text-3"><span class="p-relative bottom-8">Design</span> <label><span class="percent text-2">85</span>%</label> </div> </div> <div class="circular-bar"> <div class="circular-bar-chart p-relative" data-percent="85" data-plugin-options='{ "barColor": "#0088CC", "delay": 300, "size": 50, "lineWidth": 2 }'> <div class="d-flex p-absolute justify-content-center w-100 h-100 align-items-center pb-2"> <span class="percent text-2">85</span>% </div> </div> </div>
Hi, for that chart you can set it in the options: (“size”: 300 for example)
<div class="circular-bar"> <div class="circular-bar-chart" data-percent="85" data-plugin-options='{ "barColor": "#0088CC", "delay": 300, "size": 300 }'> <strong>Design</strong> <label><span class="percent">85</span>%</label> </div> </div>
Hi, are you sure the spam is coming from that form? You might have another php file that is sending those emails.
You can also try recaptcha v3.
https://www.okler.net/previews/porto/10.2.0/contact-us-recaptcha.htmlMake sure you remove all php files from old versions.
Hello, it’s set with css, with the class “chart-md”, so you can change from chart-md to chart-custom-pie and add a custom css for it with the size you want:
FROM:
<div class="chart chart-md" id="flotPie"></div>
TO:
<div class="chart chart-custom-pie" id="flotPie"></div>
(css/custom.css)
.chart.chart-custom-pie { height: 600px; }
Hello,
1) Please note that part of the code is not from original Porto, it’s a custom code that was added in theme.js (we do not recommend changing theme.js, any changes should be done in custom.js or any other file that is not from original files). That function is showing that error because you are setting name without the quotes, so it’s not a string and the console log is set to show that message.
2) You can see an example with revolution slider in this link: https://www.okler.net/previews/porto/10.2.0/index-slider-revolution.html
Kind Regards.
If you purchased Porto HTML and actually wanted to purchased Porto WordPress we can provide a refund. (for purchases made up to 7 days).
Porto WordPress is also available on ThemeForest. Here’s the link: https://themeforest.net/item/porto-responsive-wordpress-ecommerce-theme/9207399
All support related to payment and refund is run through Envato’s ticket service:
http://themeforest.net/refund_requests/newIn the refund request details please send us the purchase code from your purchase of Porto WordPress version, so please purchase Porto WordPress in advance before open the refund request.
* How to find your purchase code: https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-
Hello, it doesn’t seem like a plugin that we have on Porto Admin, the charts plugins we have are these ones:
https://www.okler.net/previews/porto-admin/4.2.0/ui-elements-charts.html
Hello, in the original demo, adding this order: [[0, ‘desc’]],:
(function($) { 'use strict'; var datatableInit = function() { var $table = $('#datatable-tabletools'); var table = $table.dataTable({ sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p', order: [[0, 'desc']], buttons: [ { extend: 'print', text: 'Print' }, { extend: 'excel', text: 'Excel' }, { extend: 'pdf', text: 'PDF', customize : function(doc){ var colCount = new Array(); $('#datatable-tabletools').find('tbody tr:first-child td').each(function(){ if($(this).attr('colspan')){ for(var i=1;i<=$(this).attr('colspan');$i++){ colCount.push('*'); } }else{ colCount.push('*'); } }); doc.content[1].table.widths = colCount; } } ] }); $('<div />').addClass('dt-buttons mb-2 pb-1 text-end').prependTo('#datatable-tabletools_wrapper'); $table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .dt-buttons' ); $('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default'); }; $(function() { datatableInit(); }); }).apply(this, [jQuery]);This is the result:
Hello, you can add a “filter” before $mail->Send(); in the php File.:
if (preg_match("/.ru/", $_POST['email'])){ $arrResult = array ('response'=>'error','errorMessage'=>'Blocked!'); exit(); }
The code doesn’t have any errors, it’s provided by Google.
Did you create your API Key?
Note it’s not 100% free, Google asks for a credit card and payment method to use that service.
Check their documentation in the link:
https://developers.google.com/maps/documentation/javascript/get-api-key
Updated JS code. (bottom of the HTML page)
/* Map Markers: - Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key - Generate Map Id: https://console.cloud.google.com/google/maps-apis/studio/maps - Use https://www.latlong.net/convert-address-to-lat-long.html to get Latitude and Longitude of a specific address */ (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=https://maps.${c}apis.com/maps/api/js?+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "YOUR_API_KEY", v: "weekly"}); async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", ); const map = new Map(document.getElementById("googlemaps"), { zoom: 14, center: { lat: -37.817240, lng: 144.955820 }, mapId: "YOUR_MAP_API_ID", }); const markers = [ { position: { lat: -37.817240, lng: 144.955820 }, title: "Office 1<br>Melbourne, 121 King St, Australia<br>Phone: 123-456-1234", } ]; const infoWindow = new InfoWindow(); markers.forEach(({ position, title }, i) => { const pin = new PinElement({ background: "#e36159", borderColor: "#e36159", glyphColor: "#FFF", }); const marker = new AdvancedMarkerElement({ position, map, title:${title}, content: pin.element, }); marker.addListener("click", ({ domEvent, latLng }) => { const { target } = domEvent; infoWindow.close(); infoWindow.setContent(marker.title); infoWindow.open(marker.map, marker); }); }); } initMap();
Hello, the error is that you need to create an API Key.
DOCS: https://www.okler.net/previews/porto/docs/#google_maps
Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key
In the JS code at the bottom of the page, where it says “YOUR_API_KEY” you provide that Key there.
Hello, note that the class of the FORM is important, you customized that with ship-form-recaptcha-v3, so you need to have a js file with that class.
It can be on js/custom.js or another file you want. (view.contact.js)
(function($) { 'use strict'; /* Contact Form: reCaptcha v3 */ $('.ship-form-recaptcha-v3').each(function(){ $(this).validate({ errorPlacement: function(error, element) { if(element.attr('type') == 'radio' || element.attr('type') == 'checkbox') { error.appendTo(element.closest('.form-group')); } else if( element.is('select') && element.closest('.custom-select-1') ) { error.appendTo(element.closest('.form-group')); } else { error.insertAfter(element); } }, submitHandler: function(form) { var $form = $(form), $messageSuccess = $form.find('.contact-form-success'), $messageError = $form.find('.contact-form-error'), $submitButton = $(this.submitButton), $errorMessage = $form.find('.mail-error-message'), submitButtonText = $submitButton.val(); $submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true); var recaptchaSrcURL = $('#google-recaptcha-v3').attr('src'), newURL = new URL(recaptchaSrcURL), site_key = newURL.searchParams.get("render"); grecaptcha.execute(site_key, {action: 'contact_us'}).then(function(token) { // Fields Data var formData = $form.serializeArray(), data = {}; $(formData).each(function(index, obj){ data[obj.name] = obj.value; }); // Recaptcha v3 Token data["g-recaptcha-response"] = token; // Ajax Submit $.ajax({ type: 'POST', url: $form.attr('action'), data: data }).always(function(data, textStatus, jqXHR) { $errorMessage.empty().hide(); if (data.response == 'success') { // Uncomment the code below to redirect for a thank you page // self.location = 'thank-you.html'; $messageSuccess.removeClass('d-none'); $messageError.addClass('d-none'); // Reset Form $form.find('.form-control') .val('') .blur() .parent() .removeClass('has-success') .removeClass('has-danger') .find('label.error') .remove(); if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) { $('html, body').animate({ scrollTop: $messageSuccess.offset().top - 80 }, 300); } $form.find('.form-control').removeClass('error'); $submitButton.val( submitButtonText ).attr('disabled', false); return; } else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') { $errorMessage.html(data.errorMessage).show(); } else { $errorMessage.html(data.responseText).show(); } $messageError.removeClass('d-none'); $messageSuccess.addClass('d-none'); if (($messageError.offset().top - 80) < $(window).scrollTop()) { $('html, body').animate({ scrollTop: $messageError.offset().top - 80 }, 300); } $form.find('.has-success') .removeClass('has-success'); $submitButton.val( submitButtonText ).attr('disabled', false); }); }); } }); }); }).apply(this, [jQuery]);For other fields, you can get examples in this page: https://www.okler.net/previews/porto/10.2.0/elements-forms.html
* Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs.
Hello, looks like it’s missing a META Tag in the HEAD of the page:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
Hello, I just uploaded the original files from Porto (php folder) and added my e-mail ([email protected]) on line 23 of the contact-form.php file and sent an email with the form (in your site) and it worked.
That php file is the most generic php script (using phpmailer) to send email. You may use another email (not gmail) or change it to another server (we use a2 hosting)
You can also ask them to provide a php script to send email in their server.
Please note this is not a problem related to our template.
Hi, thansk for your purchase.
Recent Bootstrap version (Porto is using the latest one) have those spacing classes, you can see in their documentation how it works:
https://getbootstrap.com/docs/5.3/utilities/spacing/
We are going to remove mt-0 mb-0, etc… from theme.css as it comes with Bootstrap and will work the same way now.
Let me know if you need further assistance.
Best Regards,
Okler Themes
Hello, my suggestion is that you use Chrome Dev Tools to find which elements has those margins/paddings.
The easiest way to find a CSS that is being applied to an element is using the console of your browser.
On this example, let’s see how to use Chrome Developer Tools.To open Chrome Developer Tools please press F12 on Google Chrome.
Hi, you will need a domain to make Google Maps work, the maps API Key that you will generate is related to the domain you create. (So it will not work if you send a zip file for us), you will need the domain that you will use when you finish your site.
Hello, send me the URL of your site so we can check that for you.
* Please note that the map will work only on a server (not opening the HTML locally in your device).
Hello, Google recently changed their API, here’s a working version:
DOCS: https://www.okler.net/previews/porto/docs/#google_maps
Make sure you generate the API KEY! Check docs above
HTML:
<div id="googlemaps" class="google-map small mt-0 mb-0"></div>
JS (at the bottom of the page):
<script> /* Map Markers: - Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key - Generate Map Id: https://console.cloud.google.com/google/maps-apis/studio/maps - Use https://www.latlong.net/convert-address-to-lat-long.html to get Latitude and Longitude of a specific address */ (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=https://maps.${c}apis.com/maps/api/js?+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "YOUR_API_KEY", v: "weekly"}); async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", ); const map = new Map(document.getElementById("googlemaps"), { zoom: 14, center: { lat: -37.817240, lng: 144.955820 }, mapId: "YOUR_MAP_API_ID", }); const markers = [ { position: { lat: -37.817240, lng: 144.955820 }, title: "Office 1<br>Melbourne, 121 King St, Australia<br>Phone: 123-456-1234", } ]; const infoWindow = new InfoWindow(); markers.forEach(({ position, title }, i) => { const pin = new PinElement({ background: "#e36159", borderColor: "#e36159", glyphColor: "#FFF", }); const marker = new AdvancedMarkerElement({ position, map, title:${title}, content: pin.element, }); marker.addListener("click", ({ domEvent, latLng }) => { const { target } = domEvent; infoWindow.close(); infoWindow.setContent(marker.title); infoWindow.open(marker.map, marker); }); }); } initMap(); </script>
Hello,
To get the value from a summernote element you need to use the following js code:
$('.summernote').summernote('code');It will return the html code from summernote, so you can save it with ajax.
Kind Regards.
Hello, I can see that you are using the advanced contact form, which is sent in the PHP file itself and not using Ajax.
If you are going to just use the basic fields from the form you may also use https://www.okler.net/previews/porto/10.2.0/contact-us.html
But if you want to keep that on Advanced mode.
In that file – on line 15 – set $debug = 1;
Make sure you set the email on line 12 from the same server that you hosting your website.
Hi, can you confirm if you received my test email? Check also SPAM folder.
It seems to be everything correct with the code.
Hello, unfortunatelly we don’t have “snow editor” on Porto Admin so we can’t provide support for it, but you can find similar editors in this example: https://www.okler.net/previews/porto-admin/4.2.0/forms-advanced.html
Kind Regards.
So it’s related to the parallax, this is the code you need:
<section class="section section-parallax section-height-3 border-0 m-0" data-plugin-parallax data-plugin-options="{'speed': 7, 'parallaxHeight': '150%', 'offset': 0}" data-image-src="https://place-hold.it/1920x1000/CCC">Set offset to 0
Hello, I checked the files you sent and if you meant the problem in the first section you basically need to add class “mb-0” on it, so:
<div class="home-intro bg-primary mb-0" id="home-intro">
It will remove the margin and the gap.
You can always try classes mt-0 and mb-0 to remove those gaps.
Hello, please understand we need to be able to access your site to provide a solution for that problem, send us as much information as you have, screenshots, HTML files, etc…
Hi, thanks for your purchase.
Please send me the link to your website, the link you sent is just a local version of your site and I can’t access it.
Kind Regards.
Hi, the .val() is the jQuery function to get the value from a form field.
So when you have a form element like this:
<select class="form-select form-control text-uppercase text-1 font-weight-semi-bold" name="bookNowAdults" data-msg-required="This field is required." id="bookNowAdults" required="">
The id of that element is “bookNowAdults”, so to get that value you use this.
$('#bookNowAdults').val()That’s how you will build that URL entirely.
Hello, thanks for your purchase. I’m sorry but I’m not sure I understand the question.
Porto uses Bootstrap, so the layout is responsive based in the resolution (not actually if it’s a mobile/desktop device), it shows the mobile elements on resolutions that are smaller than 992px.
Hello, try to add this on js/custom.js:
$('.instagram-feed').addClass('portfolio-list'); if( $('.instagram-feed').length ) { setInterval(function () { try { $('.instagram-feed').isotope('layout'); } catch (err) {} }, 1000); }
Exactly, you need to add all information in that part of the code, getting the value from “adults”, “kids” using JS like this: $(‘#bookNowAdults’).val() , etc… so you complete the URL with what they ask.
Hi,
Open the file: /js/examples/examples.instagramFeed.js
And add this:
$('.instagram-feed').isotope({ itemSelector: '.col-12', layoutMode: 'masonry', filter: '*', stagger: 30 });Best Regards.
Hi, my suggestion is to generate a new API key and use the code from above reply. I checked that page https://gosolut.com/2024/job_prod.html and the code is not the same.
Hello, Google recently changed their API, here’s a working version:
DOCS: https://www.okler.net/previews/porto/docs/#google_maps
HTML:
<div id="googlemaps" class="google-map small mt-0 mb-0"></div>
JS (at the bottom of the page):
<script> /* Map Markers: - Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key - Generate Map Id: https://console.cloud.google.com/google/maps-apis/studio/maps - Use https://www.latlong.net/convert-address-to-lat-long.html to get Latitude and Longitude of a specific address */ (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=https://maps.${c}apis.com/maps/api/js?+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "YOUR_API_KEY", v: "weekly"}); async function initMap() { const { Map, InfoWindow } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary( "marker", ); const map = new Map(document.getElementById("googlemaps"), { zoom: 14, center: { lat: -37.817240, lng: 144.955820 }, mapId: "YOUR_MAP_API_ID", }); const markers = [ { position: { lat: -37.817240, lng: 144.955820 }, title: "Office 1<br>Melbourne, 121 King St, Australia<br>Phone: 123-456-1234", } ]; const infoWindow = new InfoWindow(); markers.forEach(({ position, title }, i) => { const pin = new PinElement({ background: "#e36159", borderColor: "#e36159", glyphColor: "#FFF", }); const marker = new AdvancedMarkerElement({ position, map, title:${title}, content: pin.element, }); marker.addListener("click", ({ domEvent, latLng }) => { const { target } = domEvent; infoWindow.close(); infoWindow.setContent(marker.title); infoWindow.open(marker.map, marker); }); }); } initMap(); </script>
Hello, like I said, the problem is that animated letters works better with small text (titles) and not paragraphs. If you want to have better control over it, my suggestion is that you have a version that appear on desktop only and other for mobile, example:
<div class="d-none d-lg-block"> <h2 class="text-5 mb-0" data-plugin-animated-letters data-plugin-options="{'animationName': 'fadeInUpShorter', 'animationSpeed': 20, 'startDelay': 0, 'minWindowWidth': 0}"> Text that will appear only on desktop here, with effect. </h2> </div> <div class="d-block d-lg-none"> Text that will appear only on mobile here, without effect. </div>However, it’s not a good practice, so, only fadeIn would work better:
<div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0" data-appear-animation-duration="1s"> Text with only fadeIn here... </div>
Hi, I check some of the pages and I still can see some problem with the JS files, for example:
These are the files you need (in that specific order)
<!-- Vendor --> <script src="vendor/plugins/js/plugins.min.js"></script> <!-- Theme Base, Components and Settings --> <script src="js/theme.js"></script> <!-- Admin Extension Specific Page Vendor --> <script src="admin/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <script> // Bootstrap Datepicker No Conflict if (typeof($.fn.datepicker) != 'undefined') { $.fn.bootstrapDP = $.fn.datepicker.noConflict(); } </script> <script src="admin/vendor/jquery-ui/jquery-ui.js"></script> <script src="admin/vendor/jqueryui-touch-punch/jquery.ui.touch-punch.js"></script> <script src="admin/vendor/select2/js/select2.js"></script> <script src="admin/vendor/bootstrapv5-multiselect/js/bootstrap-multiselect.js"></script> <script src="admin/vendor/jquery-maskedinput/jquery.maskedinput.js"></script> <script src="admin/vendor/bootstrap-tagsinput/bootstrap-tagsinput.js"></script> <script src="admin/vendor/bootstrapv5-colorpicker/js/bootstrap-colorpicker.js"></script> <script src="admin/vendor/bootstrap-timepicker/js/bootstrap-timepicker.js"></script> <script src="admin/vendor/fuelux/js/spinner.js"></script> <script src="admin/vendor/dropzone/dropzone.js"></script> <script src="admin/vendor/bootstrap-markdown/js/markdown.js"></script> <script src="admin/vendor/bootstrap-markdown/js/to-markdown.js"></script> <script src="admin/vendor/bootstrap-markdown/js/bootstrap-markdown.js"></script> <script src="admin/vendor/codemirror/lib/codemirror.js"></script> <script src="admin/vendor/codemirror/addon/selection/active-line.js"></script> <script src="admin/vendor/codemirror/addon/edit/matchbrackets.js"></script> <script src="admin/vendor/codemirror/mode/javascript/javascript.js"></script> <script src="admin/vendor/codemirror/mode/xml/xml.js"></script> <script src="admin/vendor/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="admin/vendor/codemirror/mode/css/css.js"></script> <script src="admin/vendor/summernote/summernote-bs4.js"></script> <script src="admin/vendor/bootstrap-maxlength/bootstrap-maxlength.js"></script> <script src="admin/vendor/ios7-switch/ios7-switch.js"></script> <!-- Admin Extension --> <script src="admin/js/theme.admin.extension.js"></script> <!-- Admin Extension Examples --> <script src="admin/js/examples/examples.advanced.form.js"></script> <!-- Theme Custom --> <script src="js/custom.js"></script> <!-- Theme Initialization Files --> <script src="js/theme.init.js"></script>Make sure you really need those files from Porto Admin, because it has everything, and if you just need the upload part it’s not required to add those files, use the example I send in the other ticket.
Try adding this:
(css/custom.css)
.tp-bullets { visibility: visible !important; display: block !important; }
Hello, the css class must be set like this:
.solutlisted { list-style-type: square; } .solutlisted li { padding-left: 10px; }“solutlisted” is the UL itself.
Hello,
1) We don not recommend to use animated letters to long texts (multiple paragraphs), but if you still want to use it you need to change ‘minWindowWidth’: from 992 to 0.
<h2 class="text-5 mb-0" data-plugin-animated-letters data-plugin-options="{'animationName': 'fadeInUpShorter', 'animationSpeed': 20, 'startDelay': 0, 'minWindowWidth': 0}">2) Add these classes in that block only:
3) Add this:
(css/custom.css)
.testimonial.testimonial-with-quotes blockquote:before { color: var(--primary) !important; }Best Regards.
Hello, the problem with the file upload on Porto Admin is that it’s not prepared to send the file with the contact form, so in the code I sent in the other reply you will find a functional contact form with file upload.
https://www.okler.net/tests/contact-form-ajax/contact-us.html
My suggestion is that you get that HTML/JS/PHP and customize adding the other fields you want in your site.
The PHP in that example is different from the original one and it ready to send the file to the email you want.
Hello, looks like you have added some JS files multiple times in the HTML (theme.js and theme.init.js for example), so it’s causing a conflict, the right way to do that is this one:
– Porto Front-End Plugins
– theme.js
– Admin Plugins and Extra files like theme.admin.extension.js, etc…
– custom.js
– theme.init.jsMake sure you have the same strucutre and try again. Check Chrome Console Log for JS errors.
Hello, unfortunately we don’t have an example of upload multiple files and send path to email, the example we have is this one:
It is possible to send attachments using the basic contact form (ajax), I’ve made a quick test here and it’s working in this URL: https://www.okler.net/tests/contact-form-ajax/contact-us.html
HTML (contact-us.html): https://pastebin.com/qu6DuR1M
JS (js/views/view.contact.js): https://pastebin.com/XEigANwm
PHP (php/contact-form.php) https://pastebin.com/DW2ZteBp
Hope that helps.
Kind Regards.
Hello, looks like you have added some JS files multiple times in the HTML (theme.js and theme.init.js for example), so it’s causing a conflict, the right way to do that is this one:
– Porto Front-End Plugins
– theme.js
– Admin Plugins and Extra files like theme.admin.extension.js, etc…
– custom.js
– theme.init.jsMake sure you have the same strucutre and try again. Check Chrome Console Log for JS errors.
Hello,
It’s probably missing the
view.contact.jsscript on footer of page. This is the file that makes the validation of the form and submit.<script src="js/views/view.contact.js"></script>
Please try that and let us know if you need further assistance.
Kind Regards.
Hello, open the file js/examples.datatables.tabletools.js and add this:
order: [[ 1, 'desc' ]],
More info: https://datatables.net/examples/basic_init/table_sorting.html
Hello, thanks for your purchase.
Unfortunately it’s not possible because that uses locomotive scroll and would require a few changes.
What you can do is to put the HEADER outside the div
<div data-scroll-container class="smoothScroll">– add that just after<div role="main" class="main">
– so it will be fixed – but it may cause a few other issues. We will consider to make a sticky version in the future for that demo.Thanks.
Kind Regards.
Okler Themes.
Hi, sure, kdiff is an old software but we still recommend it because it is simple and works the same way as any other “comparison” tool that is available, you can find more options in this link:
https://filestage.io/blog/file-comparison-tools/
Kind Regards.
Hello, the mask works perfectly for fixed number, such as phone, zipcode, etc… In that case you mentioned you need to format the numbers on keyup, so please use the following JS code:
You may also find some other plugins (that are not included on Porto and have some different functions), like this one: https://igorescobar.github.io/jQuery-Mask-Plugin/
Kind Regards.
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/supportBest Regards,
Okler Themes
1)
CSS (css/custom.css):@media (max-width: 991px) { #header.header-effect-shrink .header-container { min-height: 75px !important; } }2)
CSS (css/custom.css):@media (max-width: 991px) { #header .header-nav-main nav > ul li a { font-size: 15px !important; line-height: 20px !important; padding: 10px 8px !important; } }3)
Parallax are set to cover (so the images are responsive and will crop. You need to change it to background-size 100% and change height, that’s the only way to do that.
—
My suggestion is to add a custom class, for example: “my-custom-parallax”HTML:
<section class="my-custom-parallax parallax section section-parallax custom-parallax-bg-pos-left custom-sec-left h-100 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'horizontalPosition': '100%'}" data-image-src="img/BZImages/1920x1100Doc.jpg" style="min-height: 315px;"> </section>And then customize CSS (css/custom.css):
@media (max-width: 991px) { .my-custom-parallax { min-height: 31vw !important; } .my-custom-parallax .parallax-background { background-size: 100% !important; } }Best Regards
Hello, my suggestion is to add the following css:
(css/custom.css)
@media (max-width: 991px) { #header.header-effect-shrink .header-logo { width: auto !important; } #header .header-logo img { max-width: 150px !important; height: auto !important; } }It will set the logo to 150px on mobile, you can reduce it even more if you want to.
Kind Regards.
You can adjust that css the way you want:
.custom-select-1 select { line-height: 20px !important; font-size: 14px !important; padding: 12px !important; }You can add only font-size in that customization, removing line-height and padding if you want.
Hello, the new version has just some minor changes, the changelog is here: https://www.okler.net/forums/topic/porto-changelog/
My suggestion is just to update Bootstrap version, replacing the folder \vendor\bootstrap with the new files.
Kind Regards.
Hello, it’s using the class custom-select-1, so you can add this:
.custom-select-1 select { line-height: 20px !important; font-size: 14px !important; padding: 12px !important; }—
When you’re creating a website it’s very usual that you need to find which css is being applied to an element.
The easiest way to find a CSS that is being applied to an element is using the console of your browser.
On this example, let’s see how to use Chrome Developer Tools.To open Chrome Developer Tools please press F12 on Google Chrome.
On this example you saw that the element “featured-box-icon” is being defined in 2 different files, the first one “blue.css” is the one that sets the color and the other one theme-elements.css (line 950), has all the basic settings of that specific element.
Hi, add the class nav-expanded in the LI element, for example:
<li class="nav-expanded"> <a class="nav-link" href="extra-ajax-made-easy.html"> <i class="bx bx-loader-circle" aria-hidden="true"></i> <span>Ajax</span> </a> </li>
Kind Regards.
Hi, to test that contact form the site must be uploaded to the server where you’re going to have that live when you finish the project. The PHP that sends the email will not work locally.
More details about the contact form:
https://www.okler.net/previews/porto/docs/#contactform
Hello, my suggestion is to add a custom class, for example: “my-custom-parallax”
HTML:
<section class="my-custom-parallax parallax section section-parallax custom-parallax-bg-pos-left custom-sec-left h-100 m-0" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'horizontalPosition': '100%'}" data-image-src="img/BZImages/1920x1100Doc.jpg" style="min-height: 315px;"> </section>And then customize CSS (css/custom.css):
@media (max-width: 991px) { .my-custom-parallax { min-height: 31vw !important; } .my-custom-parallax .parallax-background { background-size: 100% !important; } }Best Regards,
Okler Themes
Hi, add that after that code. As I said it will just add the ID in the URL when you open the project.
Hi, that code is correct, can you please try to upload that to custom.js in your server and try again? Not sure why dreamweaver is showing that error, I use VS Code and it’s working here in my test.
Hi, yes, that’s correct, if you are using that same link but with popup in other page you should use that JS code that you removed.
Hi, please send more details. Where can I see that problem? is there a test page? Can you submit the form? You just don’t get the email after submit?
Thanks.
Hi, sorry, please update the JS to:
$(document).ready(function(){ if ( window.location.hash ) { $(window.location.hash).click(); } });Clear cache and try again. It should open the modal automatically
Hi, my suggestion is that you use Bootstrap grid for it, here’s an example:
<form> <div class="row"> <div class="form-group col-md-4"> <input type="text" class="form-control" name="field1" value="" placeholder="Field 1"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" name="field2" value="" placeholder="Field 2"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" name="field3" value="" placeholder="Field 3"> </div> <div class="form-group col-md-2"> <div class="d-grid gap-2"> <button class="btn btn-primary" type="button">Search</button> </div> </div> </div> </form>
More details:
https://getbootstrap.com/docs/5.2/layout/grid/#example
https://getbootstrap.com/docs/5.2/forms/overview/#overview
https://getbootstrap.com/docs/5.2/components/buttons/#examples
Hello,
1) Use this:
.btn-outline.btn-kalani:hover, .btn-outline.btn-kalani.hover { color: var(–dark)!important; }2) Add both classes:
<a href="#" class="btn btn-outline btn-outline-thin btn-rounded btn-kalani mb-2 me-3">Pizza</a>
On Chrome DevTools (f12), inspect the button, right click and then “force state”:
Hi,
Keep that line with a single email:
$email = '[email protected]';
In that same file, after line 67 you need to add those emails address, using this line:
$mail->AddAddress('[email protected]', 'Person 2'); $mail->AddAddress('[email protected]', 'Person 3'); ....Kind Regards.
Hi,
Removing the “boxed” class it will work as our standar demo: https://www.okler.net/previews/porto/10.1.0/index-classic.html
If you want a full width container you need to set that like this:
<div class="container-fluid"> ... </div>
So it will have the width of the page.
More details about the container:
https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work
https://getbootstrap.com/docs/5.3/layout/grid/
https://getbootstrap.com/docs/5.3/layout/columns/Let me know if you have any questions.
Best Regards,
Okler Themes
Hello,
1) It should be done automatically if you have the “Email” field in the form (item number 2 as below), so when you click on reply it will reply to that email.
2) You just need to replace that field with this:
<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" required="" placeholder="E-mail">
Kind Regards.
Hello, my suggestion is that you add this css in that page only:
@media (min-width: 992px) { .main-content { overflow: scroll; max-height: 85vh; margin: 0; padding: 0; } .main-content .container, .main-content .row, .main-content .col-lg-12, .main-content .col-md-12, table#chart { margin: 0 !important; padding: 0 !important; } .table-responsive { overflow-x: initial !important; thead { position: sticky; top: 0; z-index: 99; } } }So it will help you to start the customization.
Hello, we don’t have an example for that on Porto but my suggestion is to set the TH with position: sticky, for example:
Another examples using JS:
I’d also add horizonal scrollbars in that table.
<div class="table-responsive"> <table class="table"> ... </table> </div>https://getbootstrap.com/docs/5.3/content/tables/#overview
Hello,
The replyTo is already set to the e-mail that is submitted in the form, in the PHP file you can find it here:
So when you click in reply it will reply to the email that was submitted in the email field in the form. (It works for almost 100% of the cases, Outlook, Gmail, etc…)
Best Regards.
Hello, I’m sorry but unfortunatelly it’s not possible to have a container that is 100% of the page inside the boxed layout, because the boxed layout has max-width on it.
Hello, thanks for your purchase.
1) You can use the class “fa-x-twitter”:
<i class="fa-brands fa-x-twitter"></i>
Make sure you’re using the latest version of FontAwesome: https://fontawesome.com/
2) You will not have any issue with that, just make sure you set the width/height attributes in the IMG tag (the logo is responsive), if you find any problems just send us the URL of your site so we can check that for you.
Thanks.
Hello,
Please note that Porto is static HTML, CSS and JS template. This mean functionalities like search, blog, etc.. are not fully functional. You need to implement your own solution to make it functional.
An alternative is use the Google Custom Search. Here’s a tutorial explaining:
https://www.wikihow.com/Add-a-Google-Search-Bar-to-Your-WebsiteUnfortunately Porto HTML does not come with anything related to language support, but we recommend this: http://i18njs.com/ – or this one: https://github.com/angrymonkeycloud/CloudLocalization
We hope this helps.
Kind Regards.
Hi, thanks for your purchase.
I checked the link you sent and the page is not loading (404).
Regarding ReCaptcha, make sure you created the API as explained in this link: https://www.okler.net/previews/porto/docs/#googlerecaptchav3
Kind Regards.
Hi, change the z-index of the popup, using this css:
CSS (css/custom.css):
.mfp-wrap { z-index: 99999 !important; }Best Regards,
Okler Themes
Hello, you can use a custom css for it:
HTML:
<ul class="custom-list"> <li>1</li> <li>2</li> </ul>
CSS (css/custom.css):
.custom-list li:hover { background-color: #f4f4f4; }Best Regards,
Okler Themes
Hello,
Use a class to that, for example:
HTML:
<img src="..." class="img-responsive custom-img" alt="...">
CSS (css/custom.css):
.custom-img { max-width: 100px !important; max-height: 100px !important; }Best Regards,
Okler Themes
Sorry but it does not open, can you publish it in a server? Maybe in a temporary folder, like http://www.yoursite.com/temp/
Hi, to set a row with 12 columns this is what you need:
<div class="container text-center"> <div class="row"> <div class="col col-md-4 col-lg-1"> Column 1 </div> <div class="col col-md-4 col-lg-1"> Column 2 </div> <div class="col col-md-4 col-lg-1"> Column 3 </div> <div class="col col-md-4 col-lg-1"> Column 4 </div> <div class="col col-md-4 col-lg-1"> Column 5 </div> <div class="col col-md-4 col-lg-1"> Column 6 </div> <div class="col col-md-4 col-lg-1"> Column 7 </div> <div class="col col-md-4 col-lg-1"> Column 8 </div> <div class="col col-md-4 col-lg-1"> Column 9 </div> <div class="col col-md-4 col-lg-1"> Column 10 </div> <div class="col col-md-4 col-lg-1"> Column 11 </div> <div class="col col-md-4 col-lg-1"> Column 12 </div> </div> </div>
If you want to have that full width (and not limited in 1200px) you need to use container-fluid class.
<div class="container-fluid text-center"> <div class="row"> <div class="col col-md-4 col-lg-1"> Column 1 </div> ....... </div> </div>
More about the grid: https://getbootstrap.com/docs/5.2/layout/grid/
You can also change the max-width of the container, with this css:
(css/custom.css)
@media (min-width: 1600px) { .container { max-width: 1600px !important; } }But it may generate other problems in the layout that was originally created.
Hello, thanks for your purchase and sorry about that issue.
The problem is related to the icon, so to fix that you need to add a div with limited height in each image. A div with custom-icon-wrapper class.
(HTML)
<div class="row"> <div class="col appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="700"> <div class="owl-carousel owl-theme nav-style-2 nav-font-size-sm mb-0" data-plugin-options="{'responsive': {'576': {'items': 1}, '768': {'items': 3}, '992': {'items': 4}, '1200': {'items': 4}}, 'loop': true, 'nav': true, 'dots': false}"> <div> <div class="card border-0 bg-color-transparent"> <div class="card-body text-center p-4 my-3"> <div class="custom-icon-wrapper"> <img src="img/demos/it-services/icons/backup-data-server.svg" class="img-fluid" width="100" height="100" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pb-2 mb-4'}" /> </div> <h4 class="text-color-primary font-weight-bold text-6 mb-3">Cloud Services</h4> <p class="custom-text-size-1 px-lg-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci.</p> <a href="demo-it-services-services-detail.html" class="text-color-dark font-weight-bold custom-text-size-1">READ MORE +</a> </div> </div> </div> <div> <div class="card border-0 bg-color-transparent mt-lg-5"> <div class="card-body text-center p-4 my-3"> <div class="custom-icon-wrapper"> <img src="img/demos/it-services/icons/remove-monitor-access.svg" class="img-fluid" width="100" height="100" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark pb-2 mb-4'}" /> </div> <h4 class="text-color-dark font-weight-bold text-6 mb-3">Tech Support</h4> <p class="custom-text-size-1 px-lg-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci.</p> <a href="demo-it-services-services-detail.html" class="text-color-primary font-weight-bold custom-text-size-1">READ MORE +</a> </div> </div> </div> <div> <div class="card border-0 bg-color-transparent"> <div class="card-body text-center p-4 my-3"> <div class="custom-icon-wrapper"> <img src="img/demos/it-services/icons/password-lock-secure.svg" class="img-fluid" width="100" height="100" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pb-2 mb-4'}" /> </div> <h4 class="text-color-primary font-weight-bold text-6 mb-3">Data Security</h4> <p class="custom-text-size-1 px-lg-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci.</p> <a href="demo-it-services-services-detail.html" class="text-color-dark font-weight-bold custom-text-size-1">READ MORE +</a> </div> </div> </div> <div> <div class="card border-0 bg-color-transparent mt-lg-5"> <div class="card-body text-center p-4 my-3"> <div class="custom-icon-wrapper"> <img src="img/demos/it-services/icons/floppy-disk-memory.svg" class="img-fluid" width="100" height="100" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark pb-2 mb-4'}" /> </div> <h4 class="text-color-dark font-weight-bold text-6 mb-3">Software Dev</h4> <p class="custom-text-size-1 px-lg-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci.</p> <a href="demo-it-services-services-detail.html" class="text-color-primary font-weight-bold custom-text-size-1">READ MORE +</a> </div> </div> </div> <div> <div class="card border-0 bg-color-transparent"> <div class="card-body text-center p-4 my-3"> <div class="custom-icon-wrapper"> <img src="img/demos/it-services/icons/network-database.svg" class="img-fluid" width="100" height="100" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary pb-2 mb-4'}" /> </div> <h4 class="text-color-primary font-weight-bold text-6 mb-3">Server Consulting</h4> <p class="custom-text-size-1 px-lg-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci.</p> <a href="demo-it-services-services-detail.html" class="text-color-dark font-weight-bold custom-text-size-1">READ MORE +</a> </div> </div> </div> <div> <div class="card border-0 bg-color-transparent mt-lg-5"> <div class="card-body text-center p-4 my-3"> <div class="custom-icon-wrapper"> <img src="img/demos/it-services/icons/remove-monitor-access.svg" class="img-fluid" width="100" height="100" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark pb-2 mb-4'}" /> </div> <h4 class="text-color-dark font-weight-bold text-6 mb-3">Tech Support</h4> <p class="custom-text-size-1 px-lg-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra erat orci.</p> <a href="demo-it-services-services-detail.html" class="text-color-primary font-weight-bold custom-text-size-1">READ MORE +</a> </div> </div> </div> </div> </div> </div>Add this css as well:
(css/custom.css).custom-icon-wrapper { max-height: 100px; }Kind Regards.
Hi, as you can see in this link: https://www.okler.net/previews/porto/10.1.0/img/demos/auto-services/generic-1.png – the img was create that way.
To generate a similar img you can use this transparent layer to put on your img: https://drive.google.com/file/d/1vXm9WpW3NHIwl7M2cfMRTjO1ZiDtdUzA/view?usp=drive_link
Hope that helps.
Hello, thanks for your purchase.
Try to update the Bootstrap JS (file /vendor/bootstrap/js/bootstrap.min.js) to the latest version.
Using this one: https://www.okler.net/previews/porto/10.1.0/vendor/bootstrap/js/bootstrap.min.js
Let me know if the problem persists.
Kind Regards.
Hello, thanks for your purchase.
All the things that are related to colors comes from the Skin.
You can generate your own skin color:
Copy that and save as a css skin file (css/skins/default.css).
Warning 1: If you are using a niche demo as start (Construction, Medical, Law Firm, Archirecture, etc), instead of (css/skins/default.css) you should change the CSS code in the respective niche demo skin CSS file, eg: Construction (css/skins/skin-construction.css), Medical (css/skins/skin-medical.css), etc…
Warning 2: Make sure you generate the skin with the correct version, using the preview URL:
– https://www.okler.net/previews/porto/9.9.1/
– https://www.okler.net/previews/porto/9.9.0/
…
Hi, change the ROW to be like this:
<div class="row align-items-center bg-primary">
Also. add the class mb-0 in the carousel:
<div class="custom-carousel mb-0 owl-carousel owl-theme nav-inside nav-style-1 nav-light" data-plugin-options="{'autoplay': true, 'autoplayTimeout': 4000, 'items': 1, 'margin': 10, 'loop': true, 'nav': true, 'dots': false}">
Hi, thank you for your purchase.
Regarding Prallax plugin, we actually created that parallax script and it’s not using a third-party plugin.
The available options to be used on data-plugin-options are:
Example:
<section class="parallax section section-text-light section-parallax section-center mt-0 mb-0" data-plugin-parallax data-plugin-options="{'speed': 1.5}" data-image-src="img/parallax/parallax-2.jpg">If you need anything else, or have any questions, let us know.
Hello, thanks for your purchase.
Please note that our template has much more options than the template from your link, because it demo has it own style and not just a simple one that is used in all demos.
But it’s possible to use elements from one demo to another, you just need to pay attention to the CSS and JS files from each one, for example: css/demos/demo-app-landing.css – if you’re going to use something from that demo you need to add both demo CSSs in your site.
Kind Regards.
Hi, add a class custom-carousel to the carousel and the following css
<div class="custom-carousel owl-carousel owl-theme nav-inside nav-style-1 nav-light" data-plugin-options="{'autoplay': true, 'autoplayTimeout': 4000, 'items': 1, 'margin': 10, 'loop': false, 'nav': true, 'dots': false}"> <div> <div class="img-thumbnail border-0 p-0 d-block"> <img class="img-fluid border-radius-0" src="img/blog/wide/blog-24.jpg" alt=""> </div> </div> <div> <div class="img-thumbnail border-0 p-0 d-block"> <img class="img-fluid border-radius-0" src="img/blog/wide/blog-20.jpg" alt=""> </div> </div> </div>.custom-carousel { height: auto !important; max-height: 520px !important; overflow: hidden !important; margin: 0 !important; }
Hi, in that case it would be better to use OwlCarousel instead of Revolution, adding in that place something like this:
<div class="owl-carousel owl-theme nav-inside nav-style-1 nav-light" data-plugin-options="{'autoplay': true, 'autoplayTimeout': 4000, 'items': 1, 'margin': 10, 'loop': false, 'nav': true, 'dots': false}"> <div> <div class="img-thumbnail border-0 p-0 d-block"> <img class="img-fluid border-radius-0" src="img/blog/wide/blog-24.jpg" alt=""> </div> </div> <div> <div class="img-thumbnail border-0 p-0 d-block"> <img class="img-fluid border-radius-0" src="img/blog/wide/blog-20.jpg" alt=""> </div> </div> </div>
Hello, I’m sorry but I could not understand that, can you please send more details? I checked the page and read the question many times but I’m not sure exactly what you mean. Thanks.
Hello, thanks for your purchase and sorry about the issue. The problem is that Google deprecated some of the functions from the standard map, and now we need to initialize that differently, we will update Porto soon with new maps, for now my suggestion is to use their own code, as this example: https://developers.google.com/maps/documentation/javascript/examples/advanced-markers-accessibility#maps_advanced_markers_accessibility-javascript
Hi, sorry, I sent the JS code with one error, please replace using this:
$(document).ready(function(){ $('#select').on('change', function() { location.href = $(this).val(); }); });
Hello, you don’t need to have the FORM tag, so replace this:
<form class="contact-form" action="php/contact-form.php" method="POST"> <div class="form-group col"> <label class="form-label"></label> <div class="custom-select-1"> <select class="form-select form-control h-auto py-2" data-msg-required="Please select" name="city" required> <select id="select"> <option value="#">Sort by</option> <option value="products.html">Sort by Capacity</option> <option value="products2.html">Sort by Item Number</option> </select> </div> </div> </form>
TO this only:
<div class="form-group col"> <div class="custom-select-1"> <select class="form-select form-control h-auto py-2" id="select"> <option value="#">Sort by</option> <option value="products.html">Sort by Capacity</option> <option value="products2.html">Sort by Item Number</option> </select> </div> </div>
Hi, this should work the way you want:
JS:
$(document).ready( function() { $('#select').on('change' function() { location.href = $(this).val(); }); });HTML:
<select id="select"> <option value="#">Select a location</option> <option value="location.htm">Location</option> <option value="other.htm">Other</option> </select>
Hello, it should be working, where exactly I could test it? Clicking in which element?
Try to clear browser cache and also make sure there’s no JS error in console – https://www.okler.net/forums/topic/how-to-find-a-javascript-error/
Kind Regards.
Hi, try this:
#header .header-nav.header-nav-line.header-nav-bottom-line.header-nav-bottom-line-active-text-dark nav > ul > li:hover > a:before { background: #3076ab !important; }If the problem persists please send me a private message with the URL so I can check it better.
Thanks.
Hello, you can use this custom css for it:
@media (min-width: 992px) { #header .header-nav.header-nav-line nav > ul:not(:hover) li:hover > a:before { background: #0088CC !important; } } @media (min-width: 992px) { #header .header-nav.header-nav-line nav > ul:not(:hover) li > a.active:before { background: #0088CC !important; } }More details: https://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/
Hi, my suggestion is to use their Form Builder to create that form without the API integration that may be generating that problem.
https://mailchimp.com/help/how-the-form-builder-works/
https://mailchimp.com/features/custom-forms/With that you will generate an embed form to add in your site.
Hello, thanks for your purchase.
Regarding Double Opt In, unfortunatelly we haven’t tested it yet on Porto but Mailchimp has an option to enable it as you can see in this topic:
https://mailchimp.com/help/about-double-opt-in/
https://mailchimp.com/help/set-signup-preferences/Hope that helps.
Hello, unfortunately OwlCarousel doesn’t have that option by default, the timeout is for all slides.
You will find some ways to do that on StackOverflow, but we haven’t tested it on Porto.
https://stackoverflow.com/questions/51949090/is-it-possible-to-set-different-autoplay-timeout-for-owl-carousel-items
https://stackoverflow.com/questions/51783845/dynamic-autoplay-time-with-owlcarousel-2
Hello, the img-fluid makes the image the same size of the container, so if the container/row/col is 1280px wide max it will be that size.
https://getbootstrap.com/docs/5.3/content/images/#responsive-images
https://getbootstrap.com/docs/5.3/layout/grid/
You basically had a row that was 100% of the height of the container, so I added a new row inside that first one without h-100 and now I was able to add multiple rows/cols on it.
Hope that makes sense 🙂
Hi, yes, sure, you can use the “order” classes from Bootstrap.
In that case use “order-2 order-lg-0” in that first column:
<div class="col-lg-6 pt-4 pt-lg-0 mt-5 mt-lg-0 mb-5 mb-lg-0 order-2 order-lg-0">
Hi, thanks for your purchase. The version you purchased is the HTML one, which comes exactly like you’ve seen in the preview site (expect for the images and videos that are replaced by Placeholders).
This topic may help: https://www.okler.net/forums/topic/how-to-get-a-refund-of-porto-html-and-purchase-porto-wordpress/
Let me know if you have any questions.
Best Regards,
Okler Themes
Hello, not sure why, but it’s missing this helper class from Bootstrap:
.d-none { display: none!important; }You can add that in css/custom.css and it will work.
You’re probably using a different version of Bootstrap (not the latest one)
Kind Regards.
Hello, I’m not sure if I understand that well, but did you try this?
<div class="d-flex flex-column text-center"> <div class="p-2"> <img src="..." class="img-fluid" alt="..." style="max-width: 200px;"> </div> <div class="p-2"> Title </div> <div class="p-2"> Icons </div> </div>
Hello, thanks for the link, we have made a few more tests and I’m sorry to say but to use the circleExpand function you need to disable the locomotive scroll smooth mode, because they are not compatible, and doing that you will remove some of the effects in that page.
js/demos/demo-personal-portfolio-3.js
Hello, could you please send us the URL of your site so we can check the code and provide the best solution?
Thanks.
Hello,
Please note that Porto is static HTML, CSS and JS template. This mean functionalities like search, blog, etc.. are not fully functional. You need to implement your own solution to make it functional.
An alternative is use the Google Custom Search. Here’s a tutorial explaining:
https://www.wikihow.com/Add-a-Google-Search-Bar-to-Your-WebsiteWe hope this helps.
Regarding the field disappearing on mobile, can you please say which Header type/Demo that you are using?
Let us know if you have more questions.
Kind Regards.
Hi, you need to add the same HTML section and also add the scripts related to it from demo-personal-portfolio-1.js
HTML:
<div id="circleSection" class="overflow-hidden custom-circle-section-1"> <section class="section p-relative section-default border-0 p-0 m-0"> <div class="container"> <div class="row min-vh-100 justify-content-center align-items-center"> <div class="col col-lg-8 text-center"> <div class="p-relative z-index-1"> <p class="custom-font-1 text-12 line-height-4 font-weight-semi-bold text-color-light pb-2">Before, I worked as Creative Director helping brands like Porto, Okler, Envato, ThemeForest, CodeCanyon and much more...</p> <a href="#extra" data-hash data-hash-offset="0" data-hash-offset-lg="0" class="btn btn-link-effect-1 text-4 mt-3 btn-link-underline-1 px-0 py-0 bg-transparent bg-color-before-light border-0 text-color-light font-weight-semi-bold text-decoration-none">Find Out More <img width="25" height="25" class="rotate-r-90" src="img/demos/personal-portfolio-1/svg/arrow.svg" alt="" /></a> </div> <div class="bg-primary rounded-circle p-absolute" id="circleDot"></div> </div> </div> </div> </section> </div>
JS:
(function( $ ) { 'use strict'; /* Circle Expand */ var generateCircleExpand = function() { let section = document.getElementById('circleSection'), dot = document.getElementById("circleDot"); gsap.set(dot, { width: "142vmax", height: "142vmax", xPercent: -50, yPercent: -50, top: "50%", left: "50%" }); let tl1 = gsap.timeline({ scrollTrigger: { trigger: section, start: "-50%", end: "0%", scrub: 2, invalidateOnRefresh: true, }, defaults: { ease: "none" } }); tl1 .fromTo(dot, { scale: 0 }, { x: 0, y: 0, ease: "power3.in", scale: 1 }); } // Init GSAP Elements generateScroller(); generateCircleExpand(); }).apply( this, [ jQuery ]);Also add: vendor/gsap/gsap.min.js if you don’t have it yet.
Best Regards,
Okler Themes
Hello, you can add the attribute loading=”lazy” in the images:
<img loading="lazy" src="image.jpg" alt="..." />
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
Hello, thanks for your purchase.
We don’t have an example of that but you can start adding the video in the first slide, like this:
<div class="owl-carousel-wrapper" style="height: 100vh;"> <div class="owl-carousel dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 1}, '979': {'items': 1}, '1199': {'items': 1}}, 'loop': false, 'autoHeight': false, 'margin': 0, 'dots': true, 'dotsVerticalOffset': '-75px', 'nav': true, 'animateIn': 'fadeIn', 'animateOut': 'fadeOut', 'mouseDrag': false, 'touchDrag': false, 'pullDrag': false, 'autoplay': true, 'autoplayTimeout': 9000, 'autoplayHoverPause': true, 'rewind': true}"> <!-- Carousel Slide 1 --> <div class="position-relative" style="background-color: #35383d; height: 100vh;"> <section class="section border-0 video overlay overlay-show overlay-op-8 m-0" data-video-path="video/memory-of-a-woman" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;"> <div class="container position-relative z-index-3 h-100"> <div class="row align-items-center h-100"> <div class="col"> <div class="d-flex flex-column align-items-center justify-content-center h-100"> <h1 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}"> <span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> GET READY TO <span class="position-relative">SEE<span class="position-absolute left-50pct transform3dx-n50 top-0 mt-3"><img src="img/slides/slide-blue-line.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span> <span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> </h1> <h1 class="text-color-light font-weight-extra-bold text-12 line-height-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">PERFECT VIDEOS</h1> <p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">Check out our options and features</p> </div> </div> </div> </div> </section> </div> <!-- Carousel Slide 2 --> <div class="position-relative overlay overlay-show overlay-op-8 pt-5" style="background-image: url(img/slides/slide-bg-2.jpg); background-size: cover; background-position: center; height: 100vh;"> <div class="container position-relative z-index-3 h-100"> <div class="row justify-content-center align-items-center h-100"> <div class="col-lg-6"> <div class="d-flex flex-column align-items-center"> <h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}"> <span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> WE WORK HARD AND PORTO HAS <span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> </h3> <h2 class="text-color-light font-weight-extra-bold text-12 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">THE BEST DESIGN</h2> <p class="text-4 text-color-light font-weight-light opacity-7 text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 25}">Trusted by over <strong class="text-color-light">40,000</strong> satisfied users, Porto is a huge success in the one of larest world's MarketPlace</p> </div> </div> </div> </div> </div> <!-- Carousel Slide 3 --> <div class="position-relative overlay overlay-show overlay-op-8 pt-5" style="background-image: url(img/slides/slide-bg-6.jpg); background-size: cover; background-position: center; height: 100vh;"> <div class="container position-relative z-index-3 h-100"> <div class="row justify-content-center align-items-center h-100"> <div class="col-lg-6"> <div class="d-flex flex-column align-items-center"> <h3 class="position-relative text-color-light text-4 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}"> <span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> WE CREATE DESIGNS, WE ARE <span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> </h3> <h2 class="porto-big-title text-color-light font-weight-extra-bold mb-3" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 250, 'animationName': 'fadeInRightShorterOpacity', 'letterClass': 'd-inline-block'}">PORTO</h2> <p class="text-4 text-color-light font-weight-light text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">The best choice for your new website</p> </div> </div> </div> </div> </div> <!-- Carousel Slide 4 --> <div class="position-relative video overlay overlay-show overlay-op-8 pt-5" data-video-path="video/memory-of-a-woman" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;"> <div class="container position-relative z-index-3 h-100"> <div class="row justify-content-center align-items-center h-100"> <div class="col-lg-6"> <div class="d-flex flex-column align-items-center"> <h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}"> <span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> WE WORK HARD AND PORTO HAS <span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> </h3> <h2 class="text-color-light font-weight-extra-bold text-12 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">THE BEST DESIGN</h2> <p class="text-4 text-color-light font-weight-light opacity-7 text-center mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0, 'animationSpeed': 25}">Trusted by over <strong class="text-color-light">40,000</strong> satisfied users, Porto is a huge success in the one of largest world's MarketPlace<strong class="bg-light">Oi oi oi</strong></p> </div> </div> </div> </div> </div> </div> </div>
Hello, sorry, try this:
#home > div:first-child { background: url('https://placehold.co/1920x1080') no-repeat 50% 50% fixed; background-size: cover; }
Hello, you can add a css like this:
(css/custom.css)
#home { background: url('https://placehold.co/1920x1080') no-repeat 50% 50% fixed; background-size: cover; }Kind Regards.
Hello, that modal comes from standard Bootstrap code, if you want to add your own style you may have to create a custom css for it, using this method: https://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/
Hello,
1) What is making the image disapear is this code: https://i.imgur.com/anfYLtJ.png (remove that) – and my suggestion is to use this:
(css/custom.css)
@media (max-width: 575px) { .custom-background-style-1 { &:before { content: " "; display: block; position: absolute; height: 100%; top: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); } } }2) Change the container class from “container-fluid ps-0” to “container-fluid px-0”
3) Add this:
(css/custom.css)
@media (max-width: 991px) { .body { margin-top: 0 !important; } .notice-top-bar { position: static !important; } }4) It would require a little of extra work which is not included in our support but this page may help you to get started: https://www.okler.net/previews/porto/10.1.0/feature-page-headers-background-video.html
Kind Regards.
Hello, sorry but unfortunatelly we don’t have an example of that at the moment and it requires extra customization to work toghether, which is not included in the support license.
Thanks.
Hello, we have only one example with masonry that is full width, this one: https://www.okler.net/previews/porto/10.1.0/portfolio-masonry-full-width.html
Kind Regards.
If you purchased Porto HTML and actually wanted to purchased Porto WordPress we can provide a refund. (for purchases made up to 7 days).
Porto WordPress is also available on ThemeForest. Here’s the link: https://themeforest.net/item/porto-responsive-wordpress-ecommerce-theme/9207399
All support related to payment and refund is run through Envato’s ticket service:
http://themeforest.net/refund_requests/newIn the refund request details please send us the purchase code from your purchase of Porto WordPress version, so please purchase Porto WordPress in advance before open the refund request.
* How to find your purchase code: https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-
Hello, thanks for your purchase, however the link you sent is from the wordpress version: https://themeforest.net/item/porto-responsive-wordpress-ecommerce-theme/9207399 – that demo “shop 36” is not available in the HTML version that you purchased.
Kind Regards.
Great that it’s working now.
Regarding “WordPress” word in the e-mail, actually there’s nothing that says WordPress in the script that sends the email.
The PHP file that sends the email is: php/contact-form-recaptcha-v2.php
Hello, add a class called “hero” to that SECTION and then you can customize with this css:
(css/custom.css)
@media (max-width: 1200px) { .hero { height: 55vh !important; } } @media (max-width: 1400px) { .hero { height: 60vh !important; } }Kind Regards.
My suggestion is to use an e-mail from the same server (same domain) and not Gmail – try to create a new email account just for your website – and then use the standard PHP file from this reply: https://www.okler.net/forums/topic/contact-form-not-working-16/#post-10044288 – replacing just $email with that new email.
Hi, you can just download it again from ThemeForest, or just update FontAwesome using this link: https://use.fontawesome.com/releases/v6.5.1/fontawesome-free-6.5.1-web.zip
Hi, so it’s not being able to login, make sure to use correct SMTP connection, you may have to confirm the Port and SMTPSecure method with your host provider. Try Port 465 – https://www.siteground.com/kb/how_to_configure_my_mail_client/
