Forum Replies Created
-
AuthorPosts
-
August 31, 2021 at 6:57 am in reply to: reCAPTCHA v3 work with a same .php for view html and valid form? #10039269
Support2
KeymasterHello,
At really the “Contact Us – Basic” and the “Contact Us – Recaptcha (v3)” are very similar. We just need some changes in the HTML and PHP.
1) First change the
<form>
tag to:<form class="contact-form-recaptcha-v3" action="php/contact-form-recaptcha-v3.php" method="POST">.........</form>
2) Add the below script on footer of page:
<script id="google-recaptcha-v3" src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_V3_SITE_KEY_GOES_HERE"></script>
3) Make sure you have the script
view.contact.js
included on footer of the page.4) Open the
php/contact-form-recaptcha-v3.php
and change the variable$secret
with your Google Recaptcha V3 Secret Key. Also, change the variable$email
to define which email should receive the contacts. You can compare your current PHP code with thephp/contact-form-recaptcha-v3.php
, you will see that’s very similar.In resume, to get the recaptcha V3 working you need the mentioned changes in the HTML and use the
php/contact-form-recaptcha-v3.php
. Ah, and make sure to have theview.contact.js
script included on footer of the page.Please try that and let us know if you need further assistance.
Kind Regards,
Okler Themes.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Linda,
Please try increasing score. For it go to
php/contact-form-recaptcha-v3.php
and change this:if($responseData->success) {
To this:
if($responseData->success && $responseData->score >= 0.8) {
The default value from google is 0.5, then I think 0.8 should resolve your issue.
We hope this helps!
Please try that and let us know if you need further help.
Kind Regards,
Okler Themes.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s in our plans update Porto Admin to BS5 too, but unfortunately we do not have a estimate date for you yet.
Let us know if you have more questions.
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
Maybe you can try with a pagination that do not reload the page:
https://www.okler.net/previews/porto/8.3.0/portfolio-extra-pagination.htmlBut please note that maybe the page performance can downgrade (I’m not sure) because you have too much testimonials to show. Is something you can try and see what happens.
If the performance remain bad, then the best option is trough AJAX.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved!
Let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please refer to the Owl Carousel documentation at API events:
https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.htmlProbably the best way is, supposing you already have a carousel initialized:
1) First destroy the carousel (so you will have the carousel code as it is in the source code without any JS manipulation)
2) Change the carousel content (with javascript)
3) Initialize the carousel again:
$(".owl-carousel").owlCarousel({ ...options here..... });
OBS: If you are using one of our carousels examples, make sure to add the class “manual”. Eg:
<div class="owl-carousel manual"................
This way the carousel will not be initialized trough the theme data-plugin-options and you can handle the carousel element as you wish.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Seems to be all right with your code and folder structure.
Can you please send temporary access to your FTP server files, so we can take a look on it and discover where’s the issue.
We need:
– Host, link or IP to access the ftp
– Username
– PasswordYou can send these credentials as private message here, so it will not be public.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
I saw you marked this ticket as resolved.
But here’s my reply, if you still have questions please open a new ticket.
Your hosting server is Godaddy ? The godaddy has known issues with PHPMailer:
https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting#godaddyIf it’s not a goddady hosting/issue, the only way is try the solutions explained here:
https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting#smtp-error-could-not-connect-to-smtp-hostPlease note this is not a template code issue, but yes a server side issue.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Yes, probably!
Regarding “string(6) “3VMyz6””:
This is not related to the $debug variable. Look for “var_dump(” in the file and remove these all.Also keep the $debug with value
0
.Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Sorry! Link online again, you can test now.
Hope this helps, and thanks for the kind words!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
The “Tables Ajax” feature requires a purchase of Porto Admin to enable the Porto Admin Extension:
https://www.okler.net/previews/porto/8.3.0/feature-admin-tables-ajax.htmlHere’s how to integrate Porto Admin Extension + Porto HTML:
There is other example similar but using only Porto HTML template?
For tables/datatables no. Porto HTML has ajax features for portfolio only, like “load more”, “ajax on modal”, etc..
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
This question is hard, since Google is not so much clear about hot they exactly works.
My opinion: The most important factor for ranking on google is relevant and new content on the page. Said that, I think that this will not be a problem, since your content will be always with the same context. At really this should be good, google likes new content.
Maybe this link can help you to clarify somethings:
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
April 28, 2021 at 11:02 pm in reply to: Nav elements in carousel with class item-video and video tags #10037887Support2
KeymasterHello,
Oh, really you are right, sorry! That’s definitely is an way to use HTML videos within this video carousel.
Please try with this example of code:
<div class="owl-carousel owl-theme manual nav-style-1 nav-outside" id="videos"> <div class="item-video" data-merge="3" style="height: 347px; background-color: #000;"> <video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> </video> </div> <div class="item-video" data-merge="2" style="height: 347px; background-color: #000;"> <video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> </video> </div> <div class="item-video" data-merge="1" style="height: 347px; background-color: #000;"> <video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> </video> </div> <div class="item-video" data-merge="1" style="height: 347px; background-color: #000;"> <video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> </video> </div> <div class="item-video" data-merge="1" style="height: 347px; background-color: #000;"> <video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> </video> </div> <div class="item-video" data-merge="1" style="height: 347px; background-color: #000;"> <video controls preload="auto" width="100%" height="347" poster="" data-description="Lorem ipsum dolor amet"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> </video> </div> </div>
* Note the video with data-merge=”3″ renders properly since the aspect ratio/size of the video is compatible with the data-merge=”3″ size.
* The others videos render centered. There’s 3 options here, the first is maintain the style “background-color: #000;” so the video will stay centered. The second is change the data-merge=”xx” value according to video size/aspect ratio. The third is change the video aspect ratio to fit with data-merge=”1″.Regarding navigation arrows, not the class I added
nav-style-1 nav-outside
. I notice a bug when we add navigation arrows to this specific video carousel, where two arrows are being display on both sides (4 total). To fix, please add the custom CSS code below:(css/custom.css):
#videos.owl-carousel .owl-nav .owl-next span, #videos.owl-carousel .owl-nav .owl-prev span { display: none; }
Add the
nav
option at “js/examples/examples.carousels.js”:/* Videos */ $('#videos').owlCarousel({ items:1, nav: true, merge:true, loop:true, margin:10, video:true, lazyLoad:true, center:true, responsive:{ 480:{ items:2 }, 600:{ items:4 } }, rtl: ( $('html').attr('dir') == 'rtl' ) ? true : false });
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Yes, probably the ajax table is the best way thinking on user experience.
The ajax request runs only one time at the first load of the page and not every page click. The example I mentioned is here:
https://www.okler.net/previews/porto-admin/3.1.0/tables-ajax.htmlWe hope this helps and clarify!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 9 months ago by
Support2.
Support2
KeymasterHello Roberto,
Great! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! Thanks for the link.
Please try removing the spaces between the scripts separated by comma:
* Do that for all spaces.
In the JS script remove the “/” before the folders:
* Remove the spaces here too.
Also, make sure all the CSS and JS scripts are uploaded to the server in the respective folders.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Roberto,
Please try with this custom css code:
(css/custom.css):
@media(max-width: 575px) { #header { height: 100px !important; } #header .header-body { border: 0 !important; } #header .header-container { height: 0; } }
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
April 28, 2021 at 5:52 am in reply to: Nav elements in carousel with class item-video and video tags #10037868Support2
KeymasterHello,
This type of carousel do not accepts html tag
<video>
inside. The only way is defining a link inside the item video. For example:<div class="owl-carousel owl-theme manual" id="videos"> <div class="item-video" data-merge="3"><a class="owl-video" href="http://vimeo.com/67957799"></a></div> <div class="item-video" data-merge="1"><a class="owl-video" href="https://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="2"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="1"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="2"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="3"><a class="owl-video" href="https://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="1"><a class="owl-video" href="http://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> <div class="item-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/watch?v=oNBBijn4JuY"></a></div> </div>
* Only YouTube, Vimeo or Vzaar video links are accepted.
We use the plugin Owl Carousel for this type of carousel and here’s the documentation:
https://owlcarousel2.github.io/OwlCarousel2/demos/video.htmlRegarding
data-mege
, this is the size of the specific item where it’s defined the attribute. Play with the values to see the changes.We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Make sure you have the class “img-fluid” in the image tag. For example:
<img src="xxxxxxxx" class="img-fluid" />
This will resize the image proportionally on mobile devices.
You can also use custom CSS. For example:
(css/custom.css):@media(max-width: 575px) { .my-custom-image-size-on-mobile { width: 250px !important; height: auto !important; } }
HTML:
<img src="xxxxxxxxx" class="my-custom-image-size-on-mobile img-fluid" alt="" />
We hope this helps!
Kind Regards,
Rodrigo.
If even so this not works, please send us the code you are trying, so we can take a look and do some tests to provide a solution.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Unfortunately we don’t know a tool that works 100% guaranteed to remove unused CSS and JS code. Maybe the links below can help you in something related to that:
– https://developer.chrome.com/docs/devtools/coverage/
– https://web.dev/unused-javascript/
– https://willmanntobias.medium.com/how-to-bulk-find-unused-css-and-javascript-with-puppeteer-and-chrome-coverage-f79f7d885d59But even so, the only way is removing manually, probably the best way is use the Google Chrome Developer Tools “Coverage” to detect.
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Sorry but I am little confused with your question.
You want to make the first texts disappears after some delay ? And then, show the second text ?
I saw you are trying this data-plugin-options
data-plugin-options=”{‘minWindowWidth’: 0, ‘forceAnimation’: true, ‘animateOut’: 8000}”
. TheanimateOut
is an option that does not exist in the “appear-animation” plugin. But there’s some workarounds, for example:<div class="appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="1000"> <h3 data-appear-animation="fadeOut" data-appear-animation-delay="4000">First text here that will disappear after 4000ms...</h3> <h3 class="appear-animation" data-appear-animation="fadeInUp" data-appear-animation-delay="4500">Seond text here that will appear after 4500ms...</h3> </div>
Maybe a word-rotator fits in what you wish ? See the examples here:
https://www.okler.net/previews/porto/8.3.0/elements-word-rotator.htmlWe hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Sorry but the link you sent seems to be with a corrupted file. Also we only accept .zip files to download. Please send a new link with your project compressed in a .zip file. Regarding JS code blocked by Wordfence, this is the firewall of the plugin that do not allow JS scripts here. To share JS code with us you can use a service like https://pastebin.com to generate a link with the code and share with us.
We await to proceed with this ticket.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Unfortunately at the moment we do not have any developer to suggest. Probably the best way is hire a freelancer at Envato Studio:
https://studio.envato.com/We hope this helps!
Let us know if you have more questions.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Yes, when clicks on the button takes a focus and holds, but the custom CSS code I sent in my previous reply should fix it. The button will still focus, but the color will be the same, so the visual effect of focus/active will not appear. Please try to clear you browser cache if you are running the project into a local web server.
There’s no way to remove the focus of the button, since it’s already declared in the theme core files. The only way is overwrite the colors of these states to be same as the normal state, so we will not see the focus effect.
With this new code below you will remove the hover color state too:
a.custom-btn-style:focus, a.custom-btn-style:active, a.custom-btn-style:hover{ background-color: #0188cc !important; }
* This is supposing your btn-primary color is #0188cc. If you are using an other color, please change the value to respective color.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The template comes with responsive classes for texts. For example:
<p class="text-4 text-sm-5 text-md-3 text-lg-4 text-xl-5">..........</p>
Possible values starts from
text-0
untiltext-15
.OBS: We are working in the other ticket about the form.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
There’s a row with 3 columns and the cards inside. First remove one of the columns, and then add the class “justify-content-center” to the row div. Eg:
<div class="row justify-content-center"> ............. .......... .............. </div>
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
For WhatsApp and Telegram links you should use the anchor element
<a>
. Buttons will not works as links.Regarding the Telegram link pattern, there’s a difference from WhatsApp, where’s not possible to pass parameters like text. You can just open the chat. Eg:
<a href="https://t.me/__ACCOUNTID_OR_GROUPID__">Telegram</a>
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try removing/delete this part of code red marked below:
You can maintain the #home section, just remove the div inside it.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
Hi, the changes were applied but the WOW Business contact still showing in the mobile version! it must not appear in either portrait or horizontal mode since it can’t use the cam to scan its own screen!
Clear your browser cache to see the changes. We just cleared the cache here and now it’s showing properly like you wish.
How to clear browser cache:
https://www.refreshyourcache.com/en/home/We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) Yes. It’s a good idea create separate images for the thumbnails with the properly size. So you will have two versions of the image. One for the thumbnail and other for the lightbox gallery (large size). This will increase the performance. Another good idea is use lazy load to load the images if you are thingkin on performance:
https://www.okler.net/previews/porto/8.3.0/feature-lazy-load.html2) The alt=”xxx” should describe the image (both thumbnail and large image). And should be declared only in the
tag.
3) Unfortunately not. The plugin used for the lightbox gallery do not have this kind of feature.
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
Let’s try another approach then. First please give a custom class name for the button:
<a href="#init-tab" data-hash data-hash-offset="90" class="custom-btn-style btn btn-primary btn-xs bg-primary font-weight-bold">BUTTON TEXT</a>
Add in (css/custom.css):
a.custom-btn-style:focus, a.custom-btn-style:active { background-color: #0188cc !important; }
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
You purposefully hide the code above
$debug = 2;
?Check if there’s a
session_start();
code.If the code is there, check if the session is working in your server, for it add the code below after the $debug variable:
var_dump($_SESSION['captcha']['code']);
* Fill the all the form and send. In the next screen should print the session code on the top trough the var_dump();
If the code it’s not returning, there’s a problem with session in your server.
Also it’s a good idea print the $_POST[‘captcha’].
In the same place of var_dump, add another, so it will be:
print_r('SESSION CAPTCHA CODE: <br>'); var_dump($_SESSION['captcha']['code']); print_r('<br><br> POST CAPTCHA CODE: <br>'); var_dump($_POST['captcha']);
Check if the values of
$_POST['captcha']
and$_SESSION['captcha']['code']
are matching.Regarding the form fields empty, that’s the expected behavior, since you are not printing the values when the page loads again. You need do something like below for all fields:
<input type="text" value="<?php echo ( isset( $_POST['pcp_name'] ) ? $_POST['pcp_name'] : '' ); ?>" data-msg-required="Please enter DPM name." maxlength="30" class="form-control text-3 h-auto py-2" name="pcp_name" required>
This way the form will be filled with the values, if has encountered an error.
If even so your issue is not resolved, please send the FTP details.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 9 months ago by
Support2.
Support2
KeymasterHello,
Thanks for your purchase.
By default the template comes without the style switcher enabled.
1) Look for style switcher CSS Stylesheets and JS scripts in the source code of page and remove them.
2) The template does not comes with a footer, but here’s an exmaple of footer that you can easily include:
2.1) Use this HTML:
<div id="footer" class="bg-dark"> <div class="container-fluid"> <div class="row justify-content-between"> <div class="col-auto"> <p class="mb-0">Website Name © All Copyrights Reserved.</p> </div> <div class="col-auto"> <ul class="list list-unstyled list-inline text-4 mb-0"> <li class="list-inline-item mb-0"><a href="#" class="text-color-light"><i class="fab fa-facebook"></i></a></li> <li class="list-inline-item mb-0"><a href="#" class="text-color-light"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item mb-0"><a href="#" class="text-color-light"><i class="fab fa-instagram"></i></a></li> </ul> </div> </div> </div> </div>
Add in (css/custom.css):
#footer { margin-left: 300px; padding: 30px 30px; } html.sidebar-left-collapsed #footer { margin-left: 73px; } @media(max-width: 767px) { #footer { margin-left: 0; } } /* For a fixed footer, just uncomment the code below */ /*#footer { position: fixed; width: calc(100% - 300px); margin-left: 300px; bottom: 0; z-index: 10; } html.sidebar-left-collapsed #footer { width: calc(100% - 73px); margin-left: 73px; } .content-body { margin-bottom: 84px; } @media(max-width: 767px) { #footer { margin-left: 0 !important; width: 100vw !important; } }*/
3) Change the
dom
option atjs/examples/examples.datatables.default.js
to:dom: '<"row"<"col-lg-6"><"col-lg-6"f>><"table-responsive"t><"row justify-content-between align-items-end mt-3 px-3"lp>',
4) Change the entire code of
js/examples/exmaples.datatables.tabletools.js
to:(function($) { 'use strict'; var datatableInit = function() { var $table = $('#datatable-tabletools'); var table = $table.dataTable({ sDom: '<"text-right mb-md"T><"row"<"col-lg-6"><"col-lg-6"f>><"table-responsive"t><"row align-items-end mt-3"<"col-lg-4"l><"col-lg-4 custom-table-tools"><"col-lg-4"p>>', 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-right').prependTo('#datatable-tabletools_wrapper'); $table.DataTable().buttons().container().prependTo( '#datatable-tabletools_wrapper .custom-table-tools' ); $('#datatable-tabletools_wrapper').find('.btn-secondary').removeClass('btn-secondary').addClass('btn-default'); }; $(function() { datatableInit(); }); }).apply(this, [jQuery]);
We hope this helps!
Let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) We have a ready example for carousel + lightbox gallery (popup) here:
https://www.okler.net/previews/porto/8.3.0/elements-lightboxes.html (elements-lightboxes.html)You can get the code from this page.
2) Yes. In the same page above. Look for “Zoom Image Gallery + Carousel”.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
You can move with
top
andleft
values:/* Reduce icon font size */ .toggle.toggle-simple .toggle>label:before, .toggle.toggle-simple .toggle>.toggle-title:before { top: 5px; left: 7px; font-size: 5px; }
* Play with the values to see what fits better with your design.
Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Yeah! We can see!
Thank you very much for your rating and the kind words!
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
Please try with this class for the button:
<a href="#init" class="bg-primary text-color-light px-5 py-3 d-inline-flex align-items-center justify-content-center rounded text-decoration-none font-weight-bold"..................
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try adding the !important flag at the CSS:
/* The blue square */ .toggle.toggle-simple .toggle>label:after, .toggle.toggle-simple .toggle>.toggle-title:after { width: 18px !important; height: 18px !important; }
Clear your browser cache if you are running in a local server like Apache or Nginx.
Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Feel free to enclose all the text inside a div with
text-justify
class. This is the proper way.Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Let me explain how niche demos like Hotel, Barber, Construction, etc.. works. As these niche demos has a very different layout from the classic demos like
index-classic.html
,index-corporate.html
, etc… We need create separate CSS files for each demo. This mean if you want to get elements from one Niche demo like Barber and paste to another like Hotel, sometimes and depending on the elements, will be needed import the respective code custom CSS too. If you look at the source code of the about us section of Demo Barber you will seecustom-xxxx
classes. These are the classes you should import too.Said that, here’s the needed CSS code from demo barber About Us section. You can paste in the (css/custom.css) file:
.custom-side-dots { position: relative; padding-left: 19.2px; padding-left: 1.2rem; padding-right: 19.2px; padding-right: 1.2rem; } .custom-side-dots:before { content: ''; position: absolute; top: 50%; left: 0; background-color: #CCC; width: 8px; height: 8px; border-radius: 100%; transform: translate3d(0, -50%, 0); } .custom-side-dots:after { content: ''; position: absolute; top: 50%; right: 0; background-color: #CCC; width: 8px; height: 8px; border-radius: 100%; transform: translate3d(0, -50%, 0); } .custom-side-dots.custom-side-dots-rm-right { padding-right: 0; } .custom-side-dots.custom-side-dots-rm-right:after { content: none; } .custom-side-dots.custom-side-dots-rm-left { padding-left: 0; } .custom-side-dots.custom-side-dots-rm-left:before { content: none; } .custom-side-dots.custom-side-dots-at-top { padding-left: 15px; padding-right: 15px; } .custom-side-dots.custom-side-dots-at-top:before, .custom-side-dots.custom-side-dots-at-top:after { top: 44px; transform: none; } .custom-side-dots.custom-side-dots-big:before, .custom-side-dots.custom-side-dots-big:after { width: 14px; height: 14px; } .custom-side-dots.custom-side-dots-outside:before { left: -20px; } .custom-side-dots.custom-side-dots-outside:after { right: -20px; } @media (max-width: 767px) { .custom-side-dots.custom-side-dots-rm-sm:before, .custom-side-dots.custom-side-dots-rm-sm:after { content: none; } } .custom-images-position-1 div:nth-child(2) { transform: translate3d(-50%, -30%, 0); } .custom-images-position-1 div:nth-child(3) { transform: translate3d(76%, 30%, 0); } .custom-images-position-1 div:nth-child(4) { transform: translate3d(-13%, 147%, 0); } @media (max-width: 575px) { .custom-mobile-scale-1 { transform: scale(0.6); } } .custom-blockquote-style-1 { position: relative; border: 0; padding: 8px 44.8px; padding: 0.5rem 2.8rem; } .custom-blockquote-style-1:before { content: "“"; position: absolute; left: -2px; top: -24px; font-size: 75px; font-style: normal; font-family: 'Playfair Display', sans-serif; line-height: 1; color: #777; } .custom-blockquote-style-1 p { font-family: 'Playfair Display', sans-serif; font-size: 20.8px; font-size: 1.3rem; line-height: 1.6; }
* I got this CSS code from
css/demos/demo-barber.css
.We hope this helps and clarify!
Let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 9 months ago by
Support2.
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
Let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
By default the
skin-app-landing.css
is not include in this page.These CSS skins controls the colors of each demo. In the case of
skin-app-landing.css
, that’s the skin used in the Demo App Landing:
https://www.okler.net/previews/porto/8.3.0/demo-app-landing.htmlYou mentioned that is using the
index-classic-light.html
, then the only skin file you will need is thecss/skinc/default.css
.– css/demos can be removed as you are not using these files.
– ccs/fonts you can remove if you do not have plans to have a shop mini-cart icon at your project.
– You can also remove the entire “master/” folder.
– Remove the “js/demos/” folder.We hope this helps!
Let us know if you have more questions.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please send us all source code of your
contact-us-advanced.php
file. You can use a service like https://pastebin.com to generate a link with the code and share with us. The credentials like email/password replace with xxxxxxxx.Or even better, give to us temporary access to your FTP server, so we can take a look in the source code.
You can send the FTP credentials as private message here, so it will not be public.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s possible.
Inside each tab content your should define an ID at the first paragraph. for example:
<p id="init">Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p> <p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p> <p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p> <p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p> <p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p> <p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p> <p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p> <p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p><p>Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. Lorem ipsum dolot, sit a met. </p> <!-- Button to go back to top --> <a href="#init" data-hash data-hash-offset="30" class="btn btn-primary">Back to Top</a>
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
To change the icon for the Simple Toggles:
(css/custom.css):
/* Toggle expanded */ .toggle.toggle-simple .toggle.active>label:before, .toggle.toggle-simple .toggle.active>.toggle-title:before { content: "\f068"; } /* Toggle Collapsed */ .toggle.toggle-simple .toggle>label:before, .toggle.toggle-simple .toggle>.toggle-title:before { content: "\f067"; }
* These “content” values you can get in the https://fontawesome.com/ website. Look for the desired icon and get the code.
To reduce the size:
(css/custom.css):/* The blue square */ .toggle.toggle-simple .toggle>label:after, .toggle.toggle-simple .toggle>.toggle-title:after { width: 18px; height: 18px; } /* Reduce icon font size */ .toggle.toggle-simple .toggle>label:before, .toggle.toggle-simple .toggle>.toggle-title:before { font-size: 5px; }
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) Please try adding the class
pb-0 mb-0
in the below section:
Regarding portrait mode, please try with this custom CSS code:
@media(max-width: 991px) and (orientation: portrait) { html.sticky-header-active #header a.btn[title="Click to call"] { right: 60px; } }
2) Regarding counters, please try with this data-plguin-options for each counter:
<strong id="YrsBiz" data-to="15" data-append="+" data-plugin-options="{'accY': -300, 'speed': 3000}">0</strong> <label>Years in Business</label>
Regarding image without border, please change the thumb-info to:
<span class="thumb-info thumb-info-hide-wrapper-bg mb-xl border p-2">..........</span>
3) Please try with this HTML for the image:
<img src="img/paypal.png" class="img-fluid appear-animation animated rotateInDownLeft appear-animation-visible" data-appear-animation="rotateInDownLeft" data-appear-animation-delay="0" data-appear-animation-duration="1s" data-plugin-options="{'accY': -300}" alt="PayPal">
4) Please try changing the text like the image below:
Regarding dell, change the image class
img-responsive
toimg-fluid
.5) – Add the class
mt-0
to<footer>
tag.
– Change page header to:<section class="page-header mb-none mb-0">
– Change featured boxes column to:
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s possible.
You need define the
minWidth
to0
.<aside class="nav-secondary" id="navSecondary" data-plugin-sticky data-plugin-options="{'minWidth': 0, 'padding': {'top': 72}}">........</aside>
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Here’s the files you need (from Porto Admin):
CSS (add on head of document):
<!-- Admin Extension Specific Page Vendor CSS --> <link rel="stylesheet" href="admin/vendor/pnotify/pnotify.custom.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 (add on footer):
<!-- Admin Extension Specific Page Vendor --> <script src="admin/vendor/jquery-validation/jquery.validate.js"></script> <script src="admin/vendor/bootstrap-wizard/jquery.bootstrap.wizard.js"></script> <script src="admin/vendor/pnotify/pnotify.custom.js"></script> <!-- Admin Extension --> <script src="admin/js/theme.admin.extension.js"></script> <!-- Admin Extension Examples --> <script src="admin/js/examples/examples.wizard.js"></script>
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello, thanks for your purchase.
Probably that’s because are missing somethings like include revolution slider JS and CSS on the page. And regarding sticky header, probably some JS error.
I prepared a file for you getting the index-corporate-11.html slider and adding into index-one-page.html page:
https://pastebin.com/raw/7BTT9Piv* I’ve also added a button to scroll to the first section of the page (that’s the Services section).
We hope this helps!
Let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
You need remove the
required
attribute from the input. If you want, you can also remove “data-msg-required” attribute too, since this will not be a required field anymore.Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
I used that image size as example only.
You should check the properly size for each image and change accordingly.
Hope this helps!
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
Sorry, really the special characters are not working with this regex. Also we not very familiar with these types of japan chars. The main purpose of this regex prevent that empty fields be sent to your email.
I have elaborated a new regex that should resolve all of these issues. Please change to:
// No White Space $.validator.addMethod("noSpace", function(value, element) { if( $(element).attr('required') ) { return value.search(/^(?! *$)[^]+$/) == 0; } return true; }, 'Please fill this empty field.');
I’ve tested with all of these chars below:
Hiragana ぁ あ ぃ い ぅ う ぇ え ぉ お か が き ぎ く ぐ け げ こ ご さ ざ し じ す ず せ ぜ そ ぞ た だ ち ぢ っ つ づ て で と ど な に ぬ ね の は ば ぱ ひ び ぴ ふ ぶ ぷ へ べ ぺ ほ ぼ ぽ ま み む め も ゃ や ゅ ゆ ょ よ ら り る れ ろ ゎ わ ゐ ゑ を ん ゔ ゕ ゖ ゙ ゚ ゛ ゜ ゝ ゞ ゟ Katakana (Full Width) ゠ ァ ア ィ イ ゥ ウ ェ エ ォ オ カ ガ キ ギ ク グ ケ ゲ コ ゴ サ ザ シ ジ ス ズ セ ゼ ソ ゾ タ ダ チ ヂ ッ ツ ヅ テ デ ト ド ナ ニ ヌ ネ ノ ハ バ パ ヒ ビ ピ フ ブ プ ヘ ベ ペ ホ ボ ポ マ ミ ム メ モ ャ ヤ ュ ユ ョ ヨ ラ リ ル レ ロ ヮ ワ ヰ ヱ ヲ ン ヴ ヵ ヶ ヷ ヸ ヹ ヺ ・ ー ヽ ヾ ヿ Kanji 漢字 日本語 文字 言語 言葉 etc. Too many characters to list. ⺀ ⺁ ⺂ ⺃ ⺄ ⺅ ⺆ ⺇ ⺈ ⺉ ⺊ ⺋ ⺌ ⺍ ⺎ ⺏ ⺐ ⺑ ⺒ ⺓ ⺔ ⺕ ⺖ ⺗ ⺘ ⺙ ⺛ ⺜ ⺝ ⺞ ⺟ ⺠ ⺡ ⺢ ⺣ ⺤ ⺥ ⺦ ⺧ ⺨ ⺩ ⺪ ⺫ ⺬ ⺭ ⺮ ⺯ ⺰ ⺱ ⺲ ⺳ ⺴ ⺵ ⺶ ⺷ ⺸ ⺹ ⺺ ⺻ ⺼ ⺽ ⺾ ⺿ ⻀ ⻁ ⻂ ⻃ ⻄ ⻅ ⻆ ⻇ ⻈ ⻉ ⻊ ⻋ ⻌ ⻍ ⻎ ⻏ ⻐ ⻑ ⻒ ⻓ ⻔ ⻕ ⻖ ⻗ ⻘ ⻙ ⻚ ⻛ ⻜ ⻝ ⻞ ⻟ ⻠ ⻡ ⻢ ⻣ ⻤ ⻥ ⻦ ⻧ ⻨ ⻩ ⻪ ⻫ ⻬ ⻭ ⻮ ⻯ ⻰ ⻱ ⻲ ⻳ ⼀ ⼁ ⼂ ⼃ ⼄ ⼅ ⼆ ⼇ ⼈ ⼉ ⼊ ⼋ ⼌ ⼍ ⼎ ⼏ ⼐ ⼑ ⼒ ⼓ ⼔ ⼕ ⼖ ⼗ ⼘ ⼙ ⼚ ⼛ ⼜ ⼝ ⼞ ⼟ ⼠ ⼡ ⼢ ⼣ ⼤ ⼥ ⼦ ⼧ ⼨ ⼩ ⼪ ⼫ ⼬ ⼭ ⼮ ⼯ ⼰ ⼱ ⼲ ⼳ ⼴ ⼵ ⼶ ⼷ ⼸ ⼹ ⼺ ⼻ ⼼ ⼽ ⼾ ⼿ ⽀ ⽁ ⽂ ⽃ ⽄ ⽅ ⽆ ⽇ ⽈ ⽉ ⽊ ⽋ ⽌ ⽍ ⽎ ⽏ ⽐ ⽑ ⽒ ⽓ ⽔ ⽕ ⽖ ⽗ ⽘ ⽙ ⽚ ⽛ ⽜ ⽝ ⽞ ⽟ ⽠ ⽡ ⽢ ⽣ ⽤ ⽥ ⽦ ⽧ ⽨ ⽩ ⽪ ⽫ ⽬ ⽭ ⽮ ⽯ ⽰ ⽱ ⽲ ⽳ ⽴ ⽵ ⽶ ⽷ ⽸ ⽹ ⽺ ⽻ ⽼ ⽽ ⽾ ⽿ ⾀ ⾁ ⾂ ⾃ ⾄ ⾅ ⾆ ⾇ ⾈ ⾉ ⾊ ⾋ ⾌ ⾍ ⾎ ⾏ ⾐ ⾑ ⾒ ⾓ ⾔ ⾕ ⾖ ⾗ ⾘ ⾙ ⾚ ⾛ ⾜ ⾝ ⾞ ⾟ ⾠ ⾡ ⾢ ⾣ ⾤ ⾥ ⾦ ⾧ ⾨ ⾩ ⾪ ⾫ ⾬ ⾭ ⾮ ⾯ ⾰ ⾱ ⾲ ⾳ ⾴ ⾵ ⾶ ⾷ ⾸ ⾹ ⾺ ⾻ ⾼ ⾽ ⾾ ⾿ ⿀ ⿁ ⿂ ⿃ ⿄ ⿅ ⿆ ⿇ ⿈ ⿉ ⿊ ⿋ ⿌ ⿍ ⿎ ⿏ ⿐ ⿑ ⿒ ⿓ ⿔ ⿕ Katakana and Punctuation (Half Width) ⦅ ⦆ 。 「 」 、 ・ ヲ ァ ィ ゥ ェ ォ ャ ュ ョ ッ ー ア イ ウ エ オ カ キ ク ケ コ サ シ ス セ ソ タ チ ツ テ ト ナ ニ ヌ ネ ノ ハ ヒ フ ヘ ホ マ ミ ム メ モ ヤ ユ ヨ ラ リ ル レ ロ ワ ン ゙ Japanese Symbols and Punctuation 、 。 〃 〄 々 〆 〇 〈 〉 《 》 「 」 『 』 【 】 〒 〓 〔 〕 〖 〗 〘 〙 〚 〛 〜 〝 〞 〟 〠 〡 〢 〣 〤 〥 〦 〧 〨 〩 〪 〫 〬 〭 〮 〯 〰 〱 〲 〳 〴 〵 〶 〷 〸 〹 〺 〻 〼 〽 〾 〿 Miscellaneous Japanese Symbols and Characters ㇰ ㇱ ㇲ ㇳ ㇴ ㇵ ㇶ ㇷ ㇸ ㇹ ㇺ ㇻ ㇼ ㇽ ㇾ ㇿ ㈠ ㈡ ㈢ ㈣ ㈤ ㈥ ㈦ ㈧ ㈨ ㈩ ㈪ ㈫ ㈬ ㈭ ㈮ ㈯ ㈰ ㈱ ㈲ ㈳ ㈴ ㈵ ㈶ ㈷ ㈸ ㈹ ㈺ ㈻ ㈼ ㈽ ㈾ ㈿ ㉀ ㉁ ㉂ ㉃ ㊀ ㊁ ㊂ ㊃ ㊄ ㊅ ㊆ ㊇ ㊈ ㊉ ㊊ ㊋ ㊌ ㊍ ㊎ ㊏ ㊐ ㊑ ㊒ ㊓ ㊔ ㊕ ㊖ ㊗ ㊘ ㊙ ㊚ ㊛ ㊜ ㊝ ㊞ ㊟ ㊠ ㊡ ㊢ ㊣ ㊤ ㊥ ㊦ ㊧ ㊨ ㊩ ㊪ ㊫ ㊬ ㊭ ㊮ ㊯ ㊰ ㊱ ㊲ ㊳ ㊴ ㊵ ㊶ ㊷ ㊸ ㊹ ㊺ ㊻ ㊼ ㊽ ㊾ ㊿ ㋀ ㋁ ㋂ ㋃ ㋄ ㋅ ㋆ ㋇ ㋈ ㋉ ㋊ ㋋ ㋐ ㋑ ㋒ ㋓ ㋔ ㋕ ㋖ ㋗ ㋘ ㋙ ㋚ ㋛ ㋜ ㋝ ㋞ ㋟ ㋠ ㋡ ㋢ ㋣ ㋤ ㋥ ㋦ ㋧ ㋨ ㋩ ㋪ ㋫ ㋬ ㋭ ㋮ ㋯ ㋰ ㋱ ㋲ ㋳ ㋴ ㋵ ㋶ ㋷ ㋸ ㋹ ㋺ ㋻ ㋼ ㋽ ㋾ ㌀ ㌁ ㌂ ㌃ ㌄ ㌅ ㌆ ㌇ ㌈ ㌉ ㌊ ㌋ ㌌ ㌍ ㌎ ㌏ ㌐ ㌑ ㌒ ㌓ ㌔ ㌕ ㌖ ㌗ ㌘ ㌙ ㌚ ㌛ ㌜ ㌝ ㌞ ㌟ ㌠ ㌡ ㌢ ㌣ ㌤ ㌥ ㌦ ㌧ ㌨ ㌩ ㌪ ㌫ ㌬ ㌭ ㌮ ㌯ ㌰ ㌱ ㌲ ㌳ ㌴ ㌵ ㌶ ㌷ ㌸ ㌹ ㌺ ㌻ ㌼ ㌽ ㌾ ㌿ ㍀ ㍁ ㍂ ㍃ ㍄ ㍅ ㍆ ㍇ ㍈ ㍉ ㍊ ㍋ ㍌ ㍍ ㍎ ㍏ ㍐ ㍑ ㍒ ㍓ ㍔ ㍕ ㍖ ㍗ ㍘ ㍙ ㍚ ㍛ ㍜ ㍝ ㍞ ㍟ ㍠ ㍡ ㍢ ㍣ ㍤ ㍥ ㍦ ㍧ ㍨ ㍩ ㍪ ㍫ ㍬ ㍭ ㍮ ㍯ ㍰ ㍱ ㍲ ㍳ ㍴ ㍵ ㍶ ㍻ ㍼ ㍽ ㍾ ㍿ Alphanumeric and Punctuation (Full Width) ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~
Sorry again for this issue, and hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 9 months ago by
Support2.
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
That’s because it’s missing the
dropdown-item dropdown-toggle
class in the Exibitions item. PLease change like the image below:
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Unfortunately is not possible have the same menu as on mobile on this screen size. Probably you tablet is an iPad Pro, that has a larger screen size. This way the best solution is add the give code below at (css/custom.css):
@media(min-width: 992px) and (max-width: 1199px) { #header .header-nav-main nav > ul > li > a { padding: 10px 8px !important; } }
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
First sorry the delay for this reply.
Please try adding the class
mb-5 mb-lg-0
in the rows. In the video section you have 6<div class="row......"
.Add the mentioned class in the 2nd, 3rd, 4th and 5th row.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great that you figured this out!
If you need further help feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello, first thanks for your purchase.
Here’s the code you need to reproduce you desired layout for mobile. Add in (css/custom.css):
@media(max-width: 575px) { #header .header-btn-collapse-nav { width: 100px; font-size: 20px } #header .header-nav-main nav > ul > li > a { display: block !important; text-align: center !important; font-size: 20px; font-weight: 400; padding: 20px 0px; } }
Seems that is the first time you are using porto, right ? Keep in mind to not make changes in the template core files like “theme.css”, “theme-elements.css”, “theme.js”, “theme.init.js”.
If you need custom CSS always use the “custom.css” file. And for JS is the “custom.js”. The purpose is avoid conflicts when you update the template in the future updates.
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved!
In 4 years I am supporting here, I’m also never seen this type of issue.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchase and the kind words.
For this type of situation (get a part of Niche demo and put into another page), depending on the demo is needed get the custom CSS codes. The Demo Digital Agency 2 has a lot of custom CSS code, so just copying and paste HTML in the index-corporate-11.html will not works. Is needed get the CSS too.
Note this is only for Nice/Business demos like: Digital Agency 2, Construction, Business Consulting, etc… In the another demos like “index-corporate-xx.html” there’s a general code that works for all demos.
To have the Digital Agency 2 footer in the index-corporate-11, please follow the steps below:
1) First copy paste/replace the HTML from agency 2 into corporate-11 footer:
https://pastebin.com/raw/F9DYRDZD* Note that in the link above has the footer code, and above of the footer I’m also added the “get-in-touch” section (this is what makes the curved border).
2) Add the code below at (css/custom.css):
/* Add here all your CSS customizations */ /* Custom CSS from css/demos/digital-agency-2.css */ /* (needed for render the footer correctly like in the demo digital agency 2) */ @font-face { font-family: "Fontello"; src: url("../css/fonts/demos/digital-agency-2/fontello.woff2") format("woff2"), url("../css/fonts/demos/digital-agency-2/fontello.woff") format("woff"), url("../css/fonts/demos/digital-agency-2/fontello.ttf") format("ttf"), url("../css/fonts/demos/digital-agency-2/fontello.eot") format("eot"); } .custom-text-2 { font-size: 14px !important; } .custom-text-7 { font-size: 22px !important; } .custom-text-4 { font-size: 16px !important; } .custom-text-6 { font-size: 20px !important; } .custom-text-10 { font-size: 40px !important; line-height: 40px !important; } @-webkit-keyframes arrowMove { 0% { position: relative; left: -1px; } 50% { position: relative; left: 3px; } 100% { position: relative; left: -1px; } } @keyframes arrowMove { 0% { position: relative; left: -1px; } 50% { position: relative; left: 3px; } 100% { position: relative; left: -1px; } } .custom-btn-with-arrow:after { content: '\E800'; font-family: 'Fontello'; font-size: 18px; margin-left: 17px; } .custom-btn-with-arrow:hover:after { -webkit-animation: arrowMove 600ms ease; animation: arrowMove 600ms ease; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* * Circles */ .custom-circle { position: absolute; display: block; border-radius: 50%; display: block; z-index: 100; transform: translate(-50%, -50%); } .custom-circle-blur { filter: blur(3px); } .custom-circle-1 { width: 68px; height: 67px; } @media (max-width: 1799px) { .custom-circle-1 { display: none; } } .custom-circle-2 { width: 33px; height: 32px; } @media (max-width: 1799px) { .custom-circle-2 { display: none; } } .custom-circle-3 { width: 21px; height: 20px; } @media (max-width: 1799px) { .custom-circle-3 { display: none; } } .custom-circle-4 { width: 14px; height: 13px; } @media (max-width: 1799px) { .custom-circle-4 { display: none; } } .custom-btn-outline { border-width: 3px; } .custom-title-with-icon:before { content: '\E801'; font-family: 'Fontello'; font-size: 15px; display: block; line-height: 15px; margin-bottom: 10px; } .custom-title-with-icon-center:before { text-align: center; } .custom-title-with-icon-right:before { text-align: right; } .get-in-touch { padding: 90px 0 150px; background-image: url("../img/demos/digital-agency-2/bg/bg-2.png"); background-repeat: no-repeat; background-size: cover; } @media (max-width: 1199px) { .get-in-touch { padding: 90px 0; } } .get-in-touch:after { content: ''; display: block; width: 120%; height: 100px; position: absolute; bottom: -48px; left: -5%; transform: rotate(2deg); } @media (max-width: 1199px) { .get-in-touch:after { display: none; } } .get-in-touch .custom-circle-1 { top: 20%; right: 10%; } .get-in-touch .custom-circle-2 { top: 70%; right: 5%; } /* Custom CSS from css/skins/skin-digital-agency-2.css (skin files handle with colors only) */ /* (needed for render the footer correctly like in the demo digital agency 2) */ #footer .custom-newsletter { border-bottom: 1px solid #777777; } html .custom-btn-with-arrow-light:after { color: #FFF !important; } html .custom-title-with-icon-light:before { color: #FFF !important; } html .custom-title-with-icon-light:before { color: #FFF !important; }
* Note the comments where I explain from where I get these codes.
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
To move the button a bit to left, please try adding
right: 20px;
to the custom CSS code below:
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterThis reply has been marked as private.Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello, thanks for your purchase.
We work together with a developer who has advanced knowledge in the template Porto HTML.
Please, feel free to contact him to discuss about customized tasks with the template.
His e-mail is: [email protected]
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchase.
I saw you marked this question as resolved. If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) First change the HTML tag to:
<html data-hash-offset="70">
2) Give an unique ID to the sticky navigation:
<div id="stickyNav" class="custom-nav-style py-2 bg-light left-0 z-index-3 w-100 bor................
3) Change all the links inside the accordion to:
<a href="hakkimizda.html#stickyNav" class="text-color-white"> Hakkımızda </a>
* Note
#stickyNav
.We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
The
contact-us.html
example page is what you are looking for:
Maybe it’s a good idea open the .zip package you downloaded from themeforest and get the page file again from there.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Really that’s a very strange issue.
Please refer to this link for a solution:
https://stackoverflow.com/questions/63187010/e2808b-appears-in-url-net-coreOpen the code with a text editor and write
href="financial-and-investment-services"
again (without copy/paste).If we inspect with developer tools the code is there:
So probably the issue is like explained on the provided link.
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great!
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The Pie Chart is running trough jQuery Flot plugin.
The initialization of the plugin occurs at
js/examples/examples.charts.js
around line 189 (wher’s “Flot Pie”)The data of the chart is added in a script next to the element:
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
First sorry the delay on this ticket.
1) Please try with this custom JS code:
(js/custom.js):$('.accordion-toggle').on('click', function(){ $('html, body').animate({ scrollTop: $('.custom-nav-style').offset().top - 70 }); });
2) Please try with this code:
<a class="accordion-toggle d-flex justify-content-between align-items-center" data-toggle="collapse" data-parent="#accordion7" href="#collapse7One" aria-expanded="true"> Hakkımızda <i class="fas fa-chevron-down"></i> </a>
3) In the links of accordion that do not represents the page, you can add a text-color-xxx class. Example:
We hope this helps!
Kind Regards,
Rodrigo.
April 16, 2021 at 7:15 am in reply to: Sticky Sidebar not sticking at a certain window size #10037575Support2
KeymasterHello,
Great the issue is now resolved!
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Melaine,
MOBILE browsers do NOT support INLINE
Really ? I really did not know about that, sorry.
So, I found out on ADOBE they have a widget to GENERATE CODE f…..
For sure! We will keep it opened! Hope you can accomplish this and share the solution with us will be great! Thanks!
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s because it’s missing the “demo/” in the source of scripts and href of stylesheets. For exmaple:
Currently you have:
<script src="/js/theme.js" type="276a7583a1314c82e0cdf9d7-text/javascript"></script>
Should be:
<script src="demo/js/theme.js" type="276a7583a1314c82e0cdf9d7-text/javascript"></script>
* Do the same for all scripts and stylesheets.
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s because the old version uses the Bootstrap 3 version, and the new uses the Bootstrap 4.
The difference is in the container class sisze:
– BS3: 1170px
– BS4: 1140pxIf you want the same behavior of BS3, just add this code in (css/custom.css):
@media (min-width: 1200px) .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1170px !important; }
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
April 16, 2021 at 12:39 am in reply to: Sticky Sidebar not sticking at a certain window size #10037561Support2
KeymasterHelllo,
Solution:
In the
js/theme.js
file, locate thejquery.pin
plugin and change like the red marked below:
* Change
$window.width()
to$window.outerWidth()
.
* This will also consider the 17px value from the browser scroll bar.We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
April 16, 2021 at 12:31 am in reply to: Sticky Sidebar not sticking at a certain window size #10037560Support2
KeymasterHello,
UPDATE:
We were able to reproduce the issue now by not using the Chrome Developer Tools to change the screen size. By only resizing the browser without dev tools.
We will work in a solution, and reply for you here as soon possible.
Thanks for you patience.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
April 16, 2021 at 12:27 am in reply to: Sticky Sidebar not sticking at a certain window size #10037559Support2
KeymasterHello, thanks for the files.
But unfortunately we still couldn’t reproduce the issue. Here’s a test with the files you send with Chrome Browser at Windows 10:
I saw in your files, that you are using a MacOS system, then I think: “Maybe it’s a safari issue only”. Here’s a test with macOS and Safari:
As you can see we couldn’t reproduce on macOS too.
The best way now, is you public your local files into a online server, so we can check if this problem will remain.
OBS: Check if the zoom of your browser is with 100%.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Sorry but we do not have any tutorial for it.
Probably this link should help you:
https://cloud.google.com/recaptcha-enterprise/docs?hl=en_USWe hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 9 months ago by
Support2.
Support2
KeymasterHello, first thanks for your purchase.
Regarding colors/skin, we have tutorial explaining here:
– The best way is navigate trough all the template demos, and select one to use as start.
– For example, if we select theindex-corporate-8.html
as start.
– Then go to https://www.okler.net/previews/porto/8.3.0/index-corporate-8.html and use the style switcher to make some changes, like colors, preloaders, fonts, dark or light, boxed or not… The style switcher will explain for you how to apply each change when you click on the button “Get Skin”.Note that changes in the HTML like carousels, lightboxes, images, etc.. needs a minimum of knowledge with HTML. For example, you can copy and paste elements from other pages.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Robert,
First of all here’s a very good tool for test your links with these social networks shares:
https://metatags.io/1) and 2)
You need define metatags in the head of each page/article. Please learn more here about facebook meta tags:
https://developers.facebook.com/docs/sharing/webmasters?locale=pt_BRAnd here’s the twitter meta tags:
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup* Seems that if you have facebook metatags defines (og:xxxxxxxx), you do not need add these twitter metatags. So probably only by adding the facebook metatags will resolve the twitter issue too.
3) This is not possible. That’s a default behavior of mobile devices. As the icons only appear when we mouse over the images on desktop, in the mobile version the icons will appear when we touch over the images. At mobile, if you touch and “press” with the finger without remove, you will see the icons.
4) In the contact form PHP file, just uncomment the red maker code below and fill with the second email:
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.April 15, 2021 at 5:34 am in reply to: Sticky Sidebar not sticking at a certain window size #10037537Support2
KeymasterHello,
First thanks for your purchase.
Sorry but unfortunately we couldn’t reproduce this issue here. The sticky is active in these screen size range:
You mentioned that can’t provide a link. In this case, please send the entire HTML code of the page. So we can try to reproduce here.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Am i making this overly complicated by using a button to trigger the Ajax page where i have the iframe ? Did you recreate your code linking the Ajax page name?
No, this is not complicated. Yes, I reproduced exactly like in your code, by opening triggering an ajax request that returns the HTML with object and iframe PDF. You did a try without the
<object>......</object>
that wraps the<iframe>
? This is something you can try.Looking more deeply in the ajax response of your code, I saw you are adding the
<!DOCTYPE html>
in the ajax files, maybe that’s the issue. Please try removing and maintain only the content, like the image below:
Regarding Paypal, this is not needed since your support license is active and your question fits in what our support scope can offer. If at some point you need something that our support can not offer, we will let you know.
Regarding FTP, feel free to send the details as private message here so it will not be public. But please try the mentioned things above before.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Regarding half lines, please try changing the position of sticky element in the HTML source code to before the
container
. Like the image below:
Moreover, you can see a side menu in img2. I want it to be opened as (mobil 1.png) list menu. How can I do this?
This is not possible. Currently you have a tabs element as the left sidebar. Turn it into an accordion on mobile is something not possible.
There’s an workaround, that is, have a tabs at desktop screens and an accordion at mobile screens. Here’s an example of accordions:
https://www.okler.net/previews/porto/8.3.0/elements-accordions.htmlSaid that, the way is use classes to:
– Hide the tabs content on mobile and display on desktop screens.
– Display accordion content on mobile and hide on desktop screens.Example:
<div class="d-none d-lg-block"> <div class="tabs"> ..... ... ........ </div> </div> <div class="d-lg-none"> <div class="accordion"> ..... ... ........ </div> </div>
Basically you will have the content duplicated. One for the tabs and other for accordion.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
To make the navigation with that desired style:
Change the HTML to:
Add in (css/custom.css):
.custom-nav-style ul.sort-source.sort-source-style-3 > li.active > a { border-bottom: 0 !important; } .custom-nav-style ul.sort-source.sort-source-style-3 > li:nth-child(2) > a { position: relative; padding: 6px 30px } .custom-nav-style ul.sort-source.sort-source-style-3 > li:nth-child(2) > a:before { content: ''; position: absolute; left: 10px; top: 50%; width: 1px; height: 52px; background: #CCC; transform: translate3d(0, -50%, 0); } .custom-nav-style ul.sort-source.sort-source-style-3 > li:nth-child(2) > a:after { content: ''; position: absolute; right: 10px; top: 50%; width: 1px; height: 52px; background: #CCC; transform: translate3d(0, -50%, 0); }
Moreover, you can see a side menu in img2. I want it to be openned as (mobil1.png) list menu. How can I do this?
Unfortunately that’s not possible at the moment.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello Pelle,
That’s not possible.
But here’s another way.
Remove the dropdown-diver div and create a custom class with the same divider and position in the
<li>
you want:
(css/custom.css):
@media(min-width: 992px) { #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a { border-bottom: 0; } #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li.custom-divider-bold a { border-bottom: 1px solid #e9ecef; } }
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
April 13, 2021 at 1:12 am in reply to: Navigation Text Wrap + Email Success message opens a in new #10037513Support2
KeymasterHello,
Thanks for the kind words and choose our theme.
1) Sorry for this wrong behavior. To fix, please add this custom css code at (css/custom.css):
#header .header-nav-main nav > ul > li a.dropdown-item { white-space: normal !important; }
2) Just add on footer of page the
js/views/view.contact.js
script:<script src="js/views/view.contact.js"></script>
* Add the code above after the
js/theme.init.js
script.ALSO – on that home page I have the exact same CONTACT FORM near the footer with the map. And it also loads {“response”:”success”} to a new page. It works perfectly on the contact page with green dialogue box, but don’t work on home page.
That’s because you already have the
view.contact.js
included in the contact page.Do you think because i have TWO contact forms on the page it’s confused? I just want to add a THANK YOU page after it’s submit or make the green success box appear. Suggestions?
I think is not confused. An alternative is make the button “MESSAGE US” scroll until footer contact form when the user click on it. For it you change the code of the button to:
<a class="mr-2 btn btn-tertiary btn-outline btn-rounded btn-lg" href="#contactSection" data-hash data-hash-offset="90">MESSAGE US</a>
And give an ID to the contact section on footer:
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
Here’s the code you need:
<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center dots-light show-dots-hover show-dots-xs nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0 " data-plugin-options="{'autoplayTimeout': 120000}" data-dynamic-height="['600px','600px','600px','550px','500px']" style="height: 600px;"> <div class="owl-stage-outer"> <div class="owl-stage"> <!-- Carousel Slide 1 --> <div class="owl-item position-relative" style="background-image: url(img/slides/slide-bg-7.jpg); background-size: cover; background-position: center; height: 600px;"> <div class="container position-relative z-index-3 h-100"> <div class="d-flex flex-column align-items-center justify-content-center h-100"> <h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorter" 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" alt="" /> </span> DO YOU NEED A <span class="position-relative">NEW <span class="position-absolute left-50pct transform3dx-n50 top-0 mt-4"><img src="img/slides/slide-white-line.png" alt="" /></span></span> <span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border.png" alt="" /> </span> </h3> <h1 class="text-color-light font-weight-extra-bold text-13 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}"><img alt="LMB" width="348" height="349" src="img/logo-bomb.png" /></h1> <p class="text-4-5 text-color-light font-weight-light mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0}">Check out our options and features</p> </div> </div> </div> <!-- Carousel Slide 2 (repeat the slide 1) --> <div class="owl-item position-relative" style="background-image: url(img/slides/slide-bg-7.jpg); background-size: cover; background-position: center; height: 600px;"> <div class="container position-relative z-index-3 h-100"> <div class="d-flex flex-column align-items-center justify-content-center h-100"> <h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorter" 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" alt="" /> </span> DO YOU NEED A <span class="position-relative">NEW <span class="position-absolute left-50pct transform3dx-n50 top-0 mt-4"><img src="img/slides/slide-white-line.png" alt="" /></span></span> <span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3"> <img src="img/slides/slide-title-border.png" alt="" /> </span> </h3> <h1 class="text-color-light font-weight-extra-bold text-13 mb-3 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}"><img alt="LMB" width="348" height="349" src="img/logo-bomb.png" /></h1> <p class="text-4-5 text-color-light font-weight-light mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0}">Check out our options and features</p> </div> </div> </div> </div> </div> </div>
* Note I duplicated the slider to generate the “loop” effect.
* Note the optiondata-plugin-options="{'autoplayTimeout': 120000}"
the time is in mili-seconds. 120000 = 2 minutesWe hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchase.
Replace the entire
owl-carousel
code with this new below:<section class="section border-0 m-0" style="background-image: url(img/slides/slide-one-page-1-1.jpg); background-size: cover; background-position: center; height: 100vh;"> <!-- Carousel Slide 1 --> <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-3 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-4 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}"> THE <span class="position-relative">BEST<span class="position-absolute left-50pct transform3dx-n50 bottom-0"><img src="img/slides/slide-blue-line-big.png" class="w-auto mt-5 appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span> DESIGN </h2> <p class="text-4 text-color-light font-weight-light opacity-7 text-center mt-2 mb-4" 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> <a href="#" class="btn btn-primary btn-rounded font-weight-bold text-3 px-5 py-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1600" data-plugin-options="{'minWindowWidth': 0}">GET STARTED NOW!</a> </div> </div> </div> </div> </section>
* In the example above I maintained the content of carousel slide 1 and wrapped it inside a section with the background image.
We hope this helps!
Please try that and let us know if you need further assistnace.
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello, first thanks for your purchase.
Please try with these responsive margin classes:
Learn more about these spacement helpers here:
https://getbootstrap.com/docs/4.6/utilities/spacing/#notationPlease try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Try with the class
sidebar-left-collapsed
in the html tag:<html class="fixed sidebar-left-collapsed">
Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try changing the class of div
pla-features
from:<div class="plan-features text-lg-left">
To:
<div class="plan-features text-left">
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
Great! 🙂
If you need further help feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchase.
Let’s use as example the
index-classic.html
page, where the second slider has an overlay. You can just remove theoverlay
class, like the image below:
* Remove these class red marked.
Explaining the overlay class:
<!-- The "overlay" class alone will show a black overlay with opacity level of 0.8 and will be shown only when the user mouse over the element --> <div class="overlay"> .... .. ..... </div> <!-- The "overlay" class plus "overlay-show will" show a black overlay with opacity level of 0.8 and always will be shown (without need to mouse over) --> <div class="overlay overlay-show"> .... .. ..... </div> <!-- The "overlay" class plus "overlay-show" and plus "overlay-op-5" will show a black overlay with opacity level of 0.5 and always will be shown (without need to mouse over) --> <div class="overlay overlay-show overlay-op-5"> .... .. ..... </div>
You can play with these classes.
Another possibilities are change the color and opacity level, for example:
<div class="overlay overlay-show overlay-color-primary overlay-op-3"> .... .. ..... </div>
* Possible colors:
-primary
,-secondary
,-tertiary
,-quaternary
,-light
and-dark
.
* Note theoverlay-op-3
. Possible values starts fromoverlay-op-1
untiloverlay-op-9
.We hope this helps and clarify!
If you need any further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
Unfortunately not. Both are rendered from different javascript libs.
My suggestion for you is use Flatpickr:
https://flatpickr.js.org/As flatpickr it’s plugin that not comes with the template, we can not send you more explanations about how to integrate. But the plugin documentation is very clear and you probably should be able to integrate.
Tip:
Use the “custom.js” file of the template to insert the codes for initialization of flatpickr.We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Please note that the original images are not included with the template. In the place of original images we place grey placeholders. This described in our Porto HTML item on ThemeForest. The reason is we use premium images in our preview, and due to copyright issues we can not distribute with the theme.
But for test purpose in your local machine we can send for you with original images. But please note that if you wants to use these images in your online website you should buy the license of respective images.
Just send us a email trough our profile contact form on ThemeForest and we will reply with the images.
https://themeforest.net/user/oklerKind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
Please try with the instructions below:
1) Change the row to:
<div class="row featured-boxes-full featured-boxes-full-scale justify-content-center">..........
2) Change the 3 columns class to
col-lg-auto featured-box-full
.Optional:
If you want push to center even more, change the class of middle column tocol-lg-auto featured-box-full px-lg-0
.Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchase.
That’s because in the other pages you not included the mobile button that opens the menu navigation.
In the pages where the menu not appears, please change the code like below:
.......... ....... ............... <div class="header-nav-main header-nav-main-square header-nav-main-effect-2 header-nav-main-sub-effect-1"> ......... ........ </div> <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav"> <i class="fas fa-bars"></i> </button> .... .............. .....
* Note that the html of button
btn header-btn-collapse-nav
should be side a side with theheader-nav-main
div.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh sorry! I miss understood your initial question.
Them problem is that’s missing
id="xx"
attributes in the inputs (according with respective labelsfor="xx"
). See the example below:
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Here’s the code you need:
(css/custom.css):
.pricing-table .plan .plan-features ul li > strong { min-width: 130px; display: inline-block; }
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved!
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
April 6, 2021 at 10:31 pm in reply to: Stop header shifting to the left when opening sidebar #10037422Support2
KeymasterHello,
Great the issue is now resolved!
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
We did a local test here by replicating your code (the “Foot Deformities”) checkboxes. In our test the code is working normally.
On this case the only way to help you is having temporary access to your server files (FTP).
FTP: Link to access, username and password.
You can send these credentials as private message here, so it will not be public.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
If you need further assistance feel free to contact us.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved!
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s possible, but only with one exception: The zoom/scale effect in the featured plan should be removed.
Please try with this code below (replace the entire
<div id="examples">.......</div>
):
https://pastebin.com/raw/8J7N6dqdHope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Unfortunately the template does not comes with a ready layout/design like in the attached images.
To reproduce this exactly layout will be needed a lot of time and it is something out of our support scope.
But here’s a similar code in terms of buttons and the black background. Replace the entire carousel code with this new:
<div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual dots-inside dots-horizontal-center custom-dots-style-1 show-dots-hover show-dots-xs nav-style-1 nav-inside nav-inside-plus nav-dark nav-lg nav-font-size-lg show-nav-hover mb-0" data-plugin-options="{'autoplayTimeout': 3000}" data-dynamic-height="['450px','450px','450px','550px','500px']" style="height: 450px;"> <div class="owl-stage-outer"> <div class="owl-stage"> <!-- Carousel Slide 1 --> <div class="owl-item position-relative overflow-hidden"> <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" data-appear-animation="kenBurnsToLeft" data-appear-animation-duration="30s" data-plugin-options="{'minWindowWidth': 0}" data-carousel-onchange-show style="background-image: url(theme/assets/img//slides/01.jpg); background-size: cover; background-position: center;"></div> <div class="container position-relative z-index-3 h-100 pb-5 pb-sm-0"> <div class="row h-100"> <div class="col-lg-5"> <div class="card border-0 rounded-0 h-100 pt-2 pb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300" style="max-width: 500px; background: rgba(0,0,0,0.7);"> <div class="card-body p-5"> <h1 class="custom-primary-font text-color-light font-weight-medium text-5 line-height-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="550" data-plugin-options="{'minWindowWidth': 0}"> Uzun vadeli kazanımlar, <strong>profesyonel servisle</strong> başlar</h1> <p class="text-color-light mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800" data-plugin-options="{'minWindowWidth': 0}">Size ihtiyaçlarınız için seçebileceğiniz Standart, Premium ve Premium Gold şeklinde üç farklı bütçe dostu bakım paketi sunuyoruz.</p> <div class="row"> <div class="col"> <a href="bakim-ariza-servisi.html" class="btn btn-success btn-modern font-weight-bold text-4 py-3 btn-px-3 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1050" data-plugin-options="{'minWindowWidth': 0}"> <span style="text-decoration: line-through;">$100</span> <span>$50</span> </a> </div> </div> <div class="row"> <div class="col"> <a href="bakim-ariza-servisi.html" class="btn btn-primary btn-modern font-weight-bold text-2 py-3 btn-px-3 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1050" data-plugin-options="{'minWindowWidth': 0}">BAKIM PAKETLERİ</a> </div> </div> <div class="row"> <div class="col text-right text-md-left"> <a href="bakim-ariza-servisi.html" class="btn btn-warning btn-modern font-weight-bold text-2 py-3 btn-px-3 mt-2 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1050" data-plugin-options="{'minWindowWidth': 0}">BAKIM PAKETLERİ</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The Google SEO is very complicate and do not give to us clear about exactly rules about how they rank the websites.
But, regarding domains/URL’s they are very specific about the rule that the keywords of the page should be at the URL. For example, if you have a “About Us” page and your content has texts “About us”, it’s a good idea to have the URL name as “about-us.html” or “domain.com/about-us/index.html”.
At really, both A or B method will have same results for SEO.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
Oh Right!
This way we need identify the items that has submenus. Here’s and example of nav list structure with identifiers:
And here’s the custom CSS code you need:
ul.custom-nav-list.nav-list > li:not(.has-submenu) a { padding-left: 0; } ul.custom-nav-list.nav-list > li:not(.has-submenu) a:before { content: none; } ul.custom-nav-list.nav-list > li.has-submenu ul li:not(.has-submenu) > a:before { content: none; }
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The problem with not display in same row is because you maintained the
col
div. Please remove that div:
Here’s the entire code you need for the row:
<div class="row appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="2000"> <div class="col-lg-6 mb-5 mb-lg-0"> <div class="embed-responsive embed-responsive-16by9"> <iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/l-epKcOA7RQ?showinfo=0&wmode=opaque"></iframe> </div> </div> <div class="col-lg-6"> <div class="embed-responsive embed-responsive-16by9"> <iframe frameborder="0" allowfullscreen="" src="//www.youtube.com/embed/l-epKcOA7RQ?showinfo=0&wmode=opaque"></iframe> </div> </div> </div>
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
So glad to know you are enjoying with Porto and our support! Thanks for the kind words!
You can leave a review about our template at your ThemeForest downloads section:
https://themeforest.net/downloadsWould be great to see your review about us there!
Kind Regards,
Rodrigo.
If you are satisfied with Tucson HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
First add a custom class in the nav list:
<ul class="nav nav-list flex-column mb-5 custom-nav-list">...
* This way make sure we will not affect other nav lists in the template.
To remove the arrow add in (css/custom.css):
ul.custom-nav-list.nav-list li a { padding-left: 0; } ul.custom-nav-list.nav-list li a:before { content: none; }
If want to change the icon:
(css/custom.css):ul.custom-nav-list.nav-list li a:before { content: "\f061"; }
* The content icon code I get from here at FontAwesome website:
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is resolved now! 🙂
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
My suggestion for you is first remove the owl carousel:
And in the same place, for 1 video only, this HTML code:
<div class="position-relative"> <div class="embed-responsive embed-responsive-4by3"> <video id="presentation2" class="float-left" width="100%" height="100%" muted loop preload="metadata" poster="video/presentation.jpg"> <source src="video/presentation.webm" type="video/webm"> <source src="video/presentation.mp4" type="video/mp4"> </video> <a href="#" class="position-absolute top-50pct left-50pct transform3dxy-n50 bg-light rounded-circle d-flex align-items-center justify-content-center text-decoration-none bg-color-hover-primary text-color-hover-light play-button-lg pulseAnim pulseAnimAnimated" data-trigger-play-video="#presentation2" data-trigger-play-video-remove="yes"> <i class="fas fa-play text-5"></i> </a> </div> </div>
For two videos you need change the entire
col
div to:<div class="col-lg-6 mb-5 mb-lg-0"> <div class="position-relative"> <div class="embed-responsive embed-responsive-4by3"> <video id="presentation2" class="float-left" width="100%" height="100%" muted loop preload="metadata" poster="video/presentation.jpg"> <source src="video/presentation.webm" type="video/webm"> <source src="video/presentation.mp4" type="video/mp4"> </video> <a href="#" class="position-absolute top-50pct left-50pct transform3dxy-n50 bg-light rounded-circle d-flex align-items-center justify-content-center text-decoration-none bg-color-hover-primary text-color-hover-light play-button-lg pulseAnim pulseAnimAnimated" data-trigger-play-video="#presentation2" data-trigger-play-video-remove="yes"> <i class="fas fa-play text-5"></i> </a> </div> </div> </div> <div class="col-lg-6"> <div class="position-relative"> <div class="embed-responsive embed-responsive-4by3"> <video id="presentation2" class="float-left" width="100%" height="100%" muted loop preload="metadata" poster="video/presentation.jpg"> <source src="video/presentation.webm" type="video/webm"> <source src="video/presentation.mp4" type="video/mp4"> </video> <a href="#" class="position-absolute top-50pct left-50pct transform3dxy-n50 bg-light rounded-circle d-flex align-items-center justify-content-center text-decoration-none bg-color-hover-primary text-color-hover-light play-button-lg pulseAnim pulseAnimAnimated" data-trigger-play-video="#presentation2" data-trigger-play-video-remove="yes"> <i class="fas fa-play text-5"></i> </a> </div> </div> </div>
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great!
Regarding wrong position when the site is live, that’s because your custom.css file is empty:
1 and 2) This is possible, please change the carousel to:
<div class="owl-carousel owl-theme nav-style-1 show-nav-title custom-show-nav-title-position mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1, 'nav': false, 'dots': true}, '768': {'items': 1}, '992': {'items': 1}, '1200': {'items': 1}}, 'autoHeight': true, 'autoplay': true, 'autoplayTimeout': 4000, 'margin': 10, 'loop': true, 'nav': true, 'dots': false, 'animateIn': 'slideInDown', 'animateOut': 'slideOutDown' }">.....</div>
* Note
'animateIn': 'slideInDown', 'animateOut': 'slideOutDown'
.
* Noteloop
option changed totrue
.Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Tucson HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! 🙂
If you need further assistance, feel free to contact us!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Mbv,
That’s because these list of products are wrapped inside a
<strong>
tag. You can simply remove that tag, or if you want to maintain, add the class:<strong class="text-weight-normal">..............</strong>
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The template comes with a ready feature for that.
The file location is
feature-gdpr.html
.https://www.okler.net/previews/porto/8.3.0//feature-gdpr.html
You can use this page as start.
That’s a built-in Porto plugin and do not require include any extra third party plugin on the page.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh right!
1) To left align on desktop, change the HTML of carousel to:
<div class="owl-carousel owl-theme nav-style-1 show-nav-title custom-show-nav-title-position mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1, 'nav': false, 'dots': true}, '768': {'items': 1}, '992': {'items': 1}, '1200': {'items': 1}}, 'autoHeight': true, 'autoplay': true, 'autoplayTimeout': 4000, 'margin': 10, 'loop': false, 'nav': true, 'dots': false }">......</div>
* Note I removed
stage-margin
andstagePadding
.2) The change above should solve this issue too.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Tucson HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh right!
We need change the display type of the element. Please change the code to:
.my-custom-class { display: table; background: rgba(0,0,0,0.3); padding: 12px 25px; }
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh right!
That’s another situation!
For it you need custom CSS.
First add a custom CSS class to the text tag. Example:
<p class="my-ustom-class">Lorem ipsum dolor sit a met, dont dolor</p>
Add in (css/custom.css):
.my-custom-class { background: rgba(0,0,0,0.3); padding: 12px 25px; }
*
0.3
is the opacity level.Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
I don’t know how is the exactly code you are using, but here is some example code of a slide:
<!-- Carousel Slide 1 --> <div class="owl-item position-relative overflow-hidden"> <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" data-appear-animation="kenBurnsToLeft" data-appear-animation-duration="30s" data-plugin-options="{'minWindowWidth': 0}" data-carousel-onchange-show style="background-image: url(img/demos/finance/slides/slide-1.jpg); background-size: cover; background-position: center;"></div> <div class="container position-relative z-index-3 h-100"> <div class="row align-items-center justify-content-end h-100"> <div class="col-lg-8 col-xl-7 text-center text-md-end"> <h2 class="font-weight-bold text-color-default line-height-4 text-4 text-md-6 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800" data-plugin-options="{'minWindowWidth': 0}">PERSONALIZED FINANCIAL PLANNING AND MORE</h2> <h1 class="text-color-dark font-weight-bold text-9 text-md-11 line-height-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1100" data-plugin-options="{'minWindowWidth': 0}">Accountant and Financial Planner in New york</h1> <a href="#" class="btn btn-primary font-weight-bold positive-ls-3 btn-px-5 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1400" data-plugin-options="{'minWindowWidth': 0}">GET STARTED</a> </div> </div> </div> </div>
To add a overlay in the slide I should change to:
<!-- Carousel Slide 1 --> <div class="owl-item position-relative overlay overlay-show overlay-op-8 overflow-hidden"> <div class="background-image-wrapper position-absolute top-0 left-0 right-0 bottom-0" data-appear-animation="kenBurnsToLeft" data-appear-animation-duration="30s" data-plugin-options="{'minWindowWidth': 0}" data-carousel-onchange-show style="background-image: url(img/demos/finance/slides/slide-1.jpg); background-size: cover; background-position: center;"></div> <div class="container position-relative z-index-3 h-100"> <div class="row align-items-center justify-content-end h-100"> <div class="col-lg-8 col-xl-7 text-center text-md-end"> <h2 class="font-weight-bold text-color-default line-height-4 text-4 text-md-6 mb-2 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="800" data-plugin-options="{'minWindowWidth': 0}">PERSONALIZED FINANCIAL PLANNING AND MORE</h2> <h1 class="text-color-dark font-weight-bold text-9 text-md-11 line-height-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1100" data-plugin-options="{'minWindowWidth': 0}">Accountant and Financial Planner in New york</h1> <a href="#" class="btn btn-primary font-weight-bold positive-ls-3 btn-px-5 btn-py-3 appear-animation" data-appear-animation="fadeInUpShorterPlus" data-appear-animation-delay="1400" data-plugin-options="{'minWindowWidth': 0}">GET STARTED</a> </div> </div> </div> </div>
* Note
<div class="owl-item position-relative overlay overlay-show overlay-op-8.......
*overlay-op-xx
is the opacity level for the overlay. Possible values starts fromoverlay-op-1
untiloverlay-op-9
.
* If you want a colored overlay (based on your primary, secondary, tertiary and quaternary pre-defined colors): Add the classoverlay-color-primary
.
* Note I wrap the content inside the slider with<div class="container position-relative z-index-3.........
.position-relative z-index-3
these classes will maintain the content over the background and the overlay.Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! 🙂
1) We can ignore this question since the number 2 will remove these arrows.
2) Change the HTML of the owl carousel to:
<div class="owl-carousel owl-theme stage-margin nav-style-1 show-nav-title custom-show-nav-title-position mb-0" data-plugin-options="{'responsive': {'0': {'items': 1, 'nav': false, 'dots': true}, '576': {'items': 1, 'nav': false, 'dots': true}, '768': {'items': 1}, '992': {'items': 1}, '1200': {'items': 1}}, 'autoHeight': true, 'autoplay': true, 'autoplayTimeout': 4000, 'margin': 10, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 30 }">...............</div>
* Note the code to remove arrows on small screens and add the dots.
3) Sorry but i’m litle confused. The test is already aligned to left. Maybe you already solved this issue, right ?
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Tucson HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
April 1, 2021 at 11:33 pm in reply to: Stop header shifting to the left when opening sidebar #10037359Support2
KeymasterHello,
Please try with this code at (css/custom.css):
html.sidebar-right-opened header.header { padding-left: 300px; }
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s possible. Please follow the instructions below:
1) First add the class
show-nav-title
andcustom-show-nav-title-position
to the carousel:
2) Add the given code below at (css/custom.css):
.custom-show-nav-title-position.owl-carousel.show-nav-title .owl-nav{ top: 36px !important; }
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Tucson HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great!
Yes, the next version of the template will have this code at view.contact.js
Thanks for your suggestion!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved!
Let us know if you need further assistance.
I will mark this ticket as resolved.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s possible with the
data-toggle="collapse"
plugin.Please try with this HTML for the nav list:
<ul class="nav nav-list flex-column mb-5"> <li class="nav-item"><a class="nav-link" href="#">Design (2)</a></li> <li class="nav-item"> <a class="nav-link active collapsed" href="#" data-toggle="collapse" data-target="#submenu">Photos (4)</a> <ul id="submenu" class="collapse"> <li class="nav-item"><a class="nav-link" href="#">Animals</a></li> <li class="nav-item"><a class="nav-link active" href="#">Business</a></li> <li class="nav-item"><a class="nav-link" href="#">Sports</a></li> <li class="nav-item"> <a class="nav-link active collapsed" href="#" data-toggle="collapse" data-target="#submenu2">Photos (4)</a> <ul id="submenu2" class="collapse"> <li class="nav-item"><a class="nav-link" href="#">Animals</a></li> <li class="nav-item"><a class="nav-link active" href="#">Business</a></li> <li class="nav-item"><a class="nav-link" href="#">Sports</a></li> <li class="nav-item"><a class="nav-link" href="#">People</a></li> </ul> </li> </ul> </li> <li class="nav-item"><a class="nav-link" href="#">Videos (3)</a></li> <li class="nav-item"><a class="nav-link" href="#">Lifestyle (2)</a></li> <li class="nav-item"><a class="nav-link" href="#">Technology (1)</a></li> </ul>
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
That’s possible.
Change the red marked class in the image below:
To:
justify-content-end
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s a good idea too! And we will implement this logic in the template files for next version. Thanks.
Here’s the code you need:
var recaptchaSrcURL = $('#google-recaptcha-v3').attr('src'), newURL = new URL(recaptchaSrcURL), site_key = newURL.searchParams.get("render");
Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
You are definitely right! Sorry I did not think you was using the same JS script for both versions.
We can easily get the country code from the url. Please try changing that part of code to:
var countryCode = window.location.pathname.split('/')[1], site_key = $('#google-recaptcha-v3').attr('src').split("render=")[1].replace('&hl='+countryCode,'');
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for the kind words.
1) Please try changing the code of the word to;
<span class="position-relative">worldwide <span class="position-absolute left-50pct transform3dx-n50 top-12 mt-4 mr-4"> <img src="//www.okler.net/ss/gifs/blue-line.png"" alt=""PC" /> </span> </span>
* Note I used a image hosted in our server (okler.net). You can download this image trough the link and send to your server.
2) For the “WOW” add this code in (css/custom.css):
/* Fade In Right Shorter With Opacity */ @-webkit-keyframes fadeInRightShorterOpacity { from { opacity: 0; transform: translate(-50px, 0); } to { opacity: 0.9; transform: none; } } @keyframes fadeInRightShorterOpacity { from { opacity: 0; transform: translate(-50px, 0); } to { opacity: 0.9; transform: none; } } .fadeInRightShorterOpacity { -webkit-animation-name: fadeInRightShorterOpacity; animation-name: fadeInRightShorterOpacity; }
For the “slide-title-border” you can change the opacity class:
* Try with
oapcity-9
.Suggestion: Add a black overlay on this slide to show the white texts better. Example:
Somehow the button is still not showing on the iphone when rolling the page down (I supposed it would stick to the menu bar)
That’s because the custom CSS code we provided for you is not included in the custom CSS file:
https://www.thepcwow.com/demo/css/custom.css?version=randomHope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
Regarding carousels, seems you already solved the issue, right?
We inspected the website and it’s working normally.
If still not, please try to clear your browser cache.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Seems your
jquery.validate.min.js
file is different from the provided with the template:
https://www.diffchecker.com/PzhocQy0And that’s the reason of the issue.
Please replace all code of this files with the code on link below:
https://www.okler.net/previews/porto/8.3.0/vendor/jquery.validation/jquery.validate.min.jsRegarding google maps api error, you should define an API key in the HTML tag of google maps. For it you should create a google maps account to get the key.
Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Could you show me how to put the text into the far left column of ‘col-md-10 col-lg-6 text-center text-md-right pb-5 ml-auto’
Just change the classes to:
col-md-10 col-lg-6 text-center text-md-left pb-5
new code looks great on desktop, but when viewed on mobile there is too much space at the top and bottom of the centered text.
You can use the
data-dunamic-height
attribute to set different heights for each screen size:<section class="section......." ................... data-dynamic-height="['821px','821px','821px','500px','500px']" style="height: 821px;">......</section>
While talking about mobile views. I need to change some of the text sizes, as they are either too small or too big. I sure mobile text can be changed in the css somewhere.
The template comes with responsive text classes. For example:
<p class="text-4 text-sm-5 text-md-6 text-lg-7 text-xl-8">Lorem ipsum</p>
* Possible values starts from
text-0
untiltext-15
.We hope this helps!
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello Bruno,
This mean that you server has the mail() function disabled. Probably by security reasons.
In this case you should use SMTP to send the emails. Navigate under line 52 of
php/contact-form.php
with a text editor. You will see a few lines with comment (//). Uncomment these below (remove “//”):$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
Contact your hosting provider and ask they for the SMTP settings above. The username and password comes from an email created trough your server.
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh, you are right!
Inspecting more deeply I saw that’s a problem with our JS code.
Please change site_key variable at (view.contact.js) to:
var site_key = $('#google-recaptcha-v3').attr('src').split("render=")[1].replace('&hl=en','');
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) Inspecting your custom CSS file I can not see the custom code I sent for you before. Please add in (css/custom.css):
@media(min-width: 992px) { html.sticky-header-active #header a.btn[title="Click to call"] { position: relative; top: 50px; } html.sticky-header-active #header .header-nav { padding-right: 160px } } @media(max-width: 991px) { html.sticky-header-active #header a.btn[title="Click to call"] { position: relative; top: 50px; right: 180px; } }
* I changed a bit the selectors code, since you have changed some classes. This way will be more effective.
2) Change the
stickyStartAt
andstickySetTop
option values in the header to:<header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 47, 'stickySetTop': '-47px', 'stickyChangeLogo': true}"
3) Change the HTML of each testimonial to:
<div class="testimonial testimonial-tertiary testimonial-with-quotes"> <blockquote class="px-5 py-2"> <p class="mb-0 px-0"> <em>When we searched for a seamless integration of our Mac & PC environment, we got in contact with PC WOW through a friend's referral and indeed they offered the best solution to perfectly fit our needs…</em> </p> </blockquote> <div class="testimonial-arrow-down"></div> <div class="testimonial-author align-items-center"> <div class="testimonial-author-thumbnail"> <img src="img/icons/client.png" class="img-fluid rounded-circle" alt="WOW Happy Client" width="55" height="55" style="max-width: 100px;" /> </div> <p class="mb-0"> <strong>Stephanie S.</strong> — VP | HASS Consultants </p> </div> </div>
Add in (css/custom.css):
.testimonial.testimonial-with-quotes blockquote:before, .testimonial.testimonial-with-quotes blockquote:after { color: #FFF; } .testimonial.testimonial-with-quotes blockquote:before { left: 6px; top: -5px; } .testimonial .testimonial-arrow-down { margin-left: 17px; } .testimonial blockquote p { font-family: Georgia, 'Times New Roman', Times, serif; }
4) I couldn’t see this issue. Maybe you already resolved ?
5) You can reduce the padding with padding helper class:
* Possible values starts from py-0 until py-5.
* Learn more about that here: https://getbootstrap.com/docs/4.6/utilities/spacing/Footer Copyright:
6) Add in (css/custom.css):
.twitter a { color: #FFF !important; } .twitter a:hover { color: #d8d8d8 !important; }
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s probably you are using the V3 of recaptcha, where an action from user is not needed. The V3 detect that the user is not a bot trough javascript events. The language is useful when using the V2 of recaptcha.
Hope this helps and clarify!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Replace the section with carousel with this new code:
<section class="section section-funnel border-0 m-0 p-0" style="background-image: url(img/landing/test-bg-flip.png); background-size: cover; background-position: center;height: 821px;"> <div class="container position-relative z-index-3 h-100"> <div class="row align-items-center h-100"> <div class="col-md-10 col-lg-6 text-center text-md-right pb-5 ml-auto"> <h1 class="text-color-dark font-weight-extra-bold text-10 line-height-2 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="500" data-plugin-options="{'minWindowWidth': 0}">Powerful, Flexible Learning for Business. For Life.</h1> <h2 class="text-color-default font-weight-normal text-5-5 line-height-2 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-plugin-options="{'minWindowWidth': 0}">Achieving your potential, just got easier</h2> <a href="#" class="btn btn-primary btn-modern font-weight-semibold text-3 btn-py-3 px-5 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">GEST STARTED</a> </div> </div> </div> </section>
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The code isn’t being accepted, I will update the site link, please give me 30mins
Great! With site published in a live link hidden for test purpose, like http://www.doman.com/test/, we can inspect the code and send the best solution for you. We await for the link.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is resolved now!
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
Sorry but we couldn’t reproduce this issue here.
Can you please send a live links with your website for us ? So we can inspect the code, do some tests and see what’s happening. In some situations, for example with an AJAX request that returns and insert a new datepicker on the page, the code of the plugin should be run again (code inside theme.init.js that initializes the plugin in question).
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Probably that’s a cache issue.
Try the following:
– Clear the browser cache. Here’s how: http://www.refreshyourcache.com/en/home/
– If you have CLoudFlare enabled in your domain and the cache of CF activated, you need purge the CF cache in every change (only if you have CF enabled)
– Check if your server has some server side cache. IF yes, you need clear this cache on every change. Or simply disable it temporaly.99% that probably your issue is related to the first item above. (browser cache).
IF none of these instructions works, maybe you are having problem with FileZilla. Try to close and open again. If even so not works, upload the files trough hosting server Control Panel Files Manager.
Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchase.
Sorry the delay for this reply. The response time for tickets increase on weekends.
We’ve checked your websites and seems your already solved the issue, right ?
Probably the problem was the path in the SASS config file. The paths are different in both websites.
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great!
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
We did a test now. Did you received our email ?
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Unfortunately there’s no way to change for hamburguer menu in this situation. But here’s the code you need to fix your layout:
@media(min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { #header .header-logo, #header .header-logo img { width: 150px !important; height: auto !important;; } #header .header-nav-main nav > ul > li > a { font-size: 14px !important; padding: 0 10px !important; } #header > div > div.header-container.container-fluid.bg-secondary-black.px-0 > div:nth-child(1) > div.header-column.justify-content-center.justify-content-lg-start.px-lg-2 { width: 90% !important; flex: 0 0 auto; position: relative; left: -75px; } #header > div > div.header-container.container-fluid.bg-secondary-black.px-0 > div.header-row.d-none.d-lg-inline-flex.justify-content.bg-color-primary { width: 5% } #header > div > div.header-container.container-fluid.bg-secondary-black.px-0 > div.header-row.d-none.d-lg-inline-flex.justify-content.bg-color-primary, #header > div > div.header-container.container-fluid.bg-secondary-black.px-0 > div.header-row.d-none.d-lg-inline-flex.justify-content.bg-color-primary > div { display: flex !important; } #header > div > div.header-container.container-fluid.bg-secondary-black.px-0 > div.header-row.d-none.d-lg-inline-flex.justify-content.bg-color-primary > div > div > div > div.feature-box-icon.mr-1 { display: none; } #header > div > div.header-container.container-fluid.bg-secondary-black.px-0 > div.header-row.d-none.d-lg-inline-flex.justify-content.bg-color-primary > div > div > div { left: 35px !important; } }
* Add in the last line of custom.css file.
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Can you please kindly check if cookies are enabled in your device ?
Kind Regards,
Rodrigo.
Support2
KeymasterHello, first thanks for your purchase and the kind words.
That’s a error 500.
Error 500 can be related to a lot of things. The most common is syntax error in the
php/contact-form.php
file.Please send for us all code of this file. You can create a link with the code at https://pastebin.com and share the link with us (credentials infos replace with “xxxxxxxx”).
This way we can check if has syntax error.
In the meantime, and to solve this issue as fast possible, you can also send us the error_log file of your server. This is the log file where PHP errors are registered. This way we can know the exactly reason of the error 500. This error_log.txt file normally is available trough FTP under folder like “/log”. But some servers has it not enabled, in this case you need contact the hosting provider support and ask for the error_log.txt file.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
1) First add the Popup HTML just after the
<div class="body">
:.... ....... <div class="body"> <!-- Popup --> <div id="appointmentPopup" class="dialog dialog-sm zoom-anim-dialog mfp-hide"> <h3 class="font-weight-semi-bold">Dialog example</h3> <p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p> </div> ....... .........
2) In the appointment button links you need change the href to
href="#appointmentPopup"
and add the classpopup-with-move-anim
. Example in the header top button:<span class="header-top-button-make-as-appoitment d-inline-flex align-items-center justify-content-center h-100 p-0 align-top"> <a href="#appointmentPopup" class="popup-with-move-anim d-flex align-items-center justify-content-center h-100 w-100 btn-primary font-weight-normal text-decoration-none">MAKE AN APPOINTMENT</a> </span>
3) Add the script
examples.lightboxes.js
on footer of page (as the last script included on the page):<script src="js/examples/examples.lightboxes.js"></script>
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The issue is you are using the contact form class for Google Recaptcha V3.
To fix, change the class in the form to:
<form class="contact-form" action="php/contact-form.php" method="POST">
* Also note the PHP file changed.
If your idea is use the recaptcha v3:
– Maintain the code as it is now.
– Create a recaptcha account V3 and get the API Keys.
– Add this script on footer of the page:<script id="google-recaptcha-v3" src="https://www.google.com/recaptcha/api.js?render={{google.recaptcha_v3.sitekey}}"></script>
* Change
{{google.recaptcha_v3.sitekey}}
with the recaptcha SITE_KEY.We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh right!
This is possible.
Change the first code at custom.css to:
.owl-carousel.custom-background-1:before { width: calc(100% - 1px); z-index: 1; pointer-events: none; }
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
We did a test now and really the GDPR bar do not appear on real mobile devices. Very strange!
We will look into a fix for it more deeply and reply for you soon with a fix!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please replace the HTML of countdown with this new:
<div class="countdown countdown-primary" data-plugin-countdown data-plugin-options="{'date': '2022/01/01 12:00:00', 'wrapperClass': 'text-color-light', 'numberClass': 'font-weight-extra-bold text-color-light'}"></div>
Replace the date as per your needs.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchases.
Unfortunately that’s not a good idea.
Both templates uses common libs, but in different versions. So if you do that, probably will break something.
The best way is maintain the vendor folder separate.
For example:
– Bootsrap: We have the v4.5.3 at Porto HTML and the v4.6.0 at Porto Admin.
What you can is check the version of each lib in both templates, and if is the same, you can maintain in the same folder.
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Here’s the code you need:
Replace all code at (css/custom.css):
/* Add here all your CSS customizations */ .owl-carousel.custom-background-1:before { width: calc(100% - 1px) } @media(max-width: 1199px) { .owl-carousel.custom-background-1:before { width: calc(100% - -3px); left: -2px; } } @media(max-width: 991px) { .owl-carousel.custom-background-1:before { width: calc(100% - -4px); left: -2px; } } @media(max-width: 767px) { .owl-carousel.custom-background-1:before { width: calc(100% - -2px); left: -2px; } .owl-carousel.custom-background-1 .owl-stage { max-height: 541px !important; } } @media(max-width: 575px) { .owl-carousel.custom-background-1:before { width: calc(100% - -4px); left: -2px; top: -1px; } .owl-carousel.custom-background-1 .owl-stage { max-height: 541px !important; } } .owl-carousel.custom-background-1 .owl-item img { border-radius: 25px; } .owl-carousel.custom-background-1 .owl-stage { overflow: hidden; max-height: 541px; } .owl-carousel.custom-background-1 { bottom: -15px; padding: 3.7% 4.3% 40%; } @media(min-width: 992px) { .custom-background-1 { max-width: 262px; } } @media(max-width: 991px) { .custom-background-1 { max-width: 278px; } .owl-carousel.custom-background-1:before { background-size: 100%; top: -1px; } } /*Hover info za admin panel za ikonice*/ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 25, 2021 at 11:42 pm in reply to: The Definition Of The Option stickySetTop And stickyStartAt #10037196Support2
KeymasterHello,
We will keep this ticket opened, this way another Porto users can find these explanations when searching on this forum.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 25, 2021 at 11:41 pm in reply to: The Definition Of The Option stickySetTop And stickyStartAt #10037195Support2
KeymasterHello,
Regarding the other ticket you opened:
I have removed/deleted it now.can you explain the detailed definition of the two options mentioned above?
stickyStartAt:
That’s the value in pixels for the distance from document top when we scroll down the page. That distance will trigger the activation of the sticky. For example, if you define astickyStartAt: 45
, when the page is scroll down 45px, the sticky effect will trigger.stickySetTop:
That’s the top value for fixed position when sticky header is enabled and we scroll down. The fixed position of header when sticky is active (scroll down). Normally we should use the same value ofstickyStartAt
but with negative values. Eg:'stickySetStop': '-45px'
.OBS: The
stickySetTop
is disabled when using theshrink
effect for the sticky header. Even if you define a value, this will be ignored.Another question: must custom.js be placed before theme.init.js when i customized something related to the plugin.
Yes, should be included before the theme.init.js
An extra addition: i saw variable definitions in the corresponding js files. There’s a variable whose name is stickyatelement. May i ask what the definition of it, and the use case of it.
The
stickyStartAtElement
is useful when you want sticky a header that the position is below a slider. For example:
https://www.okler.net/previews/porto/8.3.0/feature-headers-below-slider.html* You should define the element where the sticky needs to start/trigger. Eg:
'stickyStartAtElement': '#header'
.
* ThestickyStartAt
is ignored when using this option.We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Roberto,
Great the issue is now resolved! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Sri,
Unfortunately this type of layout is something very hard to do with the current version of sliders in the latest versions of Porto. Will be needed do a lot of custom CSS media queries to position the elements with position absolute between each resolution. That’s something our support scope can’t offer.
But do not worry, the Revolution Slider still are included within the template. Inclusively, we have a demo example:
https://www.okler.net/previews/porto/8.3.0/index-slider-revolution.html
* This is a slider running trough revolution slider.My suggestion for you is remove our custom slider (the “owl-carousel xxxxxx”) and replace with a revolution slider. Here’s the code example with exactly layout you mentioned on the init of this ticket:
<div class="slider-container rev_slider_wrapper"> <div id="revolutionSlider" data-version="5.4.8" class="slider rev_slider" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 1170, 'gridheight': [500, 500, 500, 500], 'disableProgressBar': 'on', 'responsiveLevels': [4096,1200,992,500]}"> <ul> <li data-transition="fade"> <img src="img/slides/slide-bg.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg"> <div class="tp-caption" data-x="177" data-y="188" data-start="1000" data-transform_in="x:[-300%];opacity:0;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div> <div class="tp-caption top-label" data-x="227" data-y="180" data-start="500" data-transform_in="opacity:0;s:500;" data-transform_out="opacity:0;s:500;">DO YOU NEED A NEW</div> <div class="tp-caption" data-x="480" data-y="188" data-start="1000" data-transform_in="x:[300%];opacity:0;s:500;"><img src="img/slides/slide-title-border.png" alt=""></div> <div class="tp-caption main-label" data-x="135" data-y="210" data-start="1500" data-whitespace="nowrap" data-transform_in="y:[100%];s:500;" data-transform_out="opacity:0;s:500;" data-mask_in="x:0px;y:0px;">WEB DESIGN?</div> <div class="tp-caption bottom-label" data-x="['185','185','185','95']" data-y="280" data-start="2000" data-fontsize="['20','20','20','30']" data-transform_in="y:[100%];opacity:0;s:500;">Check out our options and features.</div> <div class="tp-caption" data-x="['910','910','910','930']" data-y="248" data-start="2500" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;s:1300;"><img src="img/slides/slide-concept-2-1.png" alt=""></div> <div class="tp-caption" data-x="['960','960','960','980']" data-y="200" data-start="3500" data-transform_in="y:[300%];opacity:0;s:300;"><img src="img/slides/slide-concept-2-2.png" alt=""></div> <div class="tp-caption" data-x="['930','930','930','950']" data-y="170" data-start="3650" data-transform_in="y:[300%];opacity:0;s:300;"><img src="img/slides/slide-concept-2-3.png" alt=""></div> <div class="tp-caption" data-x="['880','880','880','900']" data-y="130" data-start="3750" data-transform_in="y:[300%];opacity:0;s:300;"><img src="img/slides/slide-concept-2-4.png" alt=""></div> <div class="tp-caption" data-x="['610','610','610','630']" data-y="80" data-start="3950" data-transform_in="y:[300%];opacity:0;s:300;"><img src="img/slides/slide-concept-2-5.png" alt=""></div> <div class="tp-caption blackboard-text" data-x="['640','640','640','660']" data-y="300" data-start="3950" data-fontsize="['37','37','37','47']" data-transform_in="y:[300%];opacity:0;s:300;">Think</div> <div class="tp-caption blackboard-text" data-x="['665','665','665','685']" data-y="350" data-start="4150" data-fontsize="['47','47','47','57']" data-transform_in="y:[300%];opacity:0;s:300;">Outside</div> <div class="tp-caption blackboard-text" data-x="['690','690','690','710']" data-y="400" data-start="4350" data-fontsize="['32','32','32','42']" data-transform_in="y:[300%];opacity:0;s:300;">The box :)</div> </li> <li data-transition="fade"> <img src="img/slides/slide-bg.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina> <div class="tp-caption top-label" data-x="['155','155','155','110']" data-y="['100','100','100','150']" data-start="500" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;s:1000;e:Power2.easeOut;"><img src="img/slides/slide-concept.png" alt=""></div> <div class="tp-caption blackboard-text" data-x="['285','285','285','225']" data-y="['180','180','180','230']" data-start="1000" data-fontsize="['30','30','30','40']" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;s:1000;e:Power2.easeOut;">easy to</div> <div class="tp-caption blackboard-text" data-x="['285','285','285','225']" data-y="['220','220','220','270']" data-start="1200" data-fontsize="['40','40','40','50']" data-transform_in="z:0;rX:0;rY:0;rZ:0;sX:0.9;sY:0.9;skX:0;skY:0;opacity:0;s:1000;e:Power2.easeOut;">customize!</div> <div class="tp-caption main-label" data-x="['685','685','685','630']" data-y="['190','190','190','220']" data-start="1800" data-whitespace="nowrap" data-fontsize="['62','62','62','82']" data-transform_in="y:[100%];s:500;" data-transform_out="opacity:0;s:500;" data-mask_in="x:0px;y:0px;">DESIGN IT!</div> <div class="tp-caption bottom-label" data-x="['685','685','685','595']" data-y="['250','250','250','300']" data-start="2000" data-fontsize="['20','20','20','30']" data-lineheight="['20','20','20','30']" data-transform_idle="o:1;" data-transform_in="y:[100%];z:0;rZ:-35deg;sX:1;sY:1;skX:0;skY:0;s:600;e:Power4.easeInOut;" data-transform_out="opacity:0;s:500;" data-mask_in="x:0px;y:0px;s:inherit;e:inherit;" data-splitin="chars" data-splitout="none" data-responsive_offset="on" data-elementdelay="0.05">Create slides with brushes and fonts</div> </li> </ul> </div> </div>
Make sure to include the revolution slider CSS in the head of document:
<!-- Revolution Slider CSS --> <link rel="stylesheet" href="vendor/rs-plugin/css/settings.css"> <link rel="stylesheet" href="vendor/rs-plugin/css/layers.css"> <link rel="stylesheet" href="vendor/rs-plugin/css/navigation.css">
And the JS scripts on footer:
<!-- Revolution Slider Scripts --> <script src="vendor/rs-plugin/js/jquery.themepunch.tools.min.js"></script> <script src="vendor/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh right! Your project uses two types of headers. In this case we need identify each header with unique classes, and then apply the code.
For example in the “quem-somos.html” page, add the class “custom-header-style-1”:
<header id="header" class="custom-header-style-1 .................
And change the CSS code to:
@media(max-width: 575px) { #header.custom-header-style-1 .header-logo, #header.custom-header-style-1 .header-logo img { width: 160px !important; height: auto !important; } html.sticky-header-active #header.custom-header-style-1 .header-logo, html.sticky-header-active #header.custom-header-style-1 .header-logo img { width: 120px !important; height: auto !important; top: 39px !important; } }
Apply the same logic with the home page where the header logo is centered and uses a different CSS code. But now with the unique class name “custom-header-style-2”.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your your purchase.
We recommend never do changes in the template core files like theme.css, theme-elements.css, theme.js, theme.init.js, etc… Always, when you need a custom CSS you should use the “css/custom.css” for CSS and the “js/custom.js” for JS. This is recommended to prevent future problems with template version updates.
But, in your case, you do not need any custom CSS to change this paragraph text color. The template comes with some ready colors classes. The light (white) for your paragraphh:
<p class="text-color-light">........</p>
You can see all the possibilities in the Documentation that comes with the tempalte.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchase.
Please note that the images and videos are not included within the template files. This is described in our Porto HTML ThemeForest item. In the place of images we put grey placeholders, and the videos are there but not functional. You should replace the files with your own images and video files.
For example:
– Replace the image at “/video/memory-of-a-woman.jpg” with your own image (you can keep the same file name)
– Replace the video at “/video/memory-of-a-woman.mp4” with your own video (you can keep the same file name)This way the video will works.
We hope this helps and clarify!
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
There’s a custom CSS code in your (css/custom.css) file that it’s with wrong
height
value.Please replace this entire part of code with this new:
@media(max-width: 575px) { #header .header-logo, #header .header-logo img { width: 160px !important; height: auto !important; } html.sticky-header-active #header .header-logo, html.sticky-header-active #header .header-logo img { width: 120px !important; height: auto !important; top: 39px !important; } }
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Really is a good idea update the template to a minimum version of 8.0.0 (currently we are at 8.3.0). The reason is the performance. In favor of Google Web Vitals, since 8.0.0 we have made a lot of changes in the way that JS plugins are initialized in the page.
I saw your current template version running in your website is 5.7.2. Really, this is a very old version and unfortunately simply replace the CSS and JS files from the latest version (8.3.0) will break your website.
Unfortunately the only way to update your 5.7.2 website to 8.3.0 is manually step by step. Currently, your website is running bootstrap 3 and in the latest version of Porto we use bootstrap 4. That’s a very big major update. A lot of changes from BS3 to BS4, mainly in the HTML structure like class names, etc…
Probably the best way is follow this migration guide from BS3 to BS4:
https://getbootstrap.com/docs/4.6/migration/We tried to adjust the new “Classic” but it doesn’t work for the “blackboard” section animation!
Sorry, but I did not understand what’s exactly it’s not working. When we inspect your website, we can see the blackboard working normally.
Also we would like to have the button “Service Hotline” always on top of the page, just like your website holds the “login” regardless of the windows size (desktop/mobile)…
The CSS code below will make the button appear when sticky is active (scroll down).
You can create a “css/custom.css” file in your project and add the code below inside. Then add include he stylesheet on the page:
<link rel="stylesheet" href="css/custom.css" type="text/css" />
@media(min-width: 992px) { html.sticky-header-active #header > div > div > div > div:nth-child(2) > div:nth-child(1) > nav > ul > li.hidden-xs > span > div > a.btn.btn-3d.btn-xs.btn-quaternary.mb-2 { position: relative; top: 50px; } html.sticky-header-active #header .header-nav { padding-right: 160px } } @media(max-width: 991px) { html.sticky-header-active #header > div > div > div > div:nth-child(2) > div:nth-child(1) > nav > ul > li.hidden-xs > span > div > a.btn.btn-3d.btn-xs.btn-quaternary.mb-2 { position: relative; top: 50px; right: 180px; } }
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great that you figured this out!
Great section type fits with what you wish.
Regarding min height, this is needed to maintain the col “fluid” at the right (or left). You can overwrite these min height values to fit with your website layout trough the custom.css file:
@media (max-width: 991px) { .fluid-col-lg-6 { min-height: 60vw!important; } }
The code above will overwrite the default:
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 24, 2021 at 4:11 am in reply to: Issue with Before / After element in Architecture & Interior Design demo #10037154Support2
KeymasterHello,
Great the issue is now resolved! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 23, 2021 at 11:27 pm in reply to: Issue with Before / After element in Architecture & Interior Design demo #10037147Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello Pelle,
This is not possible.
But you can do something similar with the Multi-Select examples here:
https://www.okler.net/previews/porto/8.3.0/feature-admin-forms-advanced.htmlHope this helps!
kind Regards,
Rodrigo.
Support2
KeymasterHello,
Regarding the spacer, you can remove it on mobile with the class:
<div class="spacer d-none d-lg-block".......
Learn more about these responsive display classes here:
https://getbootstrap.com/docs/4.6/utilities/display/#hiding-elementsRegarding the container sizes, you have two options:
1) Maintain the page header like the last example and increase the others
.container
classes of the website. This mean make your entire website more wider. You can do that by changing thecontainer
class tocontainer container-lg-custom
,container container-xl-custom
orcontainer-fluid
(full width).OR
2) Maintain the layout as it is and use CSS media queries to position the page header texts like you want. For example:
HTML:<section class="section section-with-shape-divider custom-bg-color-1 border-0 pt-0 py-0 m-0"> <div class="container-fluid position-relative z-index-1 px-0"> <div class="row pt-4"> <div class="col-xl-6 pb-5 mb-md-5 order-2 order-xl-1"> <div class="custom-padding"> ....... ........ </div> </div> <div class="col-xl-6 mt-5 order-1 order-xl-2"> <img src="https://www.absorblms.com/uploads/layout/builder/1611860494_product-absorb-lms.jpg" class="w-100 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-appear-animation-duration="1500ms" alt="Demo SEO 2" /> </div> </div> </div> </section>
* Note the class
custom-padding
.And use CSS media queries to position between the screen sizes. For example:
(css/custom.css:@media(min-width: 1200px) { .custom-padding { padding-left: xxxxxxxxx; } } @media(min-width: 1400px) { .custom-padding { padding-left: xxxxxxxxx; } } @media(min-width: 1600px) { .custom-padding { padding-left: xxxxxxxxx; } }
Unfortunately that’s the only way to position like want. The template do not comes with ready classes or features to position like you mentioned in the image. The only way on this case is custom CSS with media queries.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Seems you are trying to integrate the Porto Admin Extension + Porto HTMl, right ? But inspecting your source code I saw you are nothing doing it. Just copying and pasting the HTML from Porto Admin to Porto HTML5 will not make the things work.
Please learn how to integrate the Porto Admin Extension with Porto HTML here:
By including the Porto Admin extension files in the website, you will get the spinner working.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
We are almost there! Do not worry in sending questions 🙂
Now the problem is that you included the
examples.modals.js
script before thejquery.min.js
.Change the position of the script to the red mark in the image below:
Also make sure the JS scripts I sent for you before (with the setTimeout to trigger the button) are included in this position and not before the jquery script. Or, even better, inside the custom.js file.
Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
We are to help do not worry in send questions ::)
Please try with this new code:
<section class="section section-with-shape-divider custom-bg-color-1 border-0 pt-0 py-0 m-0"> <div class="container-fluid position-relative z-index-1 px-0"> <div class="row pt-4"> <div class="col-xl-6 pb-5 mb-md-5 order-2 order-xl-1"> <div class="px-5"> <div class="spacer" style="height: 80px;"></div> <h1 class="text-color-dark font-weight-bold text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">Powerful, Flexible Learning for Business, for Life</h1> <p class="custom-text-color-grey-1 text-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">Achieving your development aspirations, just got easier. </p> <p class="text-4">Your company training needs are unique, and so are our services. Our fully customised programs and preconfigured learning modules are built to keep learners engaged, informed and empowered. </p> <a href="#" class="btn btn-dark btn-modern font-weight-semibold px-5 py-3 text-3 mb-md-5 mt-3 mr-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">GET STARTED</a> <a href="#" class="btn btn-dark btn-modern font-weight-semibold px-5 py-3 text-3 mb-md-5 mt-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">HOW IT WORKS</a> <div class="spacer d-none d-md-block" style="height: 310px;"></div> </div> </div> <div class="col-xl-6 mt-5 order-1 order-xl-2"> <img src="https://www.absorblms.com/uploads/layout/builder/1611860494_product-absorb-lms.jpg" class="w-100 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-appear-animation-duration="1500ms" alt="Demo SEO 2" /> </div> </div> </div> </section>
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
There’s two issues with your code:
1) First you should include the script
<script src="js/examples/examples.modals.js"></script>
on footer of page.2) You are adding the HTML of the modal (the button and modal popup) in the final of document (after all scripts). This way the
examples.modals.js
code is run, but the HTML of modal is not yet inserted on the DOM. You need add somewhere above the scripts.Hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
However, please note this is a question out of our support scope. Unfortunately, we never tested the template with Vue.js and do not have the needed knowledge to guide you with that.
I did a search on google, hope the links below help!
– https://overclocked.medium.com/adding-vue-js-to-an-existing-project-ed2d040f870b
– https://stackoverflow.com/questions/42667535/how-to-use-html-template-with-vue-js (maybe this is good in case you are having problems with jQuery)
– https://stackoverflow.com/questions/55582158/integrate-existing-static-html-website-into-existing-vue-js-web-appAs I said before we have no knowledge with Vue.js. The support is here for questions related to template as it is when download from THemeForest (HTML, CSS and pure JS/jQuery). This is based on Envato Support Policy.
Let us know if you have more questions.
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
Sorry but we couldn’t reproduce this issue:
Would be great if you can send a movie, and a link with your website where’s that textarea. Maybe some custom code is generating this effect.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Using as example the slider at our current
index-classic.html
demo:
https://www.okler.net/previews/porto/8.3.0/index-classic.htmlYou can see the elements appear in different times (delays), that’s the same effect from the link you sent. But in this case, we haven’t defined large delays.
This is the code of first slide at
index-classic.html
:<!-- Carousel Slide 1 --> <div class="owl-item position-relative" style="background-image: url(img/slides/slide-bg-performance.jpg); background-color: #2E3136; background-size: cover; background-position: center;"> <div class="container position-relative z-index-1 h-100"> <div class="d-flex flex-column align-items-center justify-content-center h-100"> <h3 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorter" 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="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> DO YOU NEED A <span class="position-relative">NEW <span class="position-absolute left-50pct transform3dx-n50 top-0 mt-4"><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.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" /> </span> </h3> <h1 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}">WEB DESIGN?</h1> <p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0}">Check out our options and features</p> </div> </div> </div>
* Note the elements have the
data-appear-animation
plugin enabled, and along with it, has thedata-appear-animation-delay="xxxx"
attribute. This is how you should define the delays to show the element. The delay value is in mili-seconds. For example:data-appear-animation-delay="500" --> is the same as 500ms data-appear-animation-delay="2000" --> is the same as 2000ms (2 seconds)
This way you can define different delays for each element and show one by one like in the example link you sent.
We hope this helps and clarify your question!
If you need further assistance feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
Great you figured out how to solve the other issue!
Regarding this new one about columns. You can create one list in one column and use the CSS property
columns: 2;
.Example:
<div class="row"> <div class="col-12"> <ul class="list list-ordened" style="columns: 2;"> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> <li>sadasdasd</li> </ul> </div> </div>
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
First change the columns that wraps the instagram element to:
<div class="col-md-4 position-relative top-7"> ................. </div>
* Do that only in the column of instagram. This will move the column a bit to bottom and align the texts.
Then, change the envelope icon (email) to:
<i class="icon-featured icons icon-envelope mb-3 position-relative top-4"></i>
* This will move the icon a bit to bottom and consequently align with others.
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
Great the issue is resolved! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
I am little confused with what your mean, but maybe I understood. Let’s try:
In this example I will use as base the same code from home page, and change somethings:
<section class="section section-with-shape-divider custom-bg-color-1 border-0 pt-0 py-0 m-0"> <div class="container-fluid position-relative z-index-1 px-0"> <div class="row align-items-center pt-4"> <div class="col-md-6 pb-5 mb-md-5 order-2 order-md-1"> <div class="px-5"> <div class="spacer" style="height: 110px;"></div> <h1 class="text-color-dark font-weight-bold text-10 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">Powerful, Flexible Learning for Business, for Life</h1> <p class="custom-text-color-grey-1 text-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">Achieving your development aspirations, just got easier. </p> <p class="text-4">Your company training needs are unique, and so are our services. Our fully customised programs and preconfigured learning modules are built to keep learners engaged, informed and empowered. </p> <a href="#" class="btn btn-dark btn-modern font-weight-semibold px-5 py-3 text-3 mb-md-5 mt-3 mr-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">GET STARTED</a> <a href="#" class="btn btn-dark btn-modern font-weight-semibold px-5 py-3 text-3 mb-md-5 mt-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">HOW IT WORKS</a> <div class="spacer d-none d-md-block" style="height: 310px;"></div> </div> </div> <div class="col-md-6 mt-5 order-1 order-md-2"> <img src="img/demos/seo-2/concept-1.png" class="img-fluid position-relative z-index-1 pb-5 mb-5 ml-5 top-10 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="750" data-appear-animation-duration="1500ms" alt="Demo SEO 2" /> </div> </div> </div> </section>
* Note the container changed to
container-fuid
. This will make the columns full width relative to browser width.
* I also added a div<div class="px-5">
to create a space and the layout with texts looks better.
* Note theorder-xx
classes. This will move the image to top on mobile.Hope this helps!
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
This is possible.
Using as base the first modal button (the “Basic”):
<!-- Modal Basic --> <a class="mb-1 mt-1 mr-1 modal-basic btn btn-default" href="#modalBasic">Basic</a> <div id="modalBasic" class="modal-block mfp-hide"> <section class="card"> <header class="card-header"> <h2 class="card-title">Are you sure?</h2> </header> <div class="card-body"> <div class="modal-wrapper"> <div class="modal-text"> <p class="mb-0">Are you sure that you want to delete this image?</p> </div> </div> </div> <footer class="card-footer"> <div class="row"> <div class="col-md-12 text-right"> <button class="btn btn-primary modal-confirm">Confirm</button> <button class="btn btn-default modal-dismiss">Cancel</button> </div> </div> </footer> </section> </div>
You can trigger the modal to open on page load with this code at “js/custom.js”:
// JS ONLY EXAMPLE $(window).on('load', function(){ var delay = 3000; // Time in mili-seconds setTimeout(function(){ $('a[href="#modalBasic"]').trigger('click'); }, delay); }); // PHP EXAMPLE // First you should print a class in the <body> tag. Eg: <body class="trigger-basic-modal"> // Then, use this JS code $(window).on('load', function(){ if( $('body').hasClass('trigger-basic-modal') ) { var delay = 3000; // Time in mili-seconds setTimeout(function(){ $('a[href="#modalBasic"]').trigger('click'); }, delay); } });
* Note the explanation for PHP example. You should select one of the ways in the above code and use only one of them.
BONUS:
You can hide the button if you want:<a class="mb-1 mt-1 mr-1 modal-basic btn btn-default d-none" href="#modalBasic">Basic</a>
We hope this helps!
kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello Pelle, long time!
We hope everything is ok with you too!
In the sub-lists
<ul>
you should add the classlist-ordened
:Example:
<!-- MAIN LIST --> <ul class="list list-ordened"> <!-- SUB LIST --> <ul class="list list-ordened"> ....... </ul> </ul>
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
By default the animations are disabled on mobile devices in favor of performance (mainly for low spec devices). If you want to enable the animation on mobile please try adding the code below at (js/custom.js):
$.extend(theme.PluginAnimate.defaults, { minWindowWidth: 0 });
In the pages where instagram is lower than others, remove this
py-2
class:
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thanks you so much for your feedback!
Based on your comment, we did a lot of more tests here, and really some times the elements with animation did not appear. Seems to be related to the “Intersection Observer API” we are using to initialize the plugins (recently added in the template in favor of performance). We are investigating more deeply and I already added this to our to-do list for bugs. We will try to resolve this issue as soon possible!
Once we have this resolved, we will let you know here.
Sorry for this inconvenience, and really this occurs very occasionally, we need to reload the page multiple times.
Thanks for your patience!
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
Thanks for the link!
I saw you did a try with parallax option, but there’s HTML syntax error making the parallax options not work. Also
0%
of value for the parallax will make the image disappear.Please try changing to:
<section class="page-header page-header-modern page-header-background-md py-5" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%'}" data-image-src="img/page-header/page-header-parallax.jpg">........</section>
Regarding moving the text to above or below the parallax section, the best way is hide the text inside the parallax and duplicated the text where you want (above or below). For example:
<section class="page-header page-header-modern page-header-background-md py-5" data-plugin-parallax data-plugin-options="{'speed': 1.5, 'parallaxHeight': '120%'}" data-image-src="img/page-header/page-header-parallax.jpg"> <div class="container py-5 py-lg-0"> <div class="row d-none d-lg-flex"> <div class="col-md-5 mt-5 align-self-center p-static order-2 text-left"> <h1 class="text-color-dark font-weight-bold text-10 line-height-2 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">Bring your organisation's learning into the digital age</h1> <p class="custom-text-color-grey-1 text-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">How working with Humanistics can work for you. </p> <p class="custom-text-color-grey-1 text-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">Training programs used to be a logistical nightmare, taking days to organise. Not anymore, all our learning programs are available when it suits you. </p> </div> </div> </div> </section> <!-- DUPLICATE THE TEXT HERE --> <div class="container d-lg-none"> <div class="row"> <div class="col-md-5 mt-5 align-self-center p-static order-2 text-left"> <h1 class="text-color-dark font-weight-bold text-10 line-height-2 mb-3 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">Bring your organisation's learning into the digital age</h1> <p class="custom-text-color-grey-1 text-5 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">How working with Humanistics can work for you. </p> <p class="custom-text-color-grey-1 text-4 mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">Training programs used to be a logistical nightmare, taking days to organise. Not anymore, all our learning programs are available when it suits you. </p> </div> </div> </div>
* Note I used
d-none d-lg-flex
,d-lg-none
to hide or show the content on respective screen size.
* Also added some classes likepy-5 py-lg-0
in the container to maintain the parallax image with high height on mobile.We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 18, 2021 at 11:40 pm in reply to: Can i use porto html (extended) in product that i will sell on online platforms #10037014Support2
KeymasterHello, thanks for your interest in our template.
Please refer to the other ticket you opened and we already answered.
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
Great! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please keep the code that removes the border and use this custom CSS code to generate the “line border” as you wish:
(css/custom.css):
#header .header-top { position: relative; } #header .header-top:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 1px solid #000 }
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thanks for the screenshot!
In the index-corporate-4.html we couldn’t reproduce this issue anytime, but in another pages we note that something similar occurs.
Let me know: This glitch is very occasional, our occurs all time you reload the page ?
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thanks!
Please try with the class
border-bottom-0
at:........... <div class="header-top header-top-borders border-bottom-0">.......</div> ..........
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
I think understood what you mean, but can you please share all the HTML code you are using, so we can do test and modify to like you wish. To get this working we should organize the HTML bootstrap grid columns and orders.
Would be great if you can upload your website to a webserver and send the link for us, so we can inspect the code and do some tests to try reproduce the layout behavior you wish.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 18, 2021 at 12:08 am in reply to: Checked box required contact form / anti Spam option #10036973Support2
KeymasterHello,
Please try changing the addReplyTo to:
// Repply To if( isset($_POST['email']) && !empty($_POST['email']) ) { $mail->AddReplyTo($_POST['email'], $fromName); }
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Sorry but we couldn’t reproduce the issue without the entire
<header>
code you are using.Please share the
<header>....</header>
code with us. You can use a service like https://pastebin.com to generate a link with the code and share with us.Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Here’s the code you need:
(css/custom.css):
.tooltip-inner { background-color: red; color: yellow; } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: red; }
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Regarding arrows we did a new test here with your website code (inserting the arrows) and it’s working normally. Make sure you have the nav and dots code side by side. Eg:
<div class="owl-dots mb-5"> <button role="button" class="owl-dot active"><span></span></button> <button role="button" class="owl-dot"><span></span></button> <button role="button" class="owl-dot"><span></span></button> </div> <div class="owl-nav"> <button type="button" role="presentation" class="owl-prev"></button> <button type="button" role="presentation" class="owl-next"></button> </div>
Regarding parallax, the HTML is correct. The problem is the image is not found in your server:
https://lewiswebdesigns.com/images/van5.webpRegarding how to send image here, you can use https://imgbb.com to create a link and share with us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 17, 2021 at 5:40 am in reply to: Centre Page Header Background Image on mobile devices #10036957Support2
KeymasterHello, thanks for your purchase.
I saw you already checked as resolved, but here’s the way:
Using as example the page header from here: https://www.okler.net/previews/porto/8.3.0/feature-page-headers-background-fixed.html
You should add CSS
background-position: center;
in thestyle
attribute. Eg:<section class="page-header page-header-modern page-header-background page-header-background-md overlay overlay-color-dark overlay-show overlay-op-5" style="background-image: url(img/page-header/page-header-background.jpg);background-position: center;">.......</section>
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 17, 2021 at 5:35 am in reply to: Checked box required contact form / anti Spam option #10036955Support2
KeymasterHello,
Please note we receive a high volume of tickets per day, and our time for response is 24 ~ 48 hours. Normally we reply in less than 24 hours.
Checking your PHP file it’s missing set the
setFrom
. Please change this part of code to:// From - Name $fromName = ( isset($_POST['name']) ) ? $_POST['name'] : 'Website User'; $mail->SetFrom($email, $fromName); // Repply To if( isset($_POST['email']) ) { $mail->AddReplyTo($_POST['email'], $fromName); }
* Note the code above the “Repply To”. This is the code you should insert.
* Also you have “Repply To” code duplicated, you can remove one of them.Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello,
1) You can use the helpers line-height classes in the main title. For example:
<h1 class="line-height-3">....</h1>
* Values starts from
line-height-1
untilline-height-9
.
* These classes are responsive too, example:line-height-3 line-height-sm-4 line-height-lg-5
.2) You can play with the
parallaxHeight
option in the parallax plugin options:data-plugin-options="{'speed': 1.5, 'parallaxHeight': '130%'}"
* The default value (wen the options is not defined) is 180%.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Robert,
Great the issue is now resolved! 🙂
If you need further assistance feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your new purchase.
First we should reduce the logo size on mobile devices:
(css/custom.css):
@media(max-width: 575px) { #header .header-logo, #header .header-logo img { width: 300px !important; height auto; } }
And to always keep the logo centered in all resolutions/screen sizes, change the header column that wraps the logo from:
<div class="header-column justify-content-start justify-content-md-center ">
To:
<div class="header-column justify-content-center ">
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Regarding the arrows issue, sorry but we couldn’t reproduce the issue. Seems to be working normally. Here’s a gif showing:
Slider Gif* This gif is big and has 9mb.
Regarding issue number 2 (animations), we use the same resolution here. I did new test reloading the page multiple times, scrolling and reloading, and the issue did not occur. Can you please send us some screenshot or maybe a video showing the issue ?
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 10 months ago by
Support2.
Support2
KeymasterHello, thanks for your purchase.
First sorry for these issues and thanks for reporting.
1) To fix, please try adding this given JS code below at (js/custom.js):
$.extend( theme.PluginCarouselLight.prototype, { owlDots: function(){ var self = this, $owlDot = self.$el.find('.owl-dot'); $owlDot.on('click', function(e){ $this = $(this); e.preventDefault(); if( self.options.disableAutoPlayOnClick ) { window.clearInterval(self.autoPlayInterval); } if( self.avoidMultipleClicks() ) { return false; } var dotIndex = $(this).index(); // Do nothing if respective dot slide is active/showing if( $this.hasClass('active') ) { return false; } self.changeSlide( self.$el.find('.owl-item').eq( dotIndex ) ); }); return this; } } )
* We already fixed it in our development files, and this fix will be present in the next version of Porto.
2) Sorry but we couldn’t reproduce this issue here. We tested in the corporate-4 like you mentioned, but without success. Please let us know what’s the browser you are testing ? Chrome ? Firefox ? Safari ?
And what’s your screen resolution ?
3) To fix, first please change the
portfolioAjaxBox
div to:<div id="porfolioAjaxBox" class="ajax-box ajax-box-init position-relative z-index-1">......</div>
And change the sort list HTML to:
<ul class="nav nav-pills sort-source sort-source-style-3 justify-content-center position-relative z-index-3" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows', 'filter': '*'}">
* Note we just added
position-relative
andz-index-xx
classes.
* We already fixed it in our development files, and this fix will be present in the next version of Porto.4) Our parallax do not requires any extra plugin to include on the page. You just need maintain the core JS files “theme.js” and “theme.init.js” on footer of page, and have the correct HTML structure. Please share with us the code you are trying, so we can edit and send you the correct way. If you have your website online in a web server, would be great if you can share the link with us, so we can inspect the parallax code and check what’s happening.
We hope you enjoy with Porto!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
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).
We hope this helps.
If you have any questions, just let me know.
Kind Regards,
Rodrigo.
March 16, 2021 at 12:47 am in reply to: Checked box required contact form / anti Spam option #10036926Support2
KeymasterHello,
That’s strange, since I saw you are using the latest version of the template. And by default contact forms with email not required should works normally.
Please check if your code for AddReplyTo is like the image below atcontact-form-recaptcha-v3.php
:
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try changing this line of code to:
$message .= $label.": " . nl2br(htmlspecialchars($value, ENT_QUOTES)) . "<br>";
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great that your figured this out!
If you need any further assistance, feel free to contact us!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 13, 2021 at 12:25 am in reply to: How to have in the inner-toolbar a multi level dropdown menu? #10036898Support2
KeymasterHello Jason,
Great the issue is now resolved! 🙂
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Sorry but I did not understand your question.
You mean create a footer on bottom of each table with some information like “Realease Number”, that should always appear for the user, this mean when the user scroll down the table, the footer still should remaining appear ?
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try enabling the layout mode
fitRows
in the data-sort plugin:<ul class="nav nav-pills sort-source sort-source-style-3" data-sort-id="team" data-option-key="filter" data-plugin-options="{'layoutMode': 'fitRows'}">.......</ul>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Emanuele,
Thanks for the access!
The problem is that your are adding the modal content inside the table. This way the modal elements inherit some table styles, generating these layout issues.
My suggestion for you is put all modal contents outside the tables. For example:
<!-- Modal Content --> <div class="modal" data-focus="false" id="modalDipendentiM47" tabindex="-1" role="dialog"> .......... </div> <table> ....... .......... <td align="right" class="actions" width="7%"> <a class="modal-basic" data-toggle="modal" data-target="#modalDipendentiM47" href="#"><i class="fas fa-edit" title="Modifica"></i></a> .... ....... .... </td> .......... ........ </table>
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello Emmanuele,
Sorry but we couldn’t reproduce this issue here:
Would be great if you can put your project in a online web server and send for us the link, so we can inspect the code and see what’s happening. IF that’s something not possible at the moment, then please share with us the entire code you are trying. You can use a server like https://pastebin.com to generate a link with the code and share with us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh right. Sorry.
To get the same theming, please use this HTML:
<div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="my-custom-dropdown dropdown"> <a class="btn btn-primary dropdown-toggle" href="#" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <a href="#" class="dropdown-item">Some action</a> <a href="#" class="dropdown-item">Some other action</a> <li class="dropdown-divider"></li> <li class="dropdown-submenu"> <a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#" class="dropdown-item">Second level</a></li> <li class="dropdown-submenu"> <a class="dropdown-item" href="#">Even More..</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">3rd level</a></li> <li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">4th level</a></li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">4th level</a></li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">4th level</a></li> </ul> </li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">3rd level</a></li> </ul> </li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">Second level</a></li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">Second level</a></li> </ul> </li> </ul> </div> </div> </div>
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 12, 2021 at 12:05 am in reply to: How to have in the inner-toolbar a multi level dropdown menu? #10036869Support2
KeymasterHello,
Please change the HTML to:
<div class="inner-toolbar clearfix"> <ul> <li> <a href="#"><i class="far fa-paper-plane mr-2"></i> Send</a> </li> <li> <a href="#"><i class="fas fa-times mr-2"></i> Discard</a> </li> <li> <div class="dropdown"> <a href="#" class="dropdown-toggle text-decoration-none" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Attach </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </li> <li class="my-custom-dropdown dropdown"> <a class="dropdown-toggle" href="#" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <a href="#" class="dropdown-item">Some action</a> <a href="#" class="dropdown-item">Some other action</a> <li class="dropdown-divider"></li> <li class="dropdown-submenu"> <a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#" class="dropdown-item">Second level</a></li> <li class="dropdown-submenu"> <a class="dropdown-item" href="#">Even More..</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">3rd level</a></li> <li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">4th level</a></li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">4th level</a></li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">4th level</a></li> </ul> </li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">3rd level</a></li> </ul> </li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">Second level</a></li> <li class="dropdown-item"><a href="#" class="dropdown-item px-0">Second level</a></li> </ul> </li> </ul> </li> </ul> </div>
This way you will have the same theming style, like colors, space and sizes.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 11, 2021 at 11:45 pm in reply to: How to have in the inner-toolbar a multi level dropdown menu? #10036867Support2
KeymasterHello,
Oh right.
Here’s the code you need:
HTML:
<div class="inner-toolbar clearfix"> <ul> <li> <a href="#"><i class="far fa-paper-plane mr-2"></i> Send</a> </li> <li> <a href="#"><i class="fas fa-times mr-2"></i> Discard</a> </li> <li> <div class="dropdown"> <a href="#" class="dropdown-toggle text-decoration-none" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Attach </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </li> <li class="my-custom-dropdown dropdown"> <a class="dropdown-toggle" href="#" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li class="dropdown-item"><a href="#">Some action</a></li> <li class="dropdown-item"><a href="#">Some other action</a></li> <li class="dropdown-divider"></li> <li class="dropdown-submenu"> <a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a class="dropdown-item" href="#">Even More..</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#">3rd level</a></li> <li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#">4th level</a></li> <li class="dropdown-item"><a href="#">4th level</a></li> <li class="dropdown-item"><a href="#">4th level</a></li> </ul> </li> <li class="dropdown-item"><a href="#">3rd level</a></li> </ul> </li> <li class="dropdown-item"><a href="#">Second level</a></li> <li class="dropdown-item"><a href="#">Second level</a></li> </ul> </li> </ul> </li> </ul> </div>
(css/custom.css):
.inner-toolbar { overflow: visible; } .inner-toolbar > ul > li { padding-top: 14px; padding-bottom: 14px; } .inner-toolbar > ul > li > .dropdown > a { color: #abb4be; } .inner-toolbar > ul > li > .dropdown > a:hover { color: #FFF; } .my-custom-dropdown .dropdown-submenu { position: relative; } .my-custom-dropdown .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .my-custom-dropdown .dropdown-submenu:hover>.dropdown-menu { display: block; } .my-custom-dropdown .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .my-custom-dropdown .dropdown-submenu:hover>a:after { border-left-color: #fff; } .my-custom-dropdown .dropdown-submenu.pull-left { float: none; } .my-custom-dropdown .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 11, 2021 at 11:39 pm in reply to: center the images in full size revolution slider so image is centered in mobile #10036866Support2
KeymasterHello,
Seems you marked this question as resolved, but inspecting your website I can see the image still are not center aligned on mobile.
To center the background images, you should set the
data-bgposition=""
attribute for each slide image to:<img src="img/slides/slide-bg.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg">
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Please try changing the class of the form to:
<form class="contact-form-recaptcha-v3 custom-form-style-1" action="php/contact-form-recaptcha-v3.php" method="POST">
* Note
contact-form-recaptcha-v3
.We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
Great the issue is now resolved! 🙂
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Probably your server has the simple PHP
mail()
function disabled due to security reasons.In this case you should enable/use the SMTP option to send the emails, like you did with gmail.com account, but now with SMTP settings from your server. You should get the correct SMTP settings with your hosting server provider support.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 11, 2021 at 12:21 am in reply to: Checked box required contact form / anti Spam option #10036825Support2
KeymasterHello,
To get the same design you should add the class
custom-form-style-1
:<form class="contact-form-recaptcha-v3 custom-form-style-1" action="php/contact-form-recaptcha-v3.php" method="POST">
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
This is possible.
Please replace the slider code (owl-carousel) with:
<section class="section section-height-5 border-0 m-0" style="background-image: url(img/your-image.jpg); background-size: cover; background-position: center;"> <div class="container py-5 my-5"> <div class="row py-5 my-5"> <!-- Your Content Here --> </div> </div> </section>
* Note
section-height-5
class. Possible values starts fromsection-height-1
untilsection-height-5
.
* Also note the classespy-5 my-5
. These class increases the space on top and below of these elements, also increasing the section height.We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great!
1) Change the CSS code at (css/custom.css) line 8 to:
.owl-carousel.custom-background-1 { bottom: -15px; padding: 20% 4.5% 40%; }
* Note the padding.
2) Change the class of column that wraps the phone carousel to:
<div class="col-8 col-md-4 col-lg-4 mx-auto d-none d-lg-block">
* Note
d-none d-lg-block
.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved!
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Sorry, I forgot to mention you also should change the
contact-form
class to:<form class="contact-form-recaptcha-v3 custom-form-style contact-page" action="php/contact-form-recaptcha-v3.php" method="POST">....</form>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Change the entire “feature-box” div where’s the icon and number to:
<a class="feature-box feature-box-style-2 align-items-center text-decoration-none" href="tel:6045120216"> <div class="feature-box-icon w-auto h-auto px-1 px-md-2"> <i class="fas fa-mobile-alt text-6 text-md-9 p-relative text-color-dark"></i> </div> <div class="feature-box-info pl-0 d-none d-sm-block"> <p class="pb-0 text-uppercase text-color-dark font-weight-black letter-spacing-minus-1 line-height-1 text-3 text-md-5 ws-nowrap">(604) 512 0216</p> </div> </a>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
We accessed your files and the reason is that part of code:
if ($debug == 2) { echo json_encode($arrResult); }
That should be:
if ($debug == 0) { echo json_encode($arrResult); }
We made this change in the PHP file and now it’s working.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
For sure!
We checked and here’s the code you need:
(css/custom.css):
@media(min-width: 992px) { .custom-background-1 { max-width: 262px; } } @media(max-width: 991px) { .custom-background-1 { max-width: 260px; } .owl-carousel.custom-background-1:before { background-size: 100%; } }
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello Jason,
I am little confused with what you mean with “card action”. If you mean a card with button inside (the action), here’s an sample of code using the same muli-level dropdown we provided for you in the another ticket:
HTML:
<div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="my-custom-dropdown dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Card Action <Button:disabled></Button:disabled> </button> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li class="dropdown-item"><a href="#">Some action</a></li> <li class="dropdown-item"><a href="#">Some other action</a></li> <li class="dropdown-divider"></li> <li class="dropdown-submenu"> <a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a class="dropdown-item" href="#">Even More..</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#">3rd level</a></li> <li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#">4th level</a></li> <li class="dropdown-item"><a href="#">4th level</a></li> <li class="dropdown-item"><a href="#">4th level</a></li> </ul> </li> <li class="dropdown-item"><a href="#">3rd level</a></li> </ul> </li> <li class="dropdown-item"><a href="#">Second level</a></li> <li class="dropdown-item"><a href="#">Second level</a></li> </ul> </li> </ul> </div> </div> </div>
CSS:
.my-custom-dropdown .dropdown-submenu { position: relative; } .my-custom-dropdown .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .my-custom-dropdown .dropdown-submenu:hover>.dropdown-menu { display: block; } .my-custom-dropdown .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .my-custom-dropdown .dropdown-submenu:hover>a:after { border-left-color: #fff; } .my-custom-dropdown .dropdown-submenu.pull-left { float: none; } .my-custom-dropdown .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 10, 2021 at 6:19 am in reply to: How to have in the inner-toolbar a multi level dropdown menu? #10036795Support2
KeymasterHello Jason, thanks for the kind words.
For this case wee need a different approach:
HTML:
<div class="my-custom-dropdown dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> <li class="dropdown-item"><a href="#">Some action</a></li> <li class="dropdown-item"><a href="#">Some other action</a></li> <li class="dropdown-divider"></li> <li class="dropdown-submenu"> <a class="dropdown-item" tabindex="-1" href="#">Hover me for more options</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a tabindex="-1" href="#">Second level</a></li> <li class="dropdown-submenu"> <a class="dropdown-item" href="#">Even More..</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#">3rd level</a></li> <li class="dropdown-submenu"><a class="dropdown-item" href="#">another level</a> <ul class="dropdown-menu"> <li class="dropdown-item"><a href="#">4th level</a></li> <li class="dropdown-item"><a href="#">4th level</a></li> <li class="dropdown-item"><a href="#">4th level</a></li> </ul> </li> <li class="dropdown-item"><a href="#">3rd level</a></li> </ul> </li> <li class="dropdown-item"><a href="#">Second level</a></li> <li class="dropdown-item"><a href="#">Second level</a></li> </ul> </li> </ul> </div>
(css/custom.css):
.my-custom-dropdown .dropdown-submenu { position: relative; } .my-custom-dropdown .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .my-custom-dropdown .dropdown-submenu:hover>.dropdown-menu { display: block; } .my-custom-dropdown .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .my-custom-dropdown .dropdown-submenu:hover>a:after { border-left-color: #fff; } .my-custom-dropdown .dropdown-submenu.pull-left { float: none; } .my-custom-dropdown .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
Add the class “table-striped” to the table class:
<table class="table table-bordered table-striped">
Regarding text size, you can change all texts size by adding helpers class
text-xx
in the<table>
tag. For example:<table class="table table-bordered table-striped text-5">
Or, if you want to change only the text of specific column:
<td class="text-5">Citris</td>
* Possible values of text size starts from
text-0
untiltext-15
.Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s controlled with padding value in the “.owl-carousel.custom-background-1” selector:
You should play with the padding value to fit with your frame size.
If you need help with the exactly code for that, please send a live link with your website for us, so we can inspect the code and send the best solution for you.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) Please try wrapping the “Read Full Details”
<a>
inside a div withd-block
. Example:<div class="d-block"> <a>.........</a> </div>
2) To change the card title font size you can use our built-in helpers classes for font size, that is text-0 until text-15. You can also add responsive levels with these classes, for example:
<p class="text-1 text-sm-2 text-md-3 text-lg-4 text-xl-5"></p>
* This way you will have one font size for each screen size.
Or simply add one font size that will apply for all screen sizes:
<p class="text-4"></p>
* Note that’s without prefix text-xx-4.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) First please remove this input inside the form:
Second, remove the red marked scripts and change the green marked script to:
Green Marked Script To:
<script id="google-recaptcha-v3" src="https://www.google.com/recaptcha/api.js?render=6LcMNXQaAAAAAGoD70jRKDmdmSd9QHe8H7dEiwf8"></script>
2) Unfortunately that’s a browser default behavior and cannot be changed. There’s a lot of smooth scrolling plugins available you can try:
https://github.com/search?l=JavaScript&q=smooth+scroll&type=RepositoriesBut please note we can not guarantee the theme will works 100% if you use one of them, since we never tested and do not use smooth scroll plugins within the template.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh sorry, that’s a bug that surged in our latest updates. For now to fix, please add this custom JS code below at (js/custom.js):
$.extend( theme.Nav, { scrollToTarget: function(target, offset, stopFlag) { var self = this; $('body').addClass('scrolling'); $('html, body').animate({ scrollTop: $(target).offset().top - offset }, self.options.scrollDelay, self.options.scrollAnimation, function() { $('body').removeClass('scrolling'); // If by some reason the scroll finishes in a wrong position, this code will run the scrollToTarget() again until get the correct position // We need do it just one time to prevent infinite recursive loop at scrollToTarget() function if( !theme.fn.isElementInView( $(target) ) ) { if( stopFlag == false ) { self.scrollToTarget( target, offset, false ); stopFlag = true; } } }); return this; } } );
We already addressed to fix this bug in the next version of Porto.
Hope this helps!
Thanks for your patience!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Unfortunately the template do not comes with this exactly image frame style. But with some customization we can accomplish this:
HTML:
<a class="custom-hover-link" href="portfolio-single-wide-slider.html"> <span class="thumb-info thumb-info-no-borders thumb-info-hide-wrapper-bg"> <span class="thumb-info-wrapper position-relative"> <h2 class="position-absolute top-0 left-0 w-100 text-center font-weight-semibold text-color-light text-4 z-index-1">Project Title</h2> <img src="gigimages/gigpage1.jpg" class="img-fluid" alt=""> </span> </span> </a>
(css/custom.css):
.custom-hover-link .thumb-info-wrapper > h2 { background: rgba(0, 0, 0, 0.6) !important; transition: ease background 300ms; } .custom-hover-link:hover .thumb-info-wrapper > h2 { background: rgba(0, 0, 0, 1) !important; }
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
As the @email text is very big, probably the best way is break into two columns above and one below. For it please change the columns structure to:
<div class="row justify-content-center featured-boxes featured-boxes-style-4 pb-3 mb-4"> <div class="col-md-6 col-lg-4"> ........... (email) </div> <div class="col-md-6 col-lg-4"> ........... (instagram) </div> <div class="col-md-4"> ........... (phone) </div> </div>
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try with this custom CSS for the logo:
(css/custom.css):
#header .header-logo img { image-rendering: -webkit-optimize-contrast; transform: translateZ(0); }
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try to clear your browsers cache.
If even so the problem still persist, please try opening the website in another device/desktop.
Here’s a test in a mobile device (iPhone 6):
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
You should remove the
required
attribute. Eg:<div class=”form-group col-md-6 pl-md-2″> <input type=”text” value=”” data-msg-required=”Please enter your phone number.” maxlength=”100″ class=”form-control h-auto py-2″ placeholder=”Your Phone…” name=”phone” id=”phone”> </div>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Laurie,
Probably that’s the best way! 🙂
If you need further assistance feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Probably that’s because the variable
$debug
in the PHP file is different from0
.Please try changing to:
$debug = 0;
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
We are almost there!
It’s missing the class
dropdown-item
in the anchor elements of menu items. Change to:<a class="dropdown-item" data-hash href="#home">
* Do the same for all items.
The data-spy plugin required the
dropdown-item
class in the navigation links.This will definitely resolve the issue!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
You can do that with custom CSS. Please add the given code below at (css/custom.css):
/* Change Logo Size On Small Screens */ @media(max-width: 575px) { #header .header-logo, #header .header-logo img { width: 100px !important; height: auto !important; } } /* Reduce The Space Between Menu Items */ @media(min-width: 992px) { #header .header-nav-main nav > ul > li > a { padding: 0px 15px !important; } }
* See the comments explaining.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Yes, the only way is creating a custom class. Example:
<p class="my-custom-text-color">Lorem ipsum dolor sit a met. </p>
(css/custom.css):
.my-custom-text-color { color: #CCC; }
Important: Never do changes in the theme core files like
theme.css
,theme-elements.css
,theme.js
, ‘theme.init.js’. Instead of it, you should use the filescustom.css
andcustom.js
. The purpose is not break the template in future updates, since we never will made changes in thecustom.css
andcustom.js
on updates.We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
First please remove all code inside of “header-nav-features” div and change to:
<div class="header-nav-features header-nav-features-no-border header-nav-features-lg-show-border order-1 order-lg-2"> <span id="sellfy-shopping-cart" class="position-relative d-inline-block top-5" data-id="xxxxxxxxx" ................................ </div>
* Note
position-relative d-inline-block top-5
in the cart button. This will move the button 5px to bottom. Possible values starts fromtop-0
untiltop-15
. So you need find the value that fit better for your case.
* If you want move the icon to top, instead oftop-xx
you should usebottom-xx
.We hope this helps!
If even so this is not resolved, please put your project in a online web server and the link for us, so we can inspect the code in real time and send the best solution for you.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello, thanks for your purchase.
The problem is your recaptcha v3 PHP file that’s returning error 500 in your server, even if we access it directly in the browser:
https://www.socr.nl/php/contact-form-recaptcha-v3.phpError 500 can be related to a lot of things:
– Check if you server is running a PHP with minimum version of 5.6+
– Check if you have any PHP syntax error in thephp/contact-form-recaotcha-v3.php
file. If you need help for it you can share all code with us, so we can search for syntax error. You can use a service like https://pastebin.com to generate a link with your code and share with us.
– Check if you have CURL or allow_url_fopen enabled in your server. You can do that by creating aphpinfo.php
file in your server with this content:<?php phpinfo(); die();
* Then access the file in the browser, eg: http://www.yourdomain.com/phpinfo.php and search for the terms “allow_url_fopen” and “curl” and see if at last one of both is enabled.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
It’s missing you include the
view.contact.js
script on footer of page. This is the file that makes the validation of the form, and send the form without load a new page.<script src="js/views/view.contact.js"></script>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 8, 2021 at 11:36 pm in reply to: Checked box required contact form / anti Spam option #10036727Support2
KeymasterHello,
1) You can add a new checkbox field in the form. Eg:
<div class="row"> <div class="form-group col"> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" name="agree" id="termsCheckbox" data-msg-required="You must agree before submiting." required> <label class="form-check-label" for="termsCheckbox"> Agree to terms and conditions </label> </div> </div> </div>
2) We recommend for your the Google Recaptcha Options. See the examples here:
– https://www.okler.net/previews/porto/8.3.0/elements-forms-contact-recaptcha-v3.html
– https://www.okler.net/previews/porto/8.3.0/elements-forms-contact-recaptcha-v2.htmlWe also have a Simple PHP Captcha in this example:
– https://www.okler.net/previews/porto/8.3.0/elements-forms-advanced-contact.php* But that’s more inneficient than Google Recaptcha Options. Also will need change a lot your current contact form, since it uses PHP.
Said that, we highly recommend for you the Google Recaptcha V3, since it didn’t require user action to pass trough the captcha. The V3 detects if it’s a bot or not trough javascript events.
To implement, probably the best way is copy the form code at
elements-forms-contact-recaptcha-v3.html
and replace the files inside with your new fields.Also make sure to include the JS script on footer of google recaptcha (see the source code of the page on footer).
Also, you should create a google recaptcha account to get the API keys. Learn more about that in the documentation of the template (that comes within the .zip package downloaded from ThemeForest).
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
You should remove the
required
attribute from the phone input:Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) Please try adding this new CSS code at (css/custom.css):
@media(min-width: 576px) { .porto-big-title { font-size: 7.2rem; } }
2) We have an example here:
https://www.okler.net/previews/porto/8.3.0/feature-footers-ecommerce-classic.html#footerLook at the copyright section with the credit cards icons. You can use this code as base.
3) That is space is controlled trough the option
margin
:<div class="owl-carousel owl-theme stage-margin" data-plugin-options="{'items': 6, 'margin': 25, 'loop': false, 'nav': true, 'dots': false, 'stagePadding': 40}">
* Note
'margin': 25
. You can play with this value to get the space you wish.We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Yes unfortunately this is best way for this case.
There’s any other thing we can try to help you without a online link to see the things happening.
Once you have the site online, please open a new ticket with the same question.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved and you are enjoying with our template and service!
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh Sorry!
My mistake!
The correct code is without the prefix
-bs
. Please try with:data-target="#header" data-spy="scroll" data-offset="100"
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Probably there’s some issue with HTML position for the icon cart or something similar. Another possible is that our logo is too big for small screens.
If your logo is too wide, please try changing the logo size on mobile with this custom CSS code below:
(css/custom.css):
@media(max-width: 767px) { .header-logo, .header-logo img { width: 100px !important; height: auto !important; } }
* Change the values as per your needs.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
For that, please change the
<body>
tag to:<body data-bs-target="#header" data-bs-spy="scroll" data-bs-offset="100">
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved! 🙂
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
As your video has
autoplay
enabled, unfortunately this is not possible. A 1 ~ 2 years ago all browsers adopted a policy to not autoplay videos with sound.The only way is remove the autoplay of the video, change the muted option for false and add a button to trigger the play of video:
<section class="section border-0 video overlay-show overlay-op-8 m-0" data-video-path="video/dnevnik-perice-naslovna" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%', 'muted': false, 'autoplay': false}" style="height: 100vh;"> <!-- <section class="section border-0 video overlay overlay-show overlay-op-8 m-0" data-video-path="video/tkopjeva-08-a" 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> <a href="#main" class="slider-scroll-button position-absolute bottom-10 left-50pct transform3dx-n50" data-hash data-hash-offset="80">Sroll To Bottom</a> </div> <!-- Button To Play The Video With Sound--> <div class="video-background-play video-open-icon position-absolute top-50pct left-50pct transform3dxy-n50 z-index-3 cur-pointer"></div> </section>
We hope this helps!
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello,
Please try changing the HTML of the link to:
<a href="#azienda" data-hash data-hash-offset="90">Azienda</a>
* The
data-hash
attribute enable this smooth scrolling.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thanks for your purchase.
That’s the expected behavior of cookie consent bar (GDPR). The bar will appear only the first time user visits the site. Once the user accept the cookie and navigate trough the page our access it again another time, the bar will not appear anymore.
We hope this clarify!
Let us know if you have more questions,
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Check if you have in your machine some antivirus blocking external requests (even from the same origin), this is very uncommon, but is something we can verify.
If still not have success, unfortunately the only way to help you with that is you uploading the project into a online web server and send the link for us. This way we can inspect the code, do some tests and discover where’s the exactly issue.
We have hundred of customers using our contact forms, so we can affirm that’s not a problem with the template code.
We hope you understand.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
This is possible.
Change the class of the columns to:
<div class="col-12 col-sm-6 col-lg-4 isotope-item.........................
* Do that for all portfolio items columns.
As the columns will enlarge, the images automatically will increase the size.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) First please make sure to include the
header-body
div like in the exmaple below:<header id="header" class="header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 85}"> <div class="header-body"> ............ </div> </div>
You can copy the same header and paste in the other pages without issue, but make sure you have the
<div class="header-body">
included.2) Regarding the footer issue, I investigate it more deeply and the reason is the missing
header-body
div in the header. The code for footer reveal need that div to make the needed calcs.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great!
1) The first method is using as base the basic form example at
forms-validation.html
. First add this HTML in the<body>
of the page:<body data-loading-overlay> <div class="loading-overlay"> <div class="bounce-loader"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> </div>
THen, change the basic validation at
js/examples/examples.validation.js
to:// basic $("#form").validate({ highlight: function( label ) { $(label).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function( label ) { $(label).closest('.form-group').removeClass('has-error'); label.remove(); }, errorPlacement: function( error, element ) { var placement = element.closest('.input-group'); if (!placement.get(0)) { placement = element; } if (error.text() !== '') { placement.after(error); } }, submitHandler: function(form) { var $form = $(form), $submitButton = $(this.submitButton); var $loadingOverlay = $('[data-loading-overlay]'); $loadingOverlay.addClass('loading-overlay-showing'); // Fields Data var formData = $form.serializeArray(), data = {}; $(formData).each(function(index, obj){ data[obj.name] = obj.value; }); $submitButton.val( 'Loading...' ).attr('disabled', true); $.ajax({ type: 'POST', url: $form.attr('action'), data: data success: function (response) { // Hide the overlay dots on success of message sent $loadingOverlay.removeClass('loading-overlay-showing'); $submitButton.val( 'Submit' ).attr('disabled', false); } }); } });
2) The second way is show the overlay inside the form only. For it first change the HTML of form to (still using as example the basic form at forms-validation.html):
<form id="form" method="post" action="forms-validation.html" class="form-horizontal"> <div id="LoadingOverlayApi" class="card-body" data-loading-overlay data-loading-overlay-options='{ "startShowing": false }' style="min-height: 150px;"> <section class="card"> <header class="card-header"> <div class="card-actions"> <a href="#" class="card-action card-action-toggle" data-card-toggle></a> <a href="#" class="card-action card-action-dismiss" data-card-dismiss></a> </div> <h2 class="card-title">Basic Form Validation</h2> <p class="card-subtitle"> Basic validation will display a label with the error after the form control. </p> </header> <div class="card-body"> <div class="form-group row"> <label class="col-sm-3 control-label text-sm-right pt-2">Full Name <span class="required">*</span></label> <div class="col-sm-9"> <input type="text" name="fullname" class="form-control" placeholder="eg.: John Doe" required/> </div> </div> <div class="form-group row"> <label class="col-sm-3 control-label text-sm-right pt-2">Email <span class="required">*</span></label> <div class="col-sm-9"> <div class="input-group"> <span class="input-group-prepend"> <span class="input-group-text"> <i class="fas fa-envelope"></i> </span> </span> <input type="email" name="email" class="form-control" placeholder="eg.: [email protected]" required/> </div> </div> <div class="col-sm-9"> </div> </div> <div class="form-group row"> <label class="col-sm-3 control-label text-sm-right pt-2">GitHub</label> <div class="col-sm-9"> <input type="url" name="github" class="form-control" placeholder="eg.: https://github.com/johndoe" /> </div> </div> <div class="form-group row"> <label class="col-sm-3 control-label text-sm-right pt-2">Skills <span class="required">*</span></label> <div class="col-sm-9"> <textarea name="skills" rows="5" class="form-control" placeholder="Describe your skills" required></textarea> </div> </div> </div> <footer class="card-footer"> <div class="row justify-content-end"> <div class="col-sm-9"> <button class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-default">Reset</button> </div> </div> </footer> </section> </div> </form>
Then, change the basic validation code at
js/examples/examples.validation.js
to:// basic $("#form").validate({ highlight: function( label ) { $(label).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function( label ) { $(label).closest('.form-group').removeClass('has-error'); label.remove(); }, errorPlacement: function( error, element ) { var placement = element.closest('.input-group'); if (!placement.get(0)) { placement = element; } if (error.text() !== '') { placement.after(error); } }, submitHandler: function(form) { var $form = $(form), $submitButton = $(this.submitButton), $el = $('#LoadingOverlayApi'); $el.trigger('loading-overlay:show'); // Fields Data var formData = $form.serializeArray(), data = {}; $(formData).each(function(index, obj){ data[obj.name] = obj.value; }); $submitButton.val( 'Loading...' ).attr('disabled', true); $.ajax({ type: 'POST', url: $form.attr('action'), data: data success: function (response) { // Hide the overlay dots on success of message sent $el.trigger('loading-overlay:hide'); $submitButton.val( 'Submit' ).attr('disabled', false); } }); } });
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! Thanks for the file!
Seems to be all OK with your files!
Unfortunately, now the only way to help you is check your website online in a server.
By the error you mentioned, seems to be a very specific error with your WAMP installation.
Another thing you can try is use another software for a local server, my suggestion is XAMPP:
https://www.apachefriends.org/download.htmlHope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) The problem is that missing the
header-body
div. Please change the header code like below:<header id="header" class="header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 85}"> <div class="header-body"> ............ </div> </div>
Regarding footer reveal issue on mobile, really we did some tests here and it’s not working properly. The footer “reveal” effect should be removed in your case, this should occurs when the footer height is bigger than the window/device screen. By some reason the effect is still remaining. We are wroking in a fix and will reply for you as soon possible.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please note Porto Admin is a static HTML, CSS and JS template. The only way to check if a page has more than 10 posts and then show the pagination is trough a server side code, where you get the posts from database, calculate the number of pages and display the appropriate pagination.
You can simply hide the pagination by adding a
d-none
class in the pagination HTML tag, but this will not be dynamic, and even if you have more than 10 posts, the pagination will remain hidden.We hope this clarify!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
Let me know if you want the loader (bounce 1,2,3) being show in the entire page (hiding all), or do you want only in the contact form container ?
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
In this case please share with us all code of the follow pages/files:
– The contact form page
– php/contact-form.php (probably the footer contact form is running truogh this file)
– js/views/view.contact.jsWould be great if you can publish the website in your server with a http://www.yourdoman.com/test and send for us, so we can inspect the code and discover what’s happening. Even so please share the above pages/files code.
You can send these codes with a server like https://pastebin.com, you will create a link with the code and share the link with us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try with this HTML:
<div class="row mb-4"> <div class="col-md-1-5 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> <div class="col-md-1-5 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> <div class="col-md-1-5 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> <div class="col-md-1-5 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> <div class="col-md-1-5 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> </div> <div class="row"> <div class="col-md-3 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> <div class="col-md-3 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> <div class="col-md-3 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> <div class="col-md-3 text-center"> <img src="img/logos/logo-1.png" class="img-fluid" alt="" /> </div> </div>
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue with contact form is resolved!
Question #63: On my main page my company name is highlighted by an animation
That’s possible. Please change the HTML of “custom-hiighlight-1” span to:
<span class="font-weight-extra-bold custom-highlight-1 ws-nowrap p-1 customHighlightAnim customHighlightAnimDelay bg-primary">LineScapes</span>
* Note
bg-primary
.Question #64: With your help I fixed the image spacing on the portfolio page, however when I shrink my browser width so that everything is in just one column, then some images are touching others. I’m sure I messed something up because the template’s pre-coded images look fine, but further down the ones I added don’t.
In the columns that has no mb-4 class defined, please add the class
mb-4 mb-md-0
. But please note this should be done only in the columns that currently has nomb-4
class:Example:
<div class="col-md-6 appear-animation mb-4 mb-md-0" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="450">......</div>
Question #65: Is there a recommended EASY to use WYSIWYG editor? One so easy even I might be able to figure it out?
I’m using Dreamweaver (and also have tried BlueGriffon) but neither allow ME to mak…..Sorry to say but unfortunately this does not exist. The dreaweaver live preview is a very good tool for beginners, but the mentioned issues and others always will be there. The dreaweaver software or any other is not able to reproduce the exactly same layout of the template. And this works same way for all premium of free template available on internet.
Question #431: On my main page, there are 4 animated icons with text. The third one looks different than the other 3 (it’s not “bold” like the others).
It’s missing the “s” of “stroke-width” word:
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regads,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
You are asking to change the class name on each SVG – the class on the code of the svg or the class in the div tag?
Change inside the SVG file. Open the xxxx.svg inside a text editor and change the class there. Give unique class for each SVG and make sure to also change the respective class in the <style> tag (inside the .svg file).
Also, after doing 1 & 2, the SVGs on the Why Choose Us section are now one color all three. They need to be the color of the H4 that they represent.
My explanation about the classes in the previous question should resolve this issue with colors.
Also change the plugin options of SVGS to:
data-icon data-plugin-options="{'onlySVG': true, 'animated': false}"
The top SVGs are now displaying a thin line. I check the code on each svg and they all have unique class names.
Changing the data-plugin options like mentioned above should resolve.
they all have unique class names.
We did a check, and at really they are still with duplicate classnames:
Any way to just keep these as an png even if there is no animation? and forget about this issue? I need to put this page live as soon as possible.
For sure, you can generate a .PNG of these SVG and put there.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh Great you figured this out and sorry for forgot the
hour12
option before!Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The purpose of
view.contact.js
is exactly what you need, that’s show a success message without reload the page with blank “success”.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thanks for the kind words!
1) To maintain the aqua blue in the other pages you change change the skin file in these pages. Currently you have the skin-conporate-10.css in the home page, and the skins/default.css in the other pages.
Keep the skin file below in all pages:
<link rel="stylesheet" href="css/skins/skin-corporate-10.css">
2) Change the instagram icon to:
<i class="fab fa-instagram text-10 py-2 mb-2 text-color-primary"></i>
And the label of Instagram to:
<span class="d-block opacity-7 line-height-1 text-uppercase text-color-default">Instagram</span>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
March 3, 2021 at 11:34 pm in reply to: Mobile phone# too large when viewed on mobile device #10036619Support2
KeymasterHello,
I think remove the phone no mobile and show on desktop is not needed. We can try reduce the size of number and icon even more.
Please change the entire “feature-box” of the phone icon/number to:
<div class="feature-box feature-box-style-2 align-items-center"> <div class="feature-box-icon w-auto h-auto px-1 px-md-2"> <i class="fas fa-mobile-alt text-6 text-md-9 p-relative text-color-dark"></i> </div> <div class="feature-box-info pl-0"> <p class="pb-0 text-uppercase text-color-dark font-weight-black letter-spacing-minus-1 line-height-1 text-3 text-md-5 ws-nowrap">(604) 512 0216</p> </div> </div>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
I double check here and the code I sent seems to be working.
Probably that’s a cache issue. Please try to clear your browser cache and see if the new changes appear.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Did you receive the messages even without a success message ?
If yes, first make sure you have the script
js/views/view.contact.js
included on footer of page:
<script src="js/views/view.contact.js"></script>
Make sure you have the variable
$debug
atphp/contact-form.php
defined as:$debug = 0;
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Probably there’s some issue in your machines where contact form is not working. I did a test now and success message is returning.
OBS: Keep in mind to never change core or vendor files like:
– js/theme.js
– js/theme.init.js
– css/theme.css
– css/theme-elements.css
– vendor/*******Instead of made changes in these files, you can do in the
js/custom.js
andcss/custom.css
. This is a good way to avoid issues when updating the theme to a newest version.So glad to know you are enjoying with the template and our support service!
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
First sorry for that issue.
To fix please add this code in (css/custom.css):
html.dark .form-group+.form-group { border-top: 0; padding-top: 0px }
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Change the thumb-info class of each item to:
<div class="hover-effect-3d"> <a href="#"> <div class="thumb-info thumb-info-no-borders thumb-info-no-borders-rounded thumb-info-centered-info border border-color-dark border-width-7"> <div class="thumb-info-wrapper"> <img src="img/galeria/Apisonador-Bailarina-Equipo-Ligero-min.jpg" class="img-fluid" alt=""> <div class="thumb-info-title"> <div class="thumb-info-inner">EQUIPO LIGERO <em>Amplia variedad desde un rotomartillo hasta un rodillo, equipos ligeros eficaces.</em></div> <div class="thumb-info-type">VER PRODUCTOS</div> </div> <div class="thumb-info-action"> <div class="thumb-info-action-icon"><i class="fas fa-plus"></i></div> </div> </div> </div> </a> </div>
* Note
border border-color-dark border-width-7
.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Badral, thanks for your purchase.
Sorry but I couldn’t understand your question.
Can you please explain with more details ?
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
You are right. We update the fullcalendar plugin to latest version and changed a lot of things.
Please change at
examples.calendar.js
options to:var $calendarInstace = new FullCalendar.Calendar( $calendar[0], { eventTimeFormat: { // like '14:30' hour: '2-digit', minute: '2-digit', meridiem: false }, .... ........
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thanks for the kind words!
Currently the new loader effects are available only at Porto HTML. But you can easily get the codes to apply on Porto Admin.
1) First add this HTML in the body tag:
<body class="loading-overlay-showing" data-loading-overlay> <div class="loading-overlay"> <div class="bounce-loader"> <div class="cssload-zenith-container"> <div class="cssload-zenith"></div> </div> </div> </div>
2) Get the CSS code for the specific load you wish and paste in the custom.css file. In this case I got the code of “Zenith” effect:
/* Zenith Effect */ .cssload-zenith-container { width: 100%; height: 49px; text-align: center; } .cssload-zenith { width: 49px; height: 49px; margin: 0 auto; border-radius: 50%; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; box-shadow: 3px 3px 1px rgb(0, 136, 204); -webkit-animation: cssload-spin 690ms infinite linear; animation: cssload-spin 690ms infinite linear; } @keyframes cssload-spin { 100% { transform: rotate(360deg); transform: rotate(360deg); } }
* The CSS code is in the
theme-elements.css
of Porto HTML. You search by class name.We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Keep in mind if you open the website in a browser, the video will run normally.
If you open the file directly in your MAC OS System, that error will be return. That’s a known issue with mac’s and quicktime.
We hope this helps and clarify!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
You are receiving the message now, right ?
So you just need change the variable
$debug
in the PHP file to$debug = 0;
.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thanks for your purchase.
Fist give a unique selector for the input:
<input type="text" class="my-rating-el rating-invisible" value="5" title="" data-plugin-star-rating data-plugin-options="{'showClear': true, 'color': 'dark', 'size':'sm'}">
* Note
my-rating-el
.Add the code below at (js/custom.js):
$('.my-rating-el').on('rating:change', function(event, value, caption) { console.log(value); console.log(caption); // ajax code here });
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Unfortunately this is not possible with
:hover
. The only way is when click in a button or in the entire “card” element.Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great some of the issue is resolved!
Regarding black stripe above the video: Unfortunately we couldn’t reproduce this issue:
Can you explain with more details ?
If you mean the black stripes on left and right side of the video, this is not a issue with the code itself, but yes with the video. These left and right side black stripes comes from the video.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great!
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
Please try with this HTML to center the images (no matter the height of the section):
<div class="position-absolute top-50pct transform3dy-n50 left-0 w-50pct w-lg-auto d-none d-xl-block"> <img src="img/slides/slide-corporate-8-1-1.jpg" alt="" /> </div> <div class="position-absolute top-50pct transform3dy-n50 right-0 w-50pct w-lg-auto d-none d-xl-block"> <img src="img/slides/slide-corporate-8-1-2.jpg" alt="" /> </div>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
That’s because the file
php/contact-form-verify-captcha.php
is returning 404 (not found):
https://www.progressdesigns.com/php/contact-form-verify-captcha.phpMake sure to upload this file to the folder “/php”.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
Support2
KeymasterHello Marko,
You can simply add a new field in the contact form for it with required attribute:
<div class="form-row"> <div class="form-group col-md-6"> <div class="form-check form-check-inline"> <label class="form-check-label"> <input class="form-check-input" name="give_permission" type="checkbox" data-msg-required="Please check it to proceed." id="permissionCheckbox" value="yes" required> I give permission to save the data I have entered here and use this data to contact me </label> </div> </div> </div>
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
You can create a space div with spacing classes and put where you want (above the h1 tag). For exameple:
<div class="spacer py-5 my-5"></div> <h1>..<?h1>
* This will create even more space.
* Thesepy-xx
,my-xx
classes are responsive, this mean you can set different values for each screen size, turning the things more responsive. Learn more about these spacement utilities here:
https://getbootstrap.com/docs/4.6/utilities/spacing/Regarding the “cards”, yes please send us the code you are trying. Would be great you can send it in a online live test link within your hosting server, so we can inspect the code and send the best solution for your case.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thank you for your 5 star review! We really appreciate that!
If you need further assistance feel free to contact us.
Kind Regards,
Rodrigo.
Support2
KeymasterHello Jurica,
You can increase the “page-header” spacement on top. You can do that with helpers class
pt-5
andmt-5
. Please try changing the HTML of page-header to:<section class="page-header page-header-modern bg-color-dark-scale-1 page-header-md "> <div class="container-fluid pt-5 mt-5"> ........... </div> </section>
* Note
container-fluid pt-5 mt-5
.This will create a space on top.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is now resolved!
If you need further assistance feel free to contact us.
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
We did a test here and seems to be working normally.
Please try adding
!important;
:#signin-username { text-align-last: center !important; text-align: center !important; } #signin-password { text-align-last: center !important; text-align: center !important; }
Also please make sure to clear the browser cache to see the new changes.
If even so not works, please sned a inline link with your website for us, so we can check what’s happening.
EDIT:
I saw where’s the issue now, please try with this new code instead:#username { text-align-last: center !important; text-align: center !important; } #password { text-align-last: center !important; text-align: center !important; }
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello,
Do not worry in sending questions, we are here to help 🙂
1) Please try adding the class
mt-xx
. Possible values:mt-1
untilmt-5
. If you need even more space you also addpt-xx
.2) The purpose of switcher is preview somethings like colors, fonts, layout, etc.. and when you click to get the CSS you will have some instructions about how to implement the same design/layout in your project. For example if you use as start the https://www.okler.net/previews/porto/8.3.0/index-corporate-13.html (corporate 13 demo), you can go to our preview, play with the style switcher and follow the instructions.
Learn more about that here:
3) Probably the best way is use a CMS like wordpress with the plugin WooCommerce. So you can create the shop pages with WordPress + Woocommerce. Of course, will be needed a minimum knowledge with WordPress. Porto has a WP version with Woocommerce integration too, so you can make the no shop pages with Porto HTML and the shop pages with Porto WP. But please note the Porto WP version is created and maintained by another author (p-themes).
You mentioned some static solutions with scripts, unfortunately we can not affirm if this will slow down too much the performance, since we never test it. This will depend in how the script is coded. The best way is do some tests with these scripts.
4) Another way is use payment services buttons, for example, PayPal has a generator for buttons:
https://www.paypal.com/buttons/* This way you can only create a link with the buttons.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try with this CSS:
#signin-username { text-align-last: center; text-align: center; } #signin-password { text-align-last: center; text-align: center; }
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
There’s some ways:
1) Probably the most easy way: Manually create versions of your website, for example:
– index.html (english)
– index-es.html (spanish)
– index-fr.html (french)Then, you should link the dropdown with language to respective language links.
2) If you are a more advanced developer and know how to manage node JS, there’s a lot of modules for it. For example:
– https://www.npmjs.com/package/static-i18n
-https://www.npmjs.com/package/mustache* This way you will build multiple versions of your website trough node JS and then upload to the server.
* This will do the same like in the number 1) but in a automatic way.3) Change texts with javascript only in the first load of page:
https://dev.to/kspeakman/comment/dcpc* This way the texts will be changed in the load of the page.
4) With server side language like PHP, where you can create an array of strings and check what’s the current language to print the respective strings.
We hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
That’s a conflict between the portfolio hash and the portfolio section code. You have two ways to fix that. The way number one is the more appropriate:
1) Change the HTML of button to:
<a href="#portfolio" data-hash data-hash-offset="160" class=" axil-button btn-solid btn-large"><span class="button-text">ابدأ التصفح</span></a>
* Note
data-hash data-hash-offset="160"
. This will move to the portfolio section smooth and without change the hash in the URL (preventing the conflict).
* I saw you are mixing WordPress theme + Porto HTML and you are adding the button trough some page builder. Some themes allow to insert custom HTML blocks, so probably that’s the best way to change the HTML of the button.OR
2) Simply deactivate the hash in the portfolio/sort plugin. For it change the HTML to:
<ul class="nav nav-pills sort-source custom-nav-sort mb-4" data-sort-id="portfolio" data-option-key="filter" data-plugin-options="{'useHash': false}">.........</ul>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello,
You should wrap the content inside a div with lightbox options. Example:
<div class="lightbox mb-4" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}"> <div class="sort-destination-loader sort-destination-loader-showing mt-4 pt-2"> <div class="row portfolio-list sort-destination" data-sort-id="portfolio"> <!-- START OF PORTFOLIO --> <div class="col-md-6 col-lg-4 isotope-item fences"> <div class="portfolio-item"> <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten border-radius-0"> <a href=""img/projects/project-1.jpg""> <img src=""img/projects/project-1.jpg"" alt=""Project" /> </a> <span class="thumb-info-title"> <span class="thumb-info-inner">CLASSIC FENCE</span> <!-- <span class="thumb-info-type">Vancouver</span> --> </span> </span> </div> </div> </div> ..... ........ ............. ..... </div> </div> </div>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
March 2, 2021 at 12:25 am in reply to: Phone number at the top does not scale on mobile device #10036522Support2
KeymasterHello,
1) You can use responsive
text-xx
class to change the font size on mobile. Please try with this HTML:<p class="pb-0 text-uppercase text-color-dark font-weight-black letter-spacing-minus-1 line-height-1 text-4 text-md-5">(604) 123 4567</p>
* Note
text-4 text-md-5
.2) The font size of this big text is controlled by CSS. Try changing the font size by adding the given code below at (css/custom.css):
@media(max-width: 575px) { .porto-big-title { font-size: 4rem; } }
3) Wrap the featured box inside an a anchor tag:
<a href="mailto:xxxxxxxxxxx" class="text-decoration-none text-color-hover-dark"> <div class="featured-box featured-box-primary"> ...... </div> </a>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Oh sorry! The reason of the issue is the submit code I sent for you. Please try changing to:
// Submit $form[0].submit();
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, first thanks for your purchase and sorry the delay for this reply.
The contact form file is returning error 500 in your server:
http://www.famileto.ro/2021/php/contact-form.phpError 500 can be caused by more than one reason. The most common are syntax error or PHP version.
– Check the PHP version: Make sure you have a minimum 5.6+ PHP version running in your server.
– Regarding syntax error we did not found any error in your contact form file.If even so the problem persist, please share with us the error_log file of your server (the .txt file where PHP errors are registered). This way we can know what’s the exactly error.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Yes, in this case you will need purchase a new license to use the template in a new website/domain. This is because you used the template at http://wamdatec.com/portfolio/.
That’s according to ThemeForest licenses rules:
http://themeforest.net/licenses/standardWe hope this clarify!
Let us know if you have more questions.
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
Oh sorry. I forgot to include the code that submit the form. Please try with:
submitHandler: function(form) { var $form = $(form), $submitButton = $(this.submitButton); // Disable the button and prevent multiple clicks $submitButton.val( 'Sending...' ).attr('disabled', true); // Submit $form.submit(); }
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello,
Great the issue is resolved!
Regarding the
extension.css
. No. That file is not needed in your case.The purpose of this file is the integration of Porto Admin + Porto HTML5, where some features of Porto Admin can be used on Porto HTML5, then this file is needed for some CSS styles.
We hope this clarify!
PS: Thanks for the review! 🙂
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello,
This is possible. Please try adding the given code below at (css/customc.css):
.masonry .masonry-item { width: 33.333333%; }
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Do not worry with questions, we are here to help 🙂
The
submitHandler
method of validation plugin is what you are looking for. Please change the “basic” code at “js/examples/examples.validation.js” to:// basic $("#form").validate({ highlight: function( label ) { $(label).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function( label ) { $(label).closest('.form-group').removeClass('has-error'); label.remove(); }, errorPlacement: function( error, element ) { var placement = element.closest('.input-group'); if (!placement.get(0)) { placement = element; } if (error.text() !== '') { placement.after(error); } }, submitHandler: function(form) { var $form = $(form), $submitButton = $(this.submitButton); // Disable the button and prevent multiple clicks $submitButton.val( 'Sending...' ).attr('disabled', true); } });
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) First make sure you added the generated CSS code at “css/skins/default.css” (replace all code in this file with the new generated).
2) Include the stylesheet in the head of document:
<!-- Skin CSS --> <link rel="stylesheet" href="css/skins/default.css" />
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Thanks for the access to your server files, this is very useful in this type of issue.
Error 500 can be related to a lot of things.
We checked the most common reasons for this error:
– PHP version (7.0 in your case) – OK
– Syntax error in the PHP file (no issues found) – OK
– CURL is enabled in the server (is enabled) – OKAt this point we did a try checking the PHP error logs, but without success, since it is not enabled in your server. We also did a try enabling trough the PHP settings but no success too.
In this case you need ask to your hosting company to enable the PHP error_log in the server. This way we can see what’s the exactly PHP error generating the error 500.
We await for the PHP logs to proceed with this ticket.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello, thanks for your purchase.
You can use the Demo Resume without issue. You do not need purchase another license if this is your first website with the license you currently have.
Regarding template license: The main license term is that you need to have one license for each domain/website you have with the template.
More information in this link:
http://themeforest.net/licenses/standardLet us know if you have more questions.
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
Great the issue is resolved! 🙂
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try with the HTML code below for the column:
<div class="col-lg-7">..........</div>
This will reduce the entire column width and push the content to left.
If you want to center the content, also change the code of row:
<div class="row align-items-center justify-content-center h-100 pt-md-5"> <div class="col-lg-7">..........</div> </div>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is resolved!
If you need further assistance, feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The problem is the “Details” link with wrong
href=""
.Please try changing to:
<a class="nav-link" href="#recentColors" data-toggle="tab">Details</a>
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
You are right! Sorry for not mention that before!
You need change the
a.fn.datepicker.dates
toa.fn.bootstrapDP.dates
. The best way is remove the scriptjs/bootstrap-datepicker.it.min.js
and add the code internal before the initialization of the plugin. Eg:!function(a){a.fn.bootstrapDP.dates.it={days:["Domenica","Lunedì","Martedì","Mercoledì","Giovedì","Venerdì","Sabato"],daysShort:["Dom","Lun","Mar","Mer","Gio","Ven","Sab"],daysMin:["Do","Lu","Ma","Me","Gi","Ve","Sa"],months:["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],monthsShort:["Gen","Feb","Mar","Apr","Mag","Giu","Lug","Ago","Set","Ott","Nov","Dic"],today:"Oggi",monthsTitle:"Mesi",clear:"Cancella",weekStart:1,format:"dd/mm/yyyy"}}(jQuery); $('.datepicker').bootstrapDP({ language: 'it-IT', format: 'dd/mm/yyyy', todayHighlight: true, autoclose: true, orientation: 'bottom' });
The
bootstrapDP
is the noConlict mode of the plugin. This is useful to prevent conflict between others datepicker plugins, like the used at jQuery UI. See more here:
https://bootstrap-datepicker.readthedocs.io/en/latest/#no-conflict-modeWe hope this helps and clarify!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
The GDPR feature is a built-in script developed by us and does not need include any third party/extra script or CSS on head/footer.
You should include the code for GDPR Bar and Preferences after the tag
<body>
:<body> <!-- GDPR Bar --> <div class="gdpr-bar" data-plugin-gdpr> <div class="gdpr-bar-description"> <p class="text-color-light opacity-7 mb-0">We use cookies to improve user experience and analyze website traffic. Read about how we use cookies and how you can control them by clicking "Privacy Preferences".</p> </div> <div class="gdpr-bar-actions"> <a href="#" class="gdpr-preferences-trigger text-decoration-none text-color-light">Privacy Preferences</a> <a href="#" class="gdpr-agree-trigger text-decoration-none btn btn-primary btn-modern btn-px-4 py-3 font-weight-bold">I Agree</a> </div> </div> <!-- GDPR Preferences Popup --> <div class="gdpr-preferences-popup"> <div class="gdpr-preferences-popup-content position-relative"> <a href="#" class="gdpr-close-popup text-color-grey text-color-hover-dark"> <i class="fas fa-times"></i> </a> <form class="gdpr-preferences-form"> <div class="gdpr-preferences-popup-content-body"> <h4 class="text-color-dark font-weight-bold mb-3">Privacy Preferences</h4> <p>When you visit any website, it may store or retrieve information through your browser, usually in the form of cookies. Since we respect your right to privacy, you can choose not to permit data collection from certain types of services. However, not allowing these services may impact your experience.</p> <hr> <div class="gdpr-cookie-item"> <div class="gdpr-cookie-item-title"> <strong class="text-color-dark">Privacy Policy</strong> </div> <div class="gdpr-cookie-item-description"> <p class="mb-0">You read and agreed to our <a href="#">Privacy Policy</a></p> </div> <div class="gdpr-cookie-item-action"> <strong class="text-color-dark text-2">REQUIRED</strong> <input type="hidden" name="cookies_consent[]" class="gdpr-input" value="privacy-policy" /> </div> </div> <div class="gdpr-cookie-item"> <div class="gdpr-cookie-item-title"> <strong class="text-color-dark">CDN</strong> </div> <div class="gdpr-cookie-item-description"> <p class="mb-0">For performance and security reasons, we use Cloudflare as our CDN networks.</p> </div> <div class="gdpr-cookie-item-action"> <strong class="text-color-dark text-2">REQUIRED</strong> <input type="hidden" name="cookies_consent[]" class="gdpr-input" value="cdn" /> </div> </div> <div class="gdpr-cookie-item"> <div class="gdpr-cookie-item-title"> <strong class="text-color-dark">YouTube</strong> </div> <div class="gdpr-cookie-item-description"> <p class="mb-0">We use the YouTube service to enable video content streaming on this site.</p> </div> <div class="gdpr-cookie-item-action"> <input type="checkbox" name="cookies_consent[]" class="gdpr-input custom-checkbox-switch" value="youtube" /> </div> </div> <div class="gdpr-cookie-item"> <div class="gdpr-cookie-item-title"> <strong class="text-color-dark">Vimeo</strong> </div> <div class="gdpr-cookie-item-description"> <p class="mb-0">We use the Vimeo service to enable video content streaming on this site.</p> </div> <div class="gdpr-cookie-item-action"> <input type="checkbox" name="cookies_consent[]" class="gdpr-input custom-checkbox-switch" value="vimeo" /> </div> </div> <div class="gdpr-cookie-item"> <div class="gdpr-cookie-item-title"> <strong class="text-color-dark">SoundCloud</strong> </div> <div class="gdpr-cookie-item-description"> <p class="mb-0">We use the SoundCloud service to enable audio content on this site.</p> </div> <div class="gdpr-cookie-item-action"> <input type="checkbox" name="cookies_consent[]" class="gdpr-input custom-checkbox-switch" value="soundcloud" /> </div> </div> <div class="gdpr-cookie-item"> <div class="gdpr-cookie-item-title"> <strong class="text-color-dark">Facebook & Instagram</strong> </div> <div class="gdpr-cookie-item-description"> <p class="mb-0">We use the Facebook and Instagram services to enable social network content on this site.</p> </div> <div class="gdpr-cookie-item-action"> <input type="checkbox" name="cookies_consent[]" class="gdpr-input custom-checkbox-switch" value="facebookinstagram" /> </div> </div> <div class="gdpr-cookie-item"> <div class="gdpr-cookie-item-title"> <strong class="text-color-dark">Google Maps</strong> </div> <div class="gdpr-cookie-item-description"> <p class="mb-0">We use the Google Maps service to enable maps content on this site.</p> </div> <div class="gdpr-cookie-item-action"> <input type="checkbox" name="cookies_consent[]" class="gdpr-input custom-checkbox-switch" value="googlemaps" /> </div> </div> </div> <div class="gdpr-preferences-popup-content-footer"> <button type="submit" class="btn btn-primary btn-modern btn-px-4 py-3 font-weight-bold">Save Preferences</button> <a href="#" class="text-color-default text-color-hover-primary">Privacy Policy</a> </div> </form> </div> </div> .... ....... ...........
* In the GDPR preferences is where you can create the cookies. In the example above we have some examples, but you can create your owns by using the same HTML structure and changing the input values.
To hide/show the elements according the GDPR/cookies preferences, you should use the GDPR Wrapper component:
<div data-plugin-gdpr-wrapper data-plugin-options="{'checkCookie': 'youtube', 'ajaxURL': 'ajax/gdpr-youtube.html'}"> <div class="bg-color-dark-scale-1 text-center p-5"> <i class="fab fa-youtube text-color-light text-10 mb-4 mt-5"></i> <p class="text-color-light mb-5">This content is blocked.<br>Please review your <a href="#" class="gdpr-open-preferences text-color-light text-decoration-underline">Privacy Preferences</a></p> </div> </div>
* In the example above it’s the GDPR wrapper for “youtube” cookie. This mean if the user accepts the “youtube” cookie, the video will be shown/loaded.
* You can use this wrapper of any kind of content, from videos to simple HTML content.Note the GDPR wrapper has the option “ajaxURL”, this is the content that will be loaded once the cookie is accepted. By default we add ajax content inside the folder “/ajax”, and more specific to the example above, is located at “/ajax/gdpr-youtube.html”. You can create your own ajax files, or simply edit the existing ones.
Important: Make sure you are running your project in a local or online web server. Otherwise, the AJAX will not works.
That’s a bit complicate, but very useful!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello,
Please send the entire tab HTML code you are trying for us, so we can check what’s wrong and send a solution for you.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
Great the issue is resolved! 🙂
If you need further assistance feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Porto Admin does not comes with a fully functional PHP contact form.
If you also has the Porto HTML version (not the admin), there’s a fully functional PHP contact form included.
Let us know if you have more questions.
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
No problem! 🙂
Please try first removing the
data-plugin-datepicker
attribute from HTML input and use this JS code to initialize:$('.datepicker').bootstrapDP({ language: 'it-IT', format: 'dd/mm/yyyy', todayHighlight: true, autoclose: true });
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello,
That’s a page with login form without datepickers.
We need a login to access and see the content.
Kind Regards,
Rodrigo.
Support2
KeymasterHello Moira,
I did a new test here with my cache cleared and seems to be working. Can you confirm if you received my test with multiple checkbox values in the message ?
Please try to clear your browser cache and test again.
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the validation is resolved!
Regarding datepicker, please send us the link of page where the code for datepicker is included, so we can inspect the code and help you with a solution.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Marko,
1. Do I need to move all those files into that Min folder after writing the code in HTML?
No. You do not need move any file inside the min folder. Just change the script and stylesheets tags like I mentioned in my last reply. You should combine all CSS into one stylesheet/link tag, and combine all JS into one script tag.
2. Is there a tool that can compress all at once or I have to do it one by one?
The PHP Minify in question does it and will compress and minify all files into one.
3. How can I know the exact column/container size?
You can use the Google Chrome Developer Tools (right click > Inspect Element):
* In the image above we need resize the image to 445×445 (the original size is 800×800).
4. Do you by any chance have a code for the pop-up cookie policy?
We recently added a GDPR built-in plugin for cookies. Check the examples here:
https://www.okler.net/previews/porto/8.3.0/feature-gdpr.htmlWe hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please follow the instructions below;
To get the validation working:
1) Add ID to the form like below:
<form id="form" method="post" action="/myb/index.php">
2) Include the validation plugin on footer of page:
<script src="vendor/jquery-validation/jquery.validate.js"></script>
3) Add the script below on footer of page:
<script src="js/examples/examples.validation.js"></script>
Regarding the datepicker, the reason is you not have any HTML for datepicker in the page. Try adding one of the examples from here:
https://www.okler.net/previews/porto-admin/3.1.0/forms-advanced.htmlWe hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
February 24, 2021 at 11:58 pm in reply to: Add a higher resolutions to responsive settings #10036416Support2
KeymasterHello,
Unfortunately that’s not possible.
Currently the template comes with 5 responsive levels:
– Extra Small (0px until 575px)
– Small (576px until 767px)
– Medium (768px until 991px)
– Large (992px until 1199px)
– Extra Large (1200px until 99999px)You can create your custom CSS media queries, for example:
(css/custom.css):
/* This code will apply only on screens higher than 1920px */ @media(min-width: 1920px) { /* Your custom CSS code here */ }
We hope this helps!
Let us know if you have more questions.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
First please keep all the checkboxes inputs with the same
name="xx"
attribute. Make sure to change only the type=”checkbox” inputs (not the radios).Regarding only one field of checkbox being send in the message:
Did some tests here and at really the JS code of contact form is not ready to get the checkboxes in a automatic way, sorry for that. To fix that, please change the “Fields Data” code atview.contact.js
file to:// Fields Data var formData = $form.serializeArray(), data = {}, multiValues = [], ftFlag = false; $(formData).each(function(index, obj){ if( typeof data[obj.name] !== 'undefined' ) { if( ftFlag == false ) { multiValues.push(formData[index - 1].value); ftFlag = true; } multiValues.push(obj.value); data[obj.name] = multiValues; } else { data[obj.name] = obj.value; } });
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello Moira,
Great!
If you need further assistance feel free to contact us.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
If you want to different google font, first select he font you wish here:
https://fonts.google.comSupposing we choose the “Robot Font”:
Change the google fonts stylesheet on head of document to:
<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
* This is the code generated in the google fonts website.
Add in (css/custom.css):
/* OPTION 1 */ /* Change all text of website */ body { font-family: 'Roboto', sans-serif; } /* OPTION 2 */ /* Change specific elements. You need to specify what elements */ /* For example change just Headings and links */ h1, h2, h3, h4, h5, h6, a { font-family: 'Roboto', sans-serif; }
* You should explicit what HTML tags should have the new font family.
OR
If you do not want a Google Font, please follow the instructions here:
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
-
This reply was modified 3 years, 11 months ago by
Support2.
Support2
KeymasterHello,
This is responsive.
This technique will turn the logo compatible with retina devices and should resolve the pixelated/blur issue.
The code we sent for you worked ?
If not, please send a online link with your project for us, so we can inspect the code and send the best solution for you.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
Thanks for the access!
Did you received the test message we sent trough the contact form ?
The problem was wrong and duplicated PHP file name. I changed from:
<form class="contact-form" action="php/volunteer-application-form.php" method="POST"> <form class="contact-form" action="php/volunteer-application-form.php" method="POST">
To:
<form class="contact-form" action="php/volunteer-application.php" method="POST">
Hope this helps!
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is resolved!
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterThis reply has been marked as private.Support2
KeymasterHello,
Great!
Can you explain it and especially this part a bit more “2) Combine all the CSSs and JSs files in only one call:”.
Once you have the “/min” folder in the “public_html/”, you should use this HTML to call your stylesheets and scripts:
CSS:
<link rel="stylesheet" href="/min/f=XXXXXXXXXXXXXXX" type="text/css" />
* Replace XXXXXXXX with the path for CSS stylesheets. Eg: css/theme.css,css/theme-elements.css (comma separate all stylesheets)
JS:
<script src="/min/f=XXXXXXXXXXXXXXXX"></script>
* Replace XXXXXX like explained in the CSS, but with .JS files.
how do I “ELiminate render-blocking resources”
Compressing and minifying all CSS and JS files should resolve this warning.
what should be “Properly size of images”
You should resize your images. For example if you have a image inside a column/container with 300 x 300 and your original image size is 1000 x 1000, you should resize your original image to 300 x 300.
We hope this helps and clarify!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello, thanks for your purchase.
Please note the mentioned files are from Porto Admin Extension. This mean you need purchase the Porto Admin HTML template to get these files and pages working. This is described on top of each
feature-admin-xxxxxx.html
page:
Learn more about that here:
Please note this affect only to the
feature-admin-xxxxxxx.html
pages included with the template.Let us know if you have more questions.
Kind Regards,
Rodrigo.
Support2
KeymasterHello,
Thanks for your purchase, however, please note that the template you purchased is not the same used in the website link you sent.
The template used is Porto HTML. You can find in this link:
https://themeforest.net/item/porto-responsive-html5-template/4106987?utm_source=okler&utm_medium=banner&utm_campaign=forum_banner_porto&ref=OklerIf you need a refund, all support related to payment and refund is run through Envato’s ticket service:
http://themeforest.net/refund_requests/new(If you purchase Porto HTML5 we can approve the refund for the Tucson HTML.)
Please let us know if we can help you with anything else.
Kind Regards,
Rodrigo.
If you are satisfied with Tucson HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Please try wrapping the table inside a
table-responsive
div:<div class="table-responsive"> <table>.....</table> </div>
If you are using DataTables (advanced tables): These type of tables already comes with horizontal scroll enabled by default. On this case please share the HTML code you are trying with us.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Here’s the HTML code you need. That’s the code for header column that wraps the menu items:
... .... ........ <div class="header-column justify-content-end"> <div class="header-row"> <div class="header-nav header-nav-links header-nav-dropdowns-dark header-nav-dark-text order-2 order-lg-1"> <div class="header-nav-main header-nav-main-mobile-dark header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1"> <nav class="collapse"> <ul class="nav nav-pills" id="mainNav"> <li class="dropdown"> <a data-hash class="dropdown-item dropdown-toggle active" href="#home">Home</a> </li> <li> <a class="dropdown-item" data-hash data-hash-offset="100" href="#about"> Wie zijn wij</a> </li> <li> <a class="dropdown-item" data-hash data-hash-offset="75" href="#services">Diensten</a> </li> <li> <a class="dropdown-item" data-hash data-hash-offset="45" href="#costs">Tarief en werkwijze</a> </li> <li> <a class="dropdown-item" data-hash data-hash-offset="130" href="#contactFormAdvanced">Contact</a> </li> </ul> </nav> </div> <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav"> <i class="fas fa-bars"></i> </button> </div> <ul class="header-social-icons social-icons order-1 order-lg-3"> <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-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fab fa-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> </ul> </div> </div> . ... .....
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Currently the template does not comes with this kind of feature in a styled/visual good effect. But here’s some custom code where you can use a simple javascript “confirm” prompt. Add in (js/custom.js):
$(document).ready(function(){ var is21Older = confirm('You is 21 older ?'); // Redirect the user to a "is not" 21 older page if( !is21Older ) { window.location = 'https://www.yourdomain.com/is-not-21-older-page.html'; } });
* Note if the user is not 21 older, will be redirected to a page with the “no 21 older” information.
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Moira,
Please use this entire HTML for your page:
https://pastebin.com/raw/hiH6H9tuWhat I did:
– Get the entire source code from https://harvesthouseatlantic.org/1volunteer-application and changed the input radios to checkboxes.Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello Sophie,
This is a server issue, and can very from server to server. Normally, servers disable the mail() function of PHP due to security reasons, but as I said before, this can vary from server to server. The best way is contact your hosting provider about that.
We hope this helps and clarify!
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Probably you are opening the .html files in your desktop machine locally and that’s the reason you did not see the same effect when it’s online. The SVG need to be running in a local or online server. Please try running the project with a local server like APAGACHE or NGINX. Probably the best way is the XAMPP software to install a local server.
Inspecting your code we still can see some issues:
1) The
fals
should befalse
:
2) Also please add the
'onlySVG': true
option the in the plugin options for the icons. Example:<img class="icon-animated" width="150" src="imgs/icons/badges-01.svg" alt="" data-icon data-plugin-options="{'onlySVG': true, 'color': '#220c3c', 'animated': false, 'delay': 400, 'strokeBased': true}" />
3) The “Why Choose Us?” section has 3 SVG’s. Try giving unique class names for each one and make sure to change the class name in the style tag inside it.
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great the issue is resolved! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
1) First sorry for this issue. You can fix that by changing the HTML of SVG inside this section to:
<svg class="custom-svg-background-1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 537" data-appear-animation-svg="true">......</svg>
* Note
data-appear-animation-svg="true"
.2) The image on this section works as background-image and not like a
<img>
tag. The background image fill the entire section background. The SVG elements inside the section works as a “mask”, generating the curved effect in the background. This mean the SVG is over the background image, generating that background effect.If you want to change the position of the background on mobile for example, you should do that trough the CSS code at “css/demos/demo-auto-services.scss”. See the
.custom-svg-background-1
codes at line 87.This is a very specific effect, so a documentation or ready classes to control it does not exist. The only way is changing the CSS, or modifying the SVG.
We hope this helps and clarify!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Great! 🙂
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Sorry but we couldn’t understand your question. Can you please explain with more details ?
Kind Regards,
Rodrigo.
If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads
Support2
KeymasterHello,
Make sure the code is not inside a
<div class="container">...</div>
-
This reply was modified 3 years, 9 months ago by