Forum Replies Created

Viewing 500 posts - 1 through 500 (of 8,205 total)
  • Author
    Posts
  • in reply to: Gulp, Grunt etc #10031137
    Support
    Keymaster

    Hello, thanks for your purchase and sorry for the delay in responding.

    Here’s the package.json file content:

    https://gist.github.com/jonasklering/e5bb34ed8f4ab7195921e3204ef3f3cf

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: Style Issue #10031106
    Support
    Keymaster

    Hello, thanks for your purchase.

    Could you please send more details about that question? Where exactly did you find inline css code?

    Best Regards.


    in reply to: Daterange toDate for 1year #10031023
    Support
    Keymaster

    Hello, thanks for your purchase and sorry for the delay in responding.

    Here’s an example on how to do that:

    HTML:

    <div class="form-group row">
    	<label class="col-lg-3 control-label text-lg-right pt-2">Date range</label>
    	<div class="col-lg-6">
    		<div class="input-daterange input-group">
    			<span class="input-group-prepend">
    				<span class="input-group-text">
    					<i class="fas fa-calendar-alt"></i>
    				</span>
    			</span>
    			<input type="text" class="form-control" name="start" id="dpStart">
    			<span class="input-group-text border-left-0 border-right-0 rounded-0">
    				to
    			</span>
    			<input type="text" class="form-control" name="end" id="dpEnd">
    		</div>
    	</div>
    </div>

    JS:
    (js/custom.js)

    (function($) {
    
    	'use strict';
    
    	if ( $.isFunction($.fn[ 'bootstrapDP' ]) ) {
    
    		$(function() {
    			
    			$('#dpStart').bootstrapDP().on('changeDate', function(e) {
    				
    				var endDate = new Date(e.date);
    				endDate.setFullYear(endDate.getFullYear() + 1);
    				
    				$('#dpEnd').bootstrapDP('update', endDate);
    				
    			});
    			
    			$('#dpEnd').bootstrapDP();
    
    			
    		});
    
    	}
    
    }).apply(this, [jQuery]);

    You can see the plugin documentation in this link:
    https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html

    But note that the plugin was changed to avoid conflicts with jQueryUI.

    So where it is: .datepicker() in the documentation you need to use .bootstrapDP()

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: Semi-transparent header not working #10030813
    Support
    Keymaster

    Hello,

    1) Change the header to:

    <header id="header" class="header-transparent header-semi-transparent header-semi-transparent-light" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': false, 'stickyStartAt': 30}">

    2) Add this css:

    @media (min-width: 992px) {
    	#header .header-nav-main nav > ul > li > a {
    		padding: 0.5rem !important;
    	}
    }

    3) Change the stickyStartAt option:

    Kind Regards.


    in reply to: table data #10030608
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please try to add a DIV with “table-responsive” class. Like this example:

    <div class="table-responsive">
      <table class="table">
        ...
      </table>
    </div>

    More information: https://getbootstrap.com/docs/4.3/content/tables/#always-responsive

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, I’ve made a quick test here use DevTools.

    1) I added the tooltip after the page loaded with this HTML:

    <button type="button" class="btn btn-primary m-xs" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top</button>

    2) Used this code to initialize:

    if ( $.isFunction( $.fn['tooltip'] ) ) {
    	$( '[data-toggle=tooltip],[rel=tooltip]' ).tooltip({ container: 'body' });
    }

    It worked well, please try that and let me know if the problem persists.

    Kind Regards,

    Jonas


    in reply to: responsive backgroun #10030606
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: responsive backgroun #10030602
    Support
    Keymaster

    Hi,

    What is not clear for us is that if you want:

    1) The slider (Responsive Slider) with the responsive background image. See first slider: https://preview.oklerthemes.com/ezy/1.1.0/multi-purpose-1.html

    2) Content Image: https://getbootstrap.com/docs/4.3/content/images/

    3) Section Background: https://preview.oklerthemes.com/ezy/1.1.0/elements-sections-parallax.html

    If you could point with a screenshot which area of your site you are working, or just send us the URL so we can make more tests would be great.

    Thanks.


    in reply to: wrap text wjem å #10030600
    Support
    Keymaster

    Hello, you can fix that problem adding the following css:

    .dataTables_length {
    	line-height: 38px !important;
    }
    
    .dataTables_length .select2-container--bootstrap {
    	float: left !important;
    }

    Best Regards,

    Okler Themes


    in reply to: responsive backgroun #10030599
    Support
    Keymaster

    Hello, thanks for your purchase.

    Regarding that background, we are still a little confused about that, where exactly it would be? It would be an image in the page content or a background in the page itself?

    If it’s just an image in the page, you might take a look in these samples: https://preview.oklerthemes.com/ezy/1.1.0/elements-image-frames.html

    Please let me know if you need any other help.

    Kind Regards,

    Jonas


    in reply to: Cannot upload theme to WordPress #10030598
    Support
    Keymaster

    Hello, please note that the template you purchased is a HTML template and not a WordPress, so this cannot be installed on WordPress.

    You can find WordPress related themes only in the WordPress Category on ThemeForest.

    Best Regards,

    Okler Themes


    in reply to: Jquery. RsTypewriterAddOn is not defined #10030589
    Support
    Keymaster

    Hello, the plugin is being added in the options (HTML), as you can see here:

    Kind Regards,

    Jonas


    in reply to: rtl files not found !! #10030588
    Support
    Keymaster

    Hello, thanks for your purchase.

    The RTL files are located inside the folder master/rtl/css/. Just copy the all the files inside this folder and paste on the folder css/.

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

    Kind Regards,

    Jonas


    in reply to: Contact form configuration #10030584
    Support
    Keymaster

    Hello, please check this topic to see how to configure the Contact Form: http://www.okler.net/forums/topic/important-contact-form-is-not-working/

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Google Map Not working #10030583
    Support
    Keymaster

    Hello,

    You need to set Google Maps API. More information: http://www.okler.net/forums/topic/how-to-setup-google-maps-api-key/

    Please let me know if you have more questions.

    Kind Regards,

    Jonas


    in reply to: Navigation doesn't work on iPad in landscape view #10030581
    Support
    Keymaster

    Hello, OK, great, got it now.

    In that case to make the dropdown appear on table you would have to remove the main link (and use # instead), for example:

    <a class="nav-link dropdown-toggle" class="dropdown-toggle" href="#">
    	Departments
    </a>
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Cardiology</a></li>
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Gastroenterology</a></li>
    </ul>

    It would make the dropdown appear on Ipad when you click in the Deparments link.

    Another option is to do that with JS, for example:

    HTML:

    <a class="nav-link dropdown-toggle" class="dropdown-toggle" href="demo-medical-departments.html" data-remove-link-on-mobile>
    	Departments
    </a>
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Cardiology</a></li>
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Gastroenterology</a></li>
    </ul>

    JS: (js/custom.js)

    if($.browser.mobile) {
    	$('[data-remove-link-on-mobile]').attr('href', '#');
    }

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Menu not functioning on iPad – Landscape mode #10030579
    Support
    Keymaster

    Hello, OK, great, got it now.

    In that case to make the dropdown appear on table you would have to remove the main link (and use # instead), for example:

    <a class="nav-link dropdown-toggle" class="dropdown-toggle" href="#">
    	Departments
    </a>
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Cardiology</a></li>
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Gastroenterology</a></li>
    </ul>

    It would make the dropdown appear on Ipad when you click in the Deparments link.

    Another option is to do that with JS, for example:

    HTML:

    <a class="nav-link dropdown-toggle" class="dropdown-toggle" href="demo-medical-departments.html" data-remove-link-on-mobile>
    	Departments
    </a>
    <ul class="dropdown-menu">
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Cardiology</a></li>
    	<li><a class="dropdown-item" href="demo-medical-departments-detail.html">Gastroenterology</a></li>
    </ul>

    JS: (js/custom.js)

    if($.browser.mobile) {
    	$('[data-remove-link-on-mobile]').attr('href', '#');
    }

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    • This reply was modified 3 months, 1 week ago by  Support.
    • This reply was modified 3 months, 1 week ago by  Support.
    in reply to: Scroll to top button issue #10030578
    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: Jquery. RsTypewriterAddOn is not defined #10030577
    Support
    Keymaster

    Hello, it seems like the typewritter addon is not available in the page, to add that you can do this:

    Add the CSS:

    <link rel="stylesheet" href="vendor/rs-plugin/revolution-addons/typewriter/css/typewriter.css" /></script>

    Add the JS between tools and the main file:

    <script src="vendor/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
    <script src="vendor/rs-plugin/revolution-addons/typewriter/js/revolution.addon.typewriter.min.js"></script>
    <script src="vendor/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

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

    Kind Regards,

    Jonas


    in reply to: uncaught js error #10030576
    Support
    Keymaster

    Hello, the problem is that you are using jQuery Slim build, which does not have all the functions that Porto uses.

    https://jquery.com/download/

    Use the compressed version.

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

    Kind Regards,

    Jonas


    in reply to: page top class #10030575
    Support
    Keymaster

    Hello,

    You can add the following css to fix that problem:

    (css/custom.css)

    .page-top h1 {
    	border-bottom: 5px solid #CCC;
    	color: #FFF;
    	display: inline-block;
    	font-weight: 200;
    	margin: 0 0 -25px;
    	min-height: 37px;
    	line-height: 46px;
    	padding: 0 0 17px;
    	position: relative;
    	font-size: 2.6em;
    }
    
    section.page-top h1 {
        border-bottom-color: #0088cc;
    }

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

    Kind Regards,

    Jonas


    in reply to: Responsive Slider Container #10030574
    Support
    Keymaster

    Hello,

    1) You can change the font-size and line-height for small resolutions, here’s where you need to change:

    Make some tests and change that to 50, or 60.

    2) You can change the background size with a custom css if you want, here’s an example:

    add this:
    (css/custom.css)

    @media (max-width: 992px) {
    	.parallax-background {
    		background-size: auto !important;
    	}
    }

    3) The search in the HTML version is not functional, but we have an alternative using GoogleCustomSearch: http://www.okler.net/forums/topic/how-to-use-google-custom-search/

    Kind Regards,

    Jonas


    Support
    Keymaster

    Bom dia, desculpe pela demora em responder.

    Em relação a performance de carregamento para a lightbox, está correto, utilizando um link para uma imagem em melhor resolução e outra só como thumbnail o carregamento fica mais rápido.

    Exemplo:

    <a href="img/projects/generic/project-14-big-image.jpg">
    	<img class="img-fluid" src="img/projects/generic/project-14-small-image.jpg" alt="Project Image">
    </a>

    * big-image / small-image

    Jonas


    in reply to: Menu not functioning on iPad – Landscape mode #10030561
    Support
    Keymaster

    Hello,

    Please make sure the links structure and classes are set the same way that we set in our index-classic.html file, for example:

    <li class="dropdown">
    	<a class="dropdown-item dropdown-toggle active" href="index.html">
    		Home
    	</a>
    	<ul class="dropdown-menu">
    		<li>
    			<a class="dropdown-item" href="index.html">
    				Page 1
    			</a>
    		</li>
    	....

    Make sure you add the href.

    Here’s the functional example: http://preview.oklerthemes.com/porto/7.4.0/index-classic.html

    Let me know if you have any questions.

    Kind Regards.


    in reply to: uncaught js error #10030560
    Support
    Keymaster

    Hello, the .stop() is a Jquery function to stop the animation with a callback, which you can see more information in this link: https://api.jquery.com/stop/ – So it basically means that the problem is not actually a missing JS file in your website, it’s probably something else.

    If possible, send us the URL so we can check and debug the JS for you.

    Kind Regards,

    Jonas


    in reply to: license and open source #10029880
    Support
    Keymaster

    Hello, unfortunately it’s not possible.

    Code from Porto must be used in a single project and cannot be sold (with the regular license) and cannot be distributed in an open source project.

    More about license: https://themeforest.net/licenses/standard

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: Can't download the wordpress.zip file #10029879
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please note that your purchased the HTML version of Porto.

    Porto WordPress is also available on ThemeForest. Here’s the link: http://themeforest.net/item/porto-responsive-wordpress-woocommerce-theme/9207399

    If you purchase the WordPress version we can approve the refund for the HTML version.

    All support related to payment and refund is run through Envato’s ticket service:
    http://themeforest.net/refund_requests/new

    In the refund request details please send us the purchase code from your purchase of Porto WordPress version.

    Kind Regards,

    Okler Themes


    in reply to: Porto Changelog #10029679
    Support
    Keymaster

    .


    in reply to: what js file are used to move slider on iPhone? #10029638
    Support
    Keymaster

    Hello, unfortunately we don’t have a list of required JS/CSS files for each plugin but that can be found in the example files.

    The Ios7 Switcher is just a JS file: vendor/ios7-switch/ios7-switch.js

    Please check the file forms-advanced.html – You will see the “Specific Page Vendor” part with the required JS files for that page.

    Best Regards,

    Jonas


    in reply to: toogle #10029637
    Support
    Keymaster

    Hello, sorry but we could not understand the question. Can you send more details?


    in reply to: Side Panel Problem #10029617
    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: Side Panel Problem #10029613
    Support
    Keymaster

    Hello, we tested in real smartphones we could not reproduce any issue with the sidebar.

    If the problem persists, please send us more details.

    Thanks!


    in reply to: Close a Modal #10029611
    Support
    Keymaster

    Hello,

    Here’s an example:

    HTML:

    <!-- Modal Basic -->
    <a class="mb-xs mt-xs mr-xs modal-basic btn btn-default" href="#modalBasic">Basic</a>
    
    <div id="modalBasic" class="modal-block mfp-hide">
    	<section class="panel">
    		<header class="panel-heading">
    			<h2 class="panel-title">Are you sure?</h2>
    		</header>
    		<div class="panel-body">
    			<div class="modal-wrapper">
    				<div class="modal-text">
    					<p>Are you sure that you want to delete this image?</p>
    				</div>
    			</div>
    		</div>
    		<footer class="panel-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>

    JS:

    (function($) {
    
    	'use strict';
    
    	/*
    	Basic
    	*/
    	$('.modal-basic').magnificPopup({
    		type: 'inline',
    		preloader: false,
    		modal: true
    	});
    
    }).apply(this, [jQuery]);

    If the problem persists, please send use the URL.

    * Check if there’s no JS error in your site.: http://www.okler.net/forums/topic/how-to-find-a-javascript-error/

    Kind Regards,

    Jonas


    in reply to: Data Tables #10029604
    Support
    Keymaster

    Hello, it should be working if you are starting the plugin with this code:

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		$('#datatable-default').dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p'
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    If possible please send us the URL of your project so we can debug for you.

    Kind Regards,

    Jonas


    in reply to: Resized logo too low in IE11 #10029598
    Support
    Keymaster
    html.ie11.sticky-header-active #header .header-logo img {
    	
    }

    in reply to: Side Panel Problem #10029597
    Support
    Keymaster

    Hello, it’s probably cache on your phone, please try to clear the cache and try again.

    That code will “force” the sidebar to close when clicked. I tested it here in small resolutions and it worked.

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: all looks fine except in iPad #10029594
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Resized logo too low in IE11 #10029592
    Support
    Keymaster

    Hello, if you need to add any specific rule for a browser you can just do something like this:

    html.ie11 .myclass {
    	padding...
    }

    Best Regards,

    Jonas


    in reply to: Side Panel Problem #10029591
    Support
    Keymaster

    Hello, sorry I didn’t get the notification of that ticket until now.

    I just checked the website but couldn’t find the conflict, so to fix that just add the following event:

    (js/custom.js)

    $('.side-panel-close').on('click', function(e){
    	$('html').removeClass('side-panel-open');
    });

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: Postback on non selected multifunction box #10029587
    Support
    Keymaster

    Hello, I just replied to your email.

    Regards.

    Jonas


    in reply to: Adding aria-labels to owl-dots #10029586
    Support
    Keymaster

    Great!


    in reply to: issue #10029582
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Passive Listeners (Scrolling) #10029581
    Support
    Keymaster

    Hello, it’s basically a warning about the passive mode: https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners – some plugins that are not updated are not set to use {passive: true}. That warning will not appear as soon as the plugins release a fix for it. We update Porto with new versions very often.

    Best Regards,

    Jonas


    in reply to: Adding aria-labels to owl-dots #10029580
    Support
    Keymaster

    Hello, unfortunately we don’t have a fix for that at this moment as it’s inside the plugin code and a workaround for that (which is a warning, not an error) can be done directly on file js/theme.js – line 360 – where the plugin is initialized.

    OwlCarousel is updated on Porto, it’s using the latest version.

    As soon as a new version is released we will update. I can see more people have asked for that in their GitHub project.

    Best Regards,

    Jonas


    in reply to: Header, Mainnavi and Revo-Slider #10029572
    Support
    Keymaster

    Hello, to fix that just add this:

    (css/custom.css)

    @media (max-width: 991px) {
    	.dropdown-no-items > a {
    		display: block;
    		width: 100%;
    		padding: .25rem 1.5rem;
    		clear: both;
    		font-weight: 400;
    		color: #212529;
    		text-align: inherit;
    		white-space: nowrap;
    		background-color: transparent;
    		border: 0;
    	}
    }

    Best Regards,

    Jonas


    in reply to: modal does not work after ajax post #10029571
    Support
    Keymaster

    Hello, In that case after you finish the save function you need to call the modals again, so the best way is to put the modals inside a function, like this:

    function initModals() {
    
        $('.modal-basic').magnificPopup({
            type: 'inline',
            preloader: false,
            modal: true
        });
    	
    }
    
    
    initModals();

    And then after the save just call the initModals(); again.

    Best Regards,

    Jonas


    Support
    Keymaster

    Hello,

    At this moment the only editable table that is available on Porto Admin is this one: http://preview.oklerthemes.com/porto-admin/2.2.0/tables-editable.html

    But Porto Admin is using the latest Datatables plugin version, so you can use any of their examples on Porto: https://editor.datatables.net/examples/index

    Best Regards,

    Okler Themes.


    in reply to: missing vertical menu on landscape ipad #10029566
    Support
    Keymaster

    Hello, thanks for your purchase.

    Sorry about that issue, to fix that please add the following css code:

    (css/custom.css)

    @media (max-width: 1199px) and (min-width: 992px) {
    	html.side-header:not(.side-header-above) body > .body {
    		margin: 0 0 0 255px !important;
    	}
    	
    	html.side-header #header.side-header {
    		left: 0 !important;
    	}
    }

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

    Kind Regards,

    Jonas


    in reply to: Main Menu Nav Left/Right and Dropdown Arrow #10029565
    Support
    Keymaster

    Hello,

    1) To fix that please add the following JS:
    (js/custom.js)

    $('#header .dropdown-toggle').mousedown(function() {
    	$('.header-nav-main .dropdown.open').removeClass('open');
    });

    2) Add the header-nav-main-arrows class like you did (header-nav-main header-nav-main-arrows header-nav-main-arrows header-nav-main-square) but also add this css:

    (css/custom.css)

    @media (min-width: 992px) {
    	#header .header-nav.header-nav-stripe nav > ul > li > a {
    		position: relative;
    		padding-right: 35px;
    	}
    }

    Best Regards,

    Jonas


    in reply to: Additional Side Panel #10029564
    Support
    Keymaster

    Hello, I’m sorry about that, but unfortunately it’s not possible at the moment. The side pane is activated with a single class.

    But here’s a workaround to make that work:

    Side Panel HTML

    <div class="side-panel-wrapper">
    	<button class="hamburguer-btn side-panel-close side-panel-toggle active" data-set-active="false">
    		<span class="close">
    			<span></span>
    			<span></span>
    		</span>
    	</button>
    	<aside class="sidebar">
    		<h5 class="font-weight-bold">Side Panel 1</h5>
    	</aside>
    </div>
    
    <div class="side-panel-wrapper side-panel-wrapper-2">
    	<button class="hamburguer-btn side-panel-close side-panel-toggle active" data-set-active="false">
    		<span class="close">
    			<span></span>
    			<span></span>
    		</span>
    	</button>
    	<aside class="sidebar">
    		<h5 class="font-weight-bold">Side Panel 2</h5>
    	</aside>
    </div>

    Side Panel Buttons HTML

    <a href="feature-side-panel-left-slide.html" class="btn btn-primary btn-modern side-panel-toggle" data-extra-class="side-panel">Open Side Panel 1</a>
    <a href="feature-side-panel-left-slide.html" class="btn btn-primary btn-modern side-panel-toggle" data-extra-class="side-panel-2">Open Side Panel 2</a>

    CSS: (css/custom.css)

    html.side-panel.side-panel-open .side-panel-wrapper-2 {
        transform: translate3d(-100%, 0, 0);
    }
    
    html.side-panel-2.side-panel-open .side-panel-wrapper-2 {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    * It only works with the default left side panel.

    Best Regards,

    Jonas


    in reply to: Responsive header container #10029548
    Support
    Keymaster

    Hello, great, in that case you can try some media queries with fixed values, for example:

    (css/custom.css)

    @media (max-width: 991px) {
    	#header .header-logo img {
    		max-width: 200px;
    		height: auto !important;
    	}
    	
    	html.sticky-header-enabled #header .header-logo-sticky-change {
    		max-width: 200px;
    		height: auto !important;
    	}
    }

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

    Kind Regards,

    Jonas


    Support
    Keymaster

    Unfortunately it won’t be possible to have the float image and that kind of list.


    in reply to: iPad Pro Display Issue – Cards #10029545
    Support
    Keymaster

    Hello, I could not reproduce the same issue here, maybe it’s just in a very specific ipad and browser version, but please try to remove the clearfix DIV you have right before the blocks.

    Best Regards,

    Jonas


    Support
    Keymaster

    Hello,

    Change the list do d-table:

    <ul class="list list-icons d-table">

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

    Kind Regards,

    Jonas


    in reply to: Header, Mainnavi and Revo-Slider #10029541
    Support
    Keymaster

    OK, please try this:

    – Remove the overflow: hidden !important; from that code I sent earlier:

    – And add this:

    @media (min-width: 992px) {
    	html #header .header-nav .header-nav-main nav > ul > li.dropdown-no-items.dropdown-full-color.dropdown-primary.open > a::before,
    	html #header .header-nav .header-nav-main nav > ul > li.dropdown-no-items.dropdown-full-color.dropdown-primary:hover > a::before {
    		display: none;
    	}
    }

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

    Kind Regards,

    Jonas


    in reply to: Responsive header container #10029540
    Support
    Keymaster

    Hello, thanks for your purchase.

    Could you please send us the URL of your site so we can make the tests?

    With the code you sent it looks like this:

    If possible send the URL so we can understand it better.

    Kind Regards,

    Jonas


    in reply to: demo-construction, change pyramids to squares. #10029539
    Support
    Keymaster

    Hello, sure, it’s possible, add this:

    (css/custom.css)

    .section-custom-construction .container:before {
    	transform: none !important;
    }
    
    .section-custom-construction .container:after {
    	transform: none !important;
    }
    
    .section-custom-construction-2:after {
    	transform: none !important;
    }
    
    #footer:after {
    	transform: none !important;
    }

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

    Kind Regards,

    Jonas


    in reply to: Book Now #10029538
    Support
    Keymaster

    Hello,

    Change the validation script (demo-hotel.js)

    FROM:

    $('#bookForm').validate({
    	onkeyup: false,
    	onclick: false,
    	onfocusout: false,
    	errorPlacement: function(error, element) {
    		if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
    			error.appendTo(element.parent().parent());
    		} else {
    			error.insertAfter(element);
    		}
    	}
    });

    TO:

    $('#bookForm').validate({
    	onkeyup: false,
    	onclick: false,
    	onfocusout: false,
    	errorPlacement: function(error, element) {
    		if (element.attr('type') == 'radio' || element.attr('type') == 'checkbox') {
    			error.appendTo(element.parent().parent());
    		} else {
    			error.insertAfter(element);
    		}
    	},
    	submitHandler: function(form) {
    
    		var $submitButton = $(this.submitButton),;
    
    		$submitButton.val( 'Loading...' ).attr('disabled', true);
    		
    		form.submit();
    		
    	}
    });

    Kind Regards,

    Jonas


    in reply to: Gradient Bar #10029537
    Support
    Keymaster

    Hello, please check this page: https://preview.oklerthemes.com/porto/7.4.0/elements-sections-parallax.html

    Now check the “Custom Background Section”. It uses the primary and secondary color from your skin settings: http://www.okler.net/forums/topic/how-to-use-a-skin/

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

    Kind Regards,

    Jonas


    in reply to: Forcing a Font #10029536
    Support
    Keymaster

    Hello,

    If you have that font (the ttf file or similar):

    1) Just add that fontface in the css, like this post: https://www.balbooa.com/knowledgebase/32-documentation-faq-joomla/176-how-to-add-custom-font-to-website-through-fontface

    2) Add the custom css with font family:

    (css/custom.css)

    body {
    	font-family: "Open Sans", sans-serif !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	font-family: "Montserrat", sans-serif !important;
    }

    Change the font-family with the new font that you want to use.

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

    Kind Regards,

    Jonas


    in reply to: contact form with the phone number #10029535
    Support
    Keymaster

    Hello, you can use the Contact Form JS/PHP to make that work, just change the following code:

    HTML:

    <form id="contactForm" class="custom-form-style-1 contact-form" action="php/contact-form.php" method="POST">
    			
    	<div class="contact-form-success alert alert-success d-none mt-4" id="contactSuccess">
    		<strong>Success!</strong> Your register has been sent to us.
    	</div>
    
    	<div class="contact-form-error alert alert-danger d-none mt-4" id="contactError">
    		<strong>Error!</strong> There was an error sending your register.
    		<span class="mail-error-message text-1 d-block" id="mailErrorMessage"></span>
    	</div>
    
    	<div class="form-row">
    		<div class="form-group col-md-6 pr-md-0">
    			<input type="text" value="" data-msg-required="Please enter your first name." maxlength="100" class="form-control bg-color-tertiary" name="firstName" id="firstName" placeholder="FIRST NAME*" required>
    		</div>
    		<div class="form-group col-md-6 pl-md-0">
    			<input type="text" value="" data-msg-required="Please enter your last name." maxlength="100" class="form-control bg-color-tertiary custom-border-left-1" name="lastName" id="lastName" placeholder="LAST NAME*" required>
    		</div>
    	</div>
    	<div class="form-row">
    		<div class="form-group col-md-6 pr-md-0">
    			<input type="text" value="" data-msg-required="Please enter your phone number." maxlength="100" class="form-control bg-color-tertiary" name="phone" id="phone" placeholder="PHONE*" required>
    		</div>
    		<div class="form-group col-md-6 pl-md-0">
    			<input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control bg-color-tertiary custom-border-left-1" name="email" id="email" placeholder="EMAIL*" required>
    		</div>
    	</div>
    	<div class="form-row">
    		<div class="form-group col">
    			<input type="submit" value="GET IT NOW" class="btn btn-primary text-1 font-weight-semibold d-block text-4 py-3 w-100" data-loading-text="Loading...">
    		</div>
    	</div>
    </form>

    – Add this JS file after demo-education.js in the HTML (bottom of the html):

    <script src="js/views/view.contact.js"></script>

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

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, add the class p-relative and z-index-1.

    container float-right pr-0 w-50 p-relative z-index-1

    Best Regards,

    Jonas


    in reply to: Header, Mainnavi and Revo-Slider #10029523
    Support
    Keymaster

    Hello,

    I could not reproduce the same issue on Chrome, it’s not jumping here.

    Can you send more details? Which browser and resolution are you using?

    Kind Regards.


    Support
    Keymaster

    Hello,

    It’s not possible to load content with ajax from a enternal URL, you would have to make it with PHP or something similar, more information in this link: https://stackoverflow.com/questions/4613310/how-to-call-external-url-in-jquery

    (That part is not included in the template).

    Best Regards,

    Jonas


    in reply to: Combination filters portfolio #10029517
    Support
    Keymaster

    Hello, could you please share the URL where I can see that and make a few tests?

    Kind Regards,

    Jonas


    in reply to: Header, Mainnavi and Revo-Slider #10029516
    Support
    Keymaster

    Hello, thanks for choosing Porto once again.

    1) Add this:

    (css/custom.css)

    html.boxed:not(.sticky-header-active) #header.header-effect-shrink .header-body {
        position: fixed !important;
        top: auto !important;
    }

    2) Add a class “dropdown-no-items” and the following css:

    @media (min-width: 992px) {
    	#header .header-nav-main nav > ul > li.dropdown-no-items.open > a,
    	#header .header-nav-main nav > ul > li.dropdown-no-items:hover > a {
    		border-radius: 4px !important;
    		position: relative !important;
    		overflow: hidden !important;
    	}
    }

    3) Sorry, but unfortunately that is not possible, because the menu display method (mobile/not-mobile) is based on Bootstrap breakpoints which can’t be changed.

    4) Add this:

    .rev_slider .slotholder:after {
    	background: transparent !important;
    }

    Best Regards,

    Jonas


    in reply to: Credit Card Checkout #10029515
    Support
    Keymaster

    Hello, thanks for your purchase.

    Unfortunately at the moment Porto does not come with the next step of the checkout (Credit Card), but you can find some good examples on Codepen:

    https://codepen.io/rcdexta/pen/eZPbzB

    https://codepen.io/joyceep/pen/CGzHd

    https://codepen.io/quinlo/pen/YONMEa

    We will consider to add that feature in the next versions.

    Best Regards,

    Jonas


    in reply to: modal does not work after ajax post #10029514
    Support
    Keymaster

    Hello, thanks for your purchase.

    After the ajax call it’s probably showing a JS error or changing the HTML part where the button is. To make more tests please share the URL of your project with us so we can try that too.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, I’m sorry but I could not reproduce that problem that you mentioned, if possible please send us more details.

    Best Regards.


    in reply to: Dropdown and Input box have different height #10029499
    Support
    Keymaster

    Hello,

    We will make a few more tests in our current version from Porto Admin, but I just checked the url you sent and to fix that you can just change the height a little bit, adding this:

    (css/custom.css)

    .select2-container--bootstrap .select2-selection--single {
        height: 38px;
        line-height: 1.8;
        padding: 6px 24px 6px 12px;
    }

    Let me know if there is anything else I can help you with.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, my suggestion is to use the vertical alignment from bootstrap inside the blocks, which you can find samples in this link: https://getbootstrap.com/docs/4.3/layout/grid/#vertical-alignment

    Then you can just set text-right and remove the “float-right” you have there.

    Kind Regards,

    Jonas


    in reply to: Trying to add parallax section right above footer #10029497
    Support
    Keymaster

    Hello, thanks for your purchase.

    You can just remove the margins using the “helper classes” from bootstrap, for example:

    FROM:

    <footer id="footer">

    TO:

    <footer id="footer" class="mt-0">

    “mt” is margin-top: 0.

    You can also remove the parallax margin adding “mb” class. margin-bottom:0

    More information about those classes: https://getbootstrap.com/docs/4.3/utilities/spacing/#notation

    Kind Regards,

    Jonas


    in reply to: Make body part wider #10029496
    Support
    Keymaster

    Hello, sure, it’s possible, you just need to change the container width, for example:

    FROM:

    <div class="container">

    TO:

    <div class="container container-lg">

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

    Kind Regards,

    Jonas


    in reply to: submit from a dialogbox #10029495
    Support
    Keymaster

    Hello, sure, and you can also do that using jQuery:

    $( "form:first" ).submit();

    More information: https://api.jquery.com/submit/

    Best Regards,

    Jonas


    in reply to: sorting a table using css command? #10029483
    Support
    Keymaster

    Hello, with CSS only it’s not possible to sort the table.

    There are a few another solutions you can find on Codepen, but all with CSS and JS.

    Example: https://codepen.io/tjegan/pen/PjjyVN

    Best Regards,

    Jonas


    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: sorting a table using css command? #10029479
    Support
    Keymaster

    Hello, thanks for your feedback.

    The only way to use sort in the tables is to work with Datatables – https://datatables.net/ – (tables advanced) – Which is included in the template.

    Make sure you include all scripts, as shown in this page:
    http://preview.oklerthemes.com/porto-admin/2.2.0/tables-advanced.html

    Quick example:

    <table class="table table-bordered table-striped mb-0" id="datatable-test">
    	<thead>
    		<tr>
    			<th>Rendering engine</th>
    			<th>Browser</th>
    			<th>Platform(s)</th>
    			<th class="d-lg-none">Engine version</th>
    			<th class="d-lg-none">CSS grade</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Trident</td>
    			<td>Internet
    				Explorer 4.0
    			</td>
    			<td>Win 95+</td>
    			<td class="center d-lg-none">4</td>
    			<td class="center d-lg-none">X</td>
    		</tr>
    		<tr>
    			<td>Trident 2</td>
    			<td>Internet
    				Explorer 5.0
    			</td>
    			<td>Win 95+</td>
    			<td class="center d-lg-none">5</td>
    			<td class="center d-lg-none">C</td>
    		</tr>
    	</tbody>
    </table>

    JS:

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		$('#datatable-test').dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    			"paging":   false,
    			"ordering": true,
    			"searching": false,
    			"info":     false
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    Best Regards,

    Jonas


    in reply to: Form Wizard – Send Data of each Step by Ajax #10029474
    Support
    Keymaster

    Hello, here’s an example:

    var myValue = $("[name='nameofobject']");

    Best Regards,

    Okler Themes.


    in reply to: Side panel problem #10029471
    Support
    Keymaster

    Hello,

    1) Your slides have errors, remove the data-hash and offset from all links you have in your slides, there are 4.

    *** Always check for errors in the console of your browser:

    —> http://www.okler.net/forums/topic/how-to-find-a-javascript-error/

    2) Open the slide on left or change the button position:

    <a href="feature-side-panel-right-slide.html" class="btn btn-dark btn-modern side-panel-toggle" data-extra-class="side-panel-left"><i class="fas fa-chevron-left">&nbsp;</i>&nbsp;&nbsp;FOGLALÁS</a>

    Best Regards,

    Jonas


    in reply to: Form Wizard – Send Data of each Step by Ajax #10029470
    Support
    Keymaster

    Hello, thanks for your purchase.

    To do that you must make an ajax call in all tab/steps changes.

    In the file js/examples/examples.wizard.js you can just add the ajax in that event:

    Best Regards,

    Jonas


    Support
    Keymaster

    Bom dia, para isso terá que fazer a tab com um link externo.

    Mais informações nesse topico: https://stackoverflow.com/questions/19814481/linking-to-a-bootstrap-tab-from-outside-how-to-set-the-tab-to-active

    Att,

    Jonas


    in reply to: postback asp.net and slider, cannot fetch the value set #10029468
    Support
    Keymaster

    Hello, thanks for your purchase.

    Unfortunately we have never worked with asp.net.

    If you could please explain it with more details with may help you with Javascript part.

    Best Regards,

    Jonas


    in reply to: Adwords does not like your script. Please assist. #10029464
    Support
    Keymaster

    Great, thanks!

    Let me know if there is anything else I can help you with.

    Kind Regards,

    Jonas


    in reply to: demo-photography.js make a confused #10029455
    Support
    Keymaster

    Hi, OK, got it.

    In that case please just try to remove lines FROM 14 TO 106 – File: demo-photography.js

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

    Kind Regards,

    Jonas


    in reply to: Adwords does not like your script. Please assist. #10029452
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: demo-photography.js make a confused #10029450
    Support
    Keymaster
    This reply has been marked as private.
    Support
    Keymaster

    Bom dia, esse ticket foi aberto para o Porto Template, mas acredito que se refira ao EZY.

    Um exemplo abaixo:

    <div class="sort-destination-loader sort-destination-loader-showing">
    	<div class="lightbox" data-plugin-options="{'delegate': '.open-lightbox', 'type': 'image', 'gallery': {'enabled': true}}">
    		<ul class="portfolio-list sort-destination m-0" data-sort-id="portfolio2" id="portfolio2">
    			<li class="col-12 col-md-6 col-lg-3 p-0 isotope-item brands">
    				<div class="portfolio-item m-0 p-0">
    					<div class="image-frame image-frame-style-1 image-frame-effect-1">
    						<span class="image-frame-wrapper">
    							<img src="img/projects/generic/project-15.jpg" class="img-fluid" alt="">
    							<span class="image-frame-inner-border"></span>
    							<span class="image-frame-action image-frame-action-effect-1 image-frame-action-sm">
    								<a class="open-lightbox" href="img/projects/generic/project-15.jpg">
    									<span class="image-frame-action-icon">
    										<i class="lnr lnr-magnifier text-color-light"></i>
    									</span>
    								</a>
    								<a href="#">
    									<span class="image-frame-action-icon">
    										<i class="lnr lnr-link text-color-light"></i>
    									</span>
    								</a>
    							</span>
    						</span>
    					</div>
    				</div>
    			</li>
    			<li class="col-12 col-md-6 col-lg-3 p-0 isotope-item design">
    				<div class="portfolio-item m-0 p-0">
    					<div class="image-frame image-frame-style-1 image-frame-effect-1">
    						<span class="image-frame-wrapper">
    							<img src="img/projects/generic/project-16.jpg" class="img-fluid" alt="">
    							<span class="image-frame-inner-border"></span>
    							<span class="image-frame-action image-frame-action-effect-1 image-frame-action-sm">
    								<a class="open-lightbox" href="img/projects/generic/project-16.jpg">
    									<span class="image-frame-action-icon">
    										<i class="lnr lnr-magnifier text-color-light"></i>
    									</span>
    								</a>
    								<a href="#">
    									<span class="image-frame-action-icon">
    										<i class="lnr lnr-link text-color-light"></i>
    									</span>
    								</a>
    							</span>
    						</span>
    					</div>
    				</div>
    			</li>
    		</ul>
    	</div>
    </div>

    Qualquer dúvida, entre em contato.

    Jonas


    in reply to: time picker #10029448
    Support
    Keymaster

    Hello,

    Unfortunately the plugin does not have that option, but you can use JS to make a few changes in the behavior. Here’s an example:

    HTML:

    <input type="text" id="timePickerTest" class="form-control">

    JS:
    (js/custom.js)

    (function($) {
    	$('#timePickerTest').timepicker({
    		disableMousewheel: true,
    		icons: {
    			up: 'fas fa-chevron-up',
    			down: 'fas fa-chevron-down'
    		},
    		showSeconds: true,
    		showMeridian: false
    	}).on('changeTime.timepicker', function(e) {
    		
    		var hours = ('0' + e.time.hours).slice(-2);
    		var minutes = ('0' + e.time.minutes).slice(-2);
    		var seconds = ('0' + e.time.seconds).slice(-2);
    		
    		$(this).val(hours + ':' + minutes + ':' + seconds);
    
    	});
    }).apply(this, [jQuery]);

    More options can be found in this link: http://jdewit.github.io/bootstrap-timepicker/

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

    Kind Regards,

    Jonas


    in reply to: Textbox icons #10029444
    Support
    Keymaster

    Hello, now it looks like the icons are not being loaded at all, please make sure you are adding the css exactly like the instructions in this page: https://fontawesome.com/start

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

    Kind Regards,

    Jonas


    in reply to: Liking Corporate 12 – But the menu is missing #10029442
    Support
    Keymaster

    Hello, thanks for your purchase.

    Sorry about that issue, to fix that please add the following css code:

    (css/custom.css)

    @media (max-width: 1199px) and (min-width: 992px) {
    	html.side-header:not(.side-header-above) body > .body {
    		margin: 0 0 0 255px !important;
    	}
    	
    	html.side-header #header.side-header {
    		left: 0 !important;
    	}
    }

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

    Kind Regards,

    Jonas


    in reply to: Begginer #10029435
    Support
    Keymaster

    Hello, thanks for the interest in our templates.

    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: http://preview.oklerthemes.com/porto/7.4.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.

    (That’s how all the HTML templates available on ThemeForest work).

    More information:

    What is a HTML Admin Template? (Porto Admin)

    Porto Admin is a HTML template, it’s not fully functional, the theme comes with HTML/CSS/JS files that allows you to integrate with your own system and create your own solution, with server-side scripting languages such as PHP, Ruby on Rails, dotNet, etc… (That integration is responsibility of the buyer). It works the same way for all template under the HTML category on ThemeForest.

    How does the integration with the front-end template works?

    Porto Admin is not a CMS/Editor system ready to create new pages on Porto Front-End template. The integration is actually a package of new features from the admin to add in the front-end template, such as advanced tables, advanced forms, etc…

    If you have any questions, just let me know.

    Kind Regards,

    Jonas


    in reply to: errore in console #10029434
    Support
    Keymaster

    Hello, are you trying to add a “sticky” element in the page? Looks like the error is related to that.

    Please check examples in this page: http://preview.oklerthemes.com/porto/7.4.0/elements-sticky-elements.html

    Kind Regards,

    Jonas


    in reply to: demo-photography.js make a confused #10029429
    Support
    Keymaster

    Hello, please try to use different IDS. First one with revolutionSlider and second one with revolutionSlider2.

    Then copy/paste the JS code you want changing the ID too.

    Best Regards,

    Okler Themes


    in reply to: Theme Barber Shop #10029425
    Support
    Keymaster

    Make sure you are downloading version 7.4.0.

    File name is: demo-barber.html

    I just tested it here and the file is there 🙂

    Regards,

    Jonas


    in reply to: Theme Barber Shop #10029423
    Support
    Keymaster

    Hello,

    To download the latest version you can go to the downloads page (logged with the same user that you purchase the template) and download the latest version: http://themeforest.net/downloads – The update is free.

    Changelog is here: http://www.okler.net/forums/topic/porto-changelog/

    Kind Regards,

    Jonas


    in reply to: Recaptcha verification has stopped working #10029421
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: script to fix menu #10029420
    Support
    Keymaster

    Bom dia,

    Acredito que o seu arquivo theme.js esteja um pouco diferente da ultima versão.

    Procure essa parte no código e adicione o script conforme esse screenshot:

    Jonas


    in reply to: Mobile – Page issue. #10029419
    Support
    Keymaster

    Hello, thanks for your purchase.

    Regarding the elements position, please note that you have to set the position for 4 resolutions breakpoints.

    For example, in that part:

    data-x="center" data-hoffset="['-145','-145','-145','-320']"
    data-y="center" data-voffset="['-80','-80','-80','-130']"

    In that part you need to set it based in the following breakpoints: 4096,1200,992,500

    The problem I see is that in some cases the last value is not set correctly.

    You can also set fontsize and lineheight for each resolution if you want:

    data-fontsize="['18','18','18','40']"
    data-lineheight="['26','26','26','45']"

    Let me know if there is anything else I can help you with.

    Kind Regards,

    Jonas


    in reply to: Textbox icons #10029417
    Support
    Keymaster

    Hello, looks like the FontAwesome css file you have is not correct or has some errors.

    Please try to use the CDN:

    https://use.fontawesome.com/releases/v5.8.1/css/all.css

    Or try to fix the file that you have compressed downloading it again:

    https://fontawesome.com/start

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

    Kind Regards,

    Jonas


    in reply to: Center text in DIV both Horizontally and Verically #10029412
    Support
    Keymaster

    Hello, please check Bootstrap documentation with several examples:

    https://getbootstrap.com/docs/4.3/layout/grid/#vertical-alignment

    I believe it has the display option you want.

    If you are using a table, please check this one: https://getbootstrap.com/docs/4.3/utilities/vertical-align/

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

    Kind Regards,

    Jonas


    in reply to: script to fix menu #10029411
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Bootstrap 4.3.1 on Porto 7.3.0 #10029407
    Support
    Keymaster

    Sure.

    Popper can also be updated.


    in reply to: Multiple flip slideshows #10029403
    Support
    Keymaster

    Hello, OK, right.

    Please try to change the slider script (view.home.js) to this one:

    /*
    Circle Slider
    */
    if ($.isFunction($.fn.flipshow)) {
    	var circleContainer = $('.fc-slideshow');
    
    	$.each( circleContainer, function() {
    			
    		var $container = $(this);
    			
    		$container.flipshow();
    
    		setTimeout(function circleFlip() {
    			$container.data().flipshow._navigate($container.find('div.fc-right span:first'), 'right');
    			setTimeout(circleFlip, 3000);
    		}, 3000);
    		
    	});
    }

    So now you can add as many sliders as you want in the page.

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

    Kind Regards,

    Jonas


    in reply to: links colour #10029401
    Support
    Keymaster

    Hello,

    – Remove the class: “footer-hover-links-light” from your footer element.

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

    Kind Regards,

    Jonas


    in reply to: Bootstrap 4.3.1 on Porto 7.3.0 #10029399
    Support
    Keymaster

    Hello, from version 7.3.0 to 7.4.0 we updated Bootstrap and FontAwesome plugins.

    It’s safe to update both folders, you won’t have any problems.

    Best Regards,

    Jonas


    in reply to: Colours #10029397
    Support
    Keymaster

    Hello, sorry but this topic is closed due to too many replied.

    Can you please open a new one with new questions you may have?

    Best Regards,

    Okler Themes


    in reply to: Multiple flip slideshows #10029396
    Support
    Keymaster

    Hello, sure, that’s correct, you just need to initialize the carousel with the JS script you mentioned above.

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Mobile Phone Menu Disappear #10029117
    Support
    Keymaster

    Hello, please make sure you keep the “header-btn-collapse-nav” button after the navigation.

    <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
    	<i class="fas fa-bars"></i>
    </button>

    That button must go after the social icons.

    Kind Regards,

    Jonas


    in reply to: Location of the flat header search icon #10029116
    Support
    Keymaster

    Hello, thanks for your purchase.

    The search icon is part of Font Awesome icons that is included on Porto.

    Link: https://fontawesome.com/icons/search?style=solid
    Class is: fas fa-search

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Images not displaying properly #10029115
    Support
    Keymaster

    Hello, thanks for your purchase.

    I’m sorry but I’m not sure I understand the question and the link you provided is not accessible.

    Could you please explain it again and send us a working URL?

    Thanks.

    Kind Regards,

    Jonas


    in reply to: Default Accordion – One open at a time #10029114
    Support
    Keymaster

    Hello, please try this code:

    <div class="accordion accordion-primary" id="accordionExample">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
            <button class="btn btn-link text-light text-decoration-none" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </button>
          </h2>
        </div>
    
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h2 class="mb-0">
            <button class="btn btn-link collapsed text-light text-decoration-none" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </button>
          </h2>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingThree">
          <h2 class="mb-0">
            <button class="btn btn-link collapsed text-light text-decoration-none" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </button>
          </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
    </div>

    Best Regards,

    Jonas


    in reply to: Nai not shown on mobile phone #10028874
    Support
    Keymaster

    Hello, is there any way you can send us the URL so we can make some tests? With the provided code we can’t reproduce the issue here.

    Best Regards,

    Okler Themes


    in reply to: Image sizing #10028873
    Support
    Keymaster

    Hello,

    The image is responsive based in the grid, so to make the image bigger you need to change the columns:

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

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, looks like the problem now is just the IDs of the messages that are different in the JS and HTML files.

    Please check this:

    Please try to change that and make the ids the same in both.

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

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello,

    I just tested your website and found 2 things that must be changed.

    1) Remove the call to view.contact.js:

    2) Change the FORM tag.

    FROM:

    <form id="contactForm" class="custom-form-style-1" action="php/contact-form.php" method="POST">

    TO:

    <form id="contactFormMessage" class="custom-form-style-1" action="php/contact-form.php" method="POST">

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

    Kind Regards,

    Jonas


    in reply to: One Accordion Open At A Time #10028859
    Support
    Keymaster

    Oh, OK, got it now.

    Try this code:

    <div class="accordion accordion-primary" id="accordionExample">
      <div class="card">
        <div class="card-header" id="headingOne">
          <h2 class="mb-0">
            <button class="btn btn-link text-light text-decoration-none" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
            </button>
          </h2>
        </div>
    
        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingTwo">
          <h2 class="mb-0">
            <button class="btn btn-link collapsed text-light text-decoration-none" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
            </button>
          </h2>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header" id="headingThree">
          <h2 class="mb-0">
            <button class="btn btn-link collapsed text-light text-decoration-none" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
            </button>
          </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
          <div class="card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          </div>
        </div>
      </div>
    </div>

    Best Regards,

    Jonas


    in reply to: Portfolio Scroll #10028851
    Support
    Keymaster

    Hello, the problem is that when it finish the request it must reinitialize the appear animation functions, executing the following script:

    (function($) {
    
    	'use strict';
    
    	if ($.isFunction($.fn['themePluginAnimate'])) {
    
    		$(function() {
    			$('[data-appear-animation]').each(function() {
    				var $this = $(this),
    					opts;
    
    				var pluginOptions = theme.fn.getOptions($this.data('plugin-options'));
    				if (pluginOptions)
    					opts = pluginOptions;
    
    				$this.themePluginAnimate(opts);
    			});
    		});
    
    	}
    
    }).apply(this, [jQuery]);

    Please try that and let us know if the problem persists,

    Kind Regards,

    Jonas


    in reply to: One Accordion Open At A Time #10028850
    Support
    Keymaster

    Hello, thanks for your purchase, I’m not sure I understand the question, but please check the accordions examples in this link:

    http://preview.oklerthemes.com/porto/7.2.0/elements-accordions.html

    The accordions does not work like “toggles” and there’s not an One Open At A Time option. The accordions comes from Bootstrap base.

    This stackoverflow post may help you: https://stackoverflow.com/questions/25359335/twitter-bootstrap-multiple-accordions-but-only-one-open-panel-at-a-time

    I hope that helps.

    Kind Regards,

    Jonas


    in reply to: construction template #10028750
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Construction header #10028749
    Support
    Keymaster

    Please try this code:

    css/custom.css

    html #header.header-semi-transparent-light .header-body:before {
        opacity: 1 !important;
        background: #FFF;
    }

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: How to increase the default font size? #10028748
    Support
    Keymaster

    Hello, yes, you can set the font-size of the body, adding this:

    (css/custom.css)

    body {
    	font-size: 16px;
    }

    But there are a few elements that has fixed font-sizes (to avoid conflicts), such as the card-headers and titles, those you would have to change as well.

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Construction header #10028747
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Parallax in mobile not Work? #10028686
    Support
    Keymaster

    Hello, you can change the settings of the parallax, just add this:

    (js/custom.js)

    $.extend(theme.PluginParallax.defaults, {
    	enableOnMobile: true
    });

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

    Kind Regards,

    Jonas


    in reply to: Update #10028676
    Support
    Keymaster

    No, because the current version is very stable and we will update plugins only, it will be easy to update.


    in reply to: Update #10028674
    Support
    Keymaster

    A few weeks for the first update (plugins) and a few months for the WP version. Sorry for the wait.


    in reply to: Update #10028672
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Suppress Column Ordering with HTML 5 Data Attributes #10028650
    Support
    Keymaster

    Hello, it must be set in the JS file: examples.datatables.default.js (if you are using advanced tables)

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		$('#datatable-default').dataTable({
    			ordering:  false,
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><""t>p'
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: No horizontal scroll bars in table #10028649
    Support
    Keymaster

    Hello, edit the file examples.datatables.default.js (if you are using advanced tables) and remove the table-responsive class:

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		$('#datatable-default').dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><""t>p'
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: hamburger menu not displaying #10028647
    Support
    Keymaster
    This reply has been marked as private.
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Arrow visualization #10028645
    Support
    Keymaster

    Hello, it’s a z-index problem, set all the z-index of the arrows to 1000, like this:

    <span class="arrow hlb d-none d-md-block" data-appear-animation="rotateInDownRight" data-appear-animation-delay="300" data-appear-animation-duration="2s" style="left: 95%; top: -62px; z-index: 1000;"></span>

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

    Kind Regards,

    Jonas


    in reply to: Language changing in countdown #10028644
    Support
    Keymaster

    Hello, you can put the values in the options, for example:

    <div class="countdown countdown-primary" data-plugin-countdown data-plugin-options="{'date': '2020/06/10 12:00:00', 'textDay': 'DAY1', 'textHour': 'HRS1', 'textMin': 'MIN1', 'textSec': 'SEC1', 'numberClass': 'font-weight-normal'}"></div>

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

    Kind Regards,

    Jonas


    in reply to: Align: center #10028643
    Support
    Keymaster

    Hello, you need to change the container-fluid class to container only:

    And also change the columns size in the grid as shown in that image.

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

    Kind Regards,

    Jonas


    in reply to: page header #10028642
    Support
    Keymaster

    Hello, you can adjust the page header padding, adding this:

    (css/custom.css)

    .page-header.page-header-modern.page-header-background.page-header-background-md {
        padding: 250px 0 100px !important;
    }

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

    Kind Regards,

    Jonas


    in reply to: navigations #10028641
    Support
    Keymaster

    Hello, we are sorry but we are not sure we understand the question, can you please send us more details?

    Best Regards,

    Jonas


    in reply to: Radiobuttons as a row #10028640
    Support
    Keymaster

    Hello, sure, here’s an example:

    <div class="form-group row">
        <label class="col-sm-2">Radio: </label>
        <div class="col-sm-10">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label class="form-check-label" for="inlineRadio1">Option one</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label class="form-check-label" for="inlineRadio2">Option Two</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                <label class="form-check-label" for="inlineRadio3">Option tree</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
                <label class="form-check-label" for="inlineRadio3">Option four (disabled)</label>
            </div>
        </div>
    </div>

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

    Kind Regards,

    Jonas


    in reply to: Add Toggle / Read More #10028639
    Support
    Keymaster

    Hello, thanks for your purchase.

    Sure, you can do that, here’s an example using Bootstrap:

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta <span class="collapse" id="viewdetails"> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </span> <a class="text-primary" href="#" data-toggle="collapse" data-target="#viewdetails">View More...</a></p>

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

    Kind Regards,

    Jonas


    in reply to: Font Awesome Icons #10028529
    Support
    Keymaster

    Hello, Porto Admin currently uses Font Awesome Free 5.0.13

    Make sure the icon you are using works in that version or update the font awesome files.

    Latest version available: https://fontawesome.com/start

    Kind Regards,

    Jonas


    • This reply was modified 9 months, 3 weeks ago by  Support.
    in reply to: Form Validation on Date Fields #10028528
    Support
    Keymaster

    Hello, here’s a simple way to validate:

    <form id="form" action="forms-validation.html" class="form-horizontal">
    	<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">Date <span class="required">*</span></label>
    				<div class="col-sm-9">
    					<input class="form-control" id="eventDate" name="event_date" placeholder="MM/DD/YYYY" type="text" required>
    				</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>
    </form>

    If you want to add input mask, please check our examples:
    https://preview.oklerthemes.com/porto-admin/2.1.1/forms-advanced.html

    Kind Regards,

    Jonas


    in reply to: Radiobuttons as a row #10028527
    Support
    Keymaster

    Hello, please try this example:

    <div class="form-group row">
    	<label class="col-lg-3 control-label text-lg-right pt-2">Inline checkboxes</label>
    	<div class="col-lg-6">
    		<label class="checkbox-inline">
    			<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
    		</label>
    		<label class="checkbox-inline">
    			<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
    		</label>
    		<label class="checkbox-inline">
    			<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
    		</label>
    	</div>
    </div>

    Kind Regards,

    Jonas


    in reply to: Datepicker Format #10028526
    Support
    Keymaster

    Hello,

    To change the format, you can just set it like this:

    <input type="text" data-plugin-datepicker data-plugin-options='{"format": "yy/mm/dd"}' class="form-control">

    Or change the default settings:
    (assets/javascripts/theme-custom.js)

    $.extend(theme.PluginDatePicker.defaults, {
        format: "yy/mm/dd" 
    });

    Available Options:
    http://bootstrap-datepicker.readthedocs.org/en/release/options.html

    Kind Regards,

    Jonas


    in reply to: Datepicker Pop-up Positioning #10028524
    Support
    Keymaster

    Hello,

    You can change/force the datepicker orientation to bottom:

    <input type="text" data-plugin-datepicker class="form-control" data-plugin-options='{"orientation": "bottom"}'>

    More about the orientation options can be seen in this page: https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#orientation

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

    Kind Regards,

    Jonas


    • This reply was modified 9 months, 3 weeks ago by  Support.
    in reply to: Do you support editors? #10028523
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please note that Porto (front-end) does not come with editor, but Porto Admin does. Check this page for example (at the bottom of the page): http://preview.oklerthemes.com/porto/7.2.0/feature-admin-forms-advanced.html

    You can integrate Porto Admin on Porto.

    Regarding the integration with the Front-End, here are the complete instructions: http://www.okler.net/forums/topic/how-to-integrate-porto-admin-extension-on-porto/

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: header effect shrink: issue with height #10028522
    Support
    Keymaster

    Hello, thanks for your purchase.

    It actually depends on the header style that you are using, if possible please send us the header (Porto HTML file) that you based your website or send us the link of your site so we can check that for you.

    Kind Regards,

    Jonas


    in reply to: responsive? #10028521
    Support
    Keymaster

    Hello, thanks for the message.

    I’m sorry but we are a little confused about this question, could you please send us more details?

    Kind Regards,

    Jonas


    in reply to: Email giving success message but not receiving it. #10028520
    Support
    Keymaster

    Hello, I’ve checked the website and everything is fine in the JS/HTML files, the ajax is sending the request to the server.

    If the e-mail is not set to the same domain of the website you will have to set authentication mode (SMTP):

    The server of the website that is not working probably more restrict in terms of security.

    More info: http://www.okler.net/forums/topic/important-contact-form-is-not-working/

    Kind Regards,

    Jonas


    in reply to: Need version 5.7.2 #10028465
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Porto template with bootstrap 3.3.6 #10028405
    Support
    Keymaster

    Hello, please note that due to the Envato Policy we can only reply technical questions to buyers with valid support license.

    Also, note that the support questions are unlimited (during valid date) but you have made more than 200 questions/replies.

    Regards,

    Okler Themes


    in reply to: social icons #10028354
    Support
    Keymaster

    Hello, to fix that please add the following css code:

    (css/custom.css)

    .social-icons li a {
    	position: relative;
    }
    
    .social-icons li a i {
    	position: absolute;
    	top: 50%;
    	transform: translate(-50%, -50%);
    }

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: sticky/static footer #10028353
    Support
    Keymaster

    Hello, if you want that in all resolutions just use this:

    (css/custom.css)

    #footer {
    		position: fixed;
    		width: 100%;
    		bottom: 0;
    		left: 0;
    		z-index: 999;
    	}

    Kind Regards,

    Jonas


    in reply to: Menu in Header and Side Menu #10028339
    Support
    Keymaster

    Hello, unfortunately that is a little complicated to do and that question is a bit beyond from what support can offer. We actually provided the start to make those changes in the code, but more than that would require more custom work.

    Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs. Please consider that for the next questions.

    Item support does not include:

    – Customization and installation services
    – Support for third party software and plug-ins

    Support for our items includes:

    – Responding to questions or problems regarding the item and its features.
    – Fixing bugs and reported issues.
    – Providing updates to ensure compatibility with new software versions.

    The definition of support we provide is based on Envato/ThemeForest license.

    Kind Regards,

    Jonas


    in reply to: How to increase the header height #10028338
    Support
    Keymaster

    Hello, thanks for your purchase.

    This is the code you need:

    (css/custom.css)

    .header {
    	height: 120px;
    }
    
    .inner-wrapper {
    	padding-top: 120px;
    }
    
    @media only screen and (min-width: 768px) {
    
    	/* Layout Fixed - Page header */
    	html.fixed .page-header {
    		top: 120px;
    	}
    
    	/* Layout Fixed - Sidebar Left */
    	html.fixed .sidebar-left {
    		top: 120px;
    	}
    
    }
    
    @media only screen and (min-width: 1200px) {
    
    	/* Layout Boxed - Header */
    	html.boxed .header {
    		height: 120px;
    	}
    	
    	html.boxed .inner-wrapper {
    		padding-top: 120px;
    	}
    	
    }
    
    @media only screen and (max-width: 767px) {
    
    	.header .logo-container {
    		height: 120px;
    	}
    
    	.header .header-right {
    		height: 120px;
    		margin-top: 120px;
    	}
    	
    	.sidebar-left {
    		padding-top: 120px;
    	}
    	
    }
    
    @media only screen and (min-width: 768px) {
    
    	html.header-fixed .inner-wrapper {
    		margin-top: 120px;
    	}
    	
    }
    
    @media only screen and (min-width: 768px) {
    
    	.header.header-nav-menu .logo:after {
    		height: 120px;
    	}
    	
    }
    
    @media only screen and (min-width: 768px) {
    	html.fixed .inner-wrapper {
    		padding-top: 174px;
    	}
    }

    Kind Regards,

    Jonas


    in reply to: sticky/static footer #10028337
    Support
    Keymaster

    Hello, thanks for your purchase.

    To make the footer fixed you can simply add the following code:

    (css/custom.css)

    @media (min-width: 992px) {
    	#footer {
    		position: fixed;
    		width: 100%;
    		bottom: 0;
    		left: 0;
    		z-index: 999;
    	}
    }

    Kind Regards,

    Jonas


    in reply to: contact from giving me error #10028336
    Support
    Keymaster

    Hello,

    Regarding this error, probably your server don’t allow the mail() function of PHP.
    So in that case you can try send the emails using the SMTP of your server. For it, please follow the instructions on this topic:

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

    Kind Regards,

    Jonas


    in reply to: change menu appearance #10028328
    Support
    Keymaster

    Hello, try with this code:

    css/custom.css

    @media (max-width: 991px) {
    	body #header nav ul.nav-main li.active a {
    		background: #0088cc !important;
    		color: #FFF !important;
    	}
    }

    in reply to: date and timepicker #10028326
    Support
    Keymaster

    themePluginDatePicker in fact calls the bootstrapDP passing the options you may add in the date-plugin-options attribute in the input.

    Check file js/theme.js line 657 for more information.

    Bootstrap timepicker docs: http://jdewit.github.io/bootstrap-timepicker/

    For that one you can use standard methods, for example:

    $('#timepicker').timepicker('setTime', '12:45 AM');

    • This reply was modified 10 months, 3 weeks ago by  Support.
    in reply to: revolution slider html5 video autoplay #10028324
    Support
    Keymaster

    Hello, here is an example for Youtube video with autoplay:

    * See the “origin” in that code and change to your domain.

    Kind Regards,

    Jonas


    in reply to: date and timepicker #10028323
    Support
    Keymaster

    Hello, the datepicker plugin used on Porto Admin is this one: https://bootstrap-datepicker.readthedocs.io/en/latest/ – This is the plugin that is called with this function themePluginDatePicker.

    Here are the methods: https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html

    See “no conflict mode” in this page: https://bootstrap-datepicker.readthedocs.io/en/latest/

    So you will see that you need to call the methods this way:

    $('#datepicker').bootstrapDP('destroy');

    So that’s how you destroy the datepicker and can reinit.

    I hope that helps.


    in reply to: Switch vertical tabs #10028322
    Support
    Keymaster

    Hello, the tabs are from Bootstrap, there are some examples in the web on how to use “hash” and storage to keep the state, please check this topic on stackoverflow: https://stackoverflow.com/questions/9685968/best-way-to-make-twitter-bootstrap-tabs-persistent

    I hope that helps.

    Kind Regards,

    Jonas


    in reply to: checkboxes[] in form #10028321
    Support
    Keymaster

    Hello, it’s probably the code that was changed in the PHP file, to solve that we would have to make tests with your server and customized files (accessing via FTP, etc…) and that is a bit beyond from what support can offer.

    Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs.

    Item support does not include:

    – Customization and installation services
    – Support for third party software and plug-ins

    Support for our items includes:

    – Responding to questions or problems regarding the item and its features.
    – Fixing bugs and reported issues.
    – Providing updates to ensure compatibility with new software versions.

    The definition of support we provide is based on Envato/ThemeForest license.

    Kind Regards,

    Jonas


    in reply to: checkboxes[] in form #10028308
    Support
    Keymaster

    Hello, the server may be blocking the attachment.

    Please make a quick test with the standard advanced contact form (contact-us-advanced.php) from latest version in your server and see if it works.

    I just tested it and this is the result:

    * To make that test I just put our email in the line 14.

    Kind Regards,

    Jonas


    • This reply was modified 10 months, 3 weeks ago by  Support.
    in reply to: contact from giving me error #10028306
    Support
    Keymaster

    Hello, please send us the URL of your site so we can make a few tests.

    Kind Regards,

    Jonas


    in reply to: date and timepicker #10028305
    Support
    Keymaster

    Hello, thanks for your purchase.

    As far as I understand the problem is that you load the content of your modal with ajax and the controls are not initialized, right?

    My suggestion is to run the following commands after the modal is loaded:

    // Datepicker
    (function($) {
    
    	'use strict';
    
    	if ( $.isFunction($.fn[ 'bootstrapDP' ]) ) {
    
    		$(function() {
    			$('[data-plugin-datepicker]').each(function() {
    				var $this = $( this ),
    					opts = {};
    
    				var pluginOptions = $this.data('plugin-options');
    				if (pluginOptions)
    					opts = pluginOptions;
    
    				$this.themePluginDatePicker(opts);
    			});
    		});
    
    	}
    
    	if ( $.isFunction($.fn[ 'timepicker' ]) ) {
    
    		$(function() {
    			$('[data-plugin-timepicker]').each(function() {
    				var $this = $( this ),
    					opts = {};
    
    				var pluginOptions = $this.data('plugin-options');
    				if (pluginOptions)
    					opts = pluginOptions;
    
    				$this.themePluginTimePicker(opts);
    			});
    		});
    
    	}
    
    }).apply(this, [jQuery]);

    You can also change the selectors to modal context, for example:

    FROM:

    $('[data-plugin-timepicker]')...

    TO:

    $('#modalWrapperID [data-plugin-timepicker]')...

    Kind Regards,

    Jonas


    in reply to: change menu appearance #10028304
    Support
    Keymaster

    Hello,

    Please send us the URL of your site so we can make a few tests with the CSS.

    This is the default menu appearance:

    Kind Regards,

    Jonas


    in reply to: maps-google-maps-builder.html #10028303
    Support
    Keymaster

    Hello, thanks for your purchase.

    Could you please send us access to your project (URL with user/pass) so we can make some tests? We received the URL but can’t access.

    Kind Regards,

    Jonas


    in reply to: revolution slider html5 video autoplay #10028302
    Support
    Keymaster

    Hello, thanks for your purchase.

    Looking at your website I can see that the video is loading, but there are 2 problems.

    * The video size is too heavy. 66mb is too much for a background video, my suggestion is to compact the video using a generator: https://www.hongkiat.com/blog/html5-video-converters/

    * The server looks too slow, even with a high speed internet the video is taking too long to load (Took 15 minutes to load the video). If you don’t have another server option you could use Youtube or Vimeo for the video.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, I’m sorry but unfortunately it’s not possible, because the navigation is based on Bootstrap breakpoints (the collapse class).

    To do that you would have to create a custom BS version, changing the variables:
    https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

    It may cause conflict with another elements.

    Kind Regards,

    Jonas


    in reply to: editable tables column add error #10028289
    Support
    Keymaster

    Hello, make sure the HTML is well formatted, here’s an example:

    <table class="table table-bordered table-striped mb-0" id="datatable-editable">
    	<thead>
    		<tr>
    			<th>Rendering engine</th>
    			<th>Browser</th>
    			<th>Platform(s)</th>
    			<th>Test</th>
    			<th>Actions</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr data-item-id="1">
    			<td>Trident</td>
    			<td>Internet
    				Explorer 4.0
    			</td>
    			<td>Win 95+</td>
    			<td>Test!</td>
    			<td class="actions">
    				<a href="#" class="hidden on-editing save-row"><i class="fas fa-save"></i></a>
    				<a href="#" class="hidden on-editing cancel-row"><i class="fas fa-times"></i></a>
    				<a href="#" class="on-default edit-row"><i class="fas fa-pencil-alt"></i></a>
    				<a href="#" class="on-default remove-row"><i class="far fa-trash-alt"></i></a>
    			</td>
    		</tr>
    	</tbody>
    </table>

    JS:

    build: function() {
    	this.datatable = this.$table.DataTable({
    		dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    		aoColumns: [
    			null,
    			null,
    			null,					
    			null,					
    			{ "bSortable": false }
    		]
    	});
    
    	window.dt = this.datatable;
    
    	return this;
    },

    Kind Regards,

    Jonas


    in reply to: Navbar issue! #10028282
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Navbar issue! #10028280
    Support
    Keymaster

    Hello, could you please provide the URL of your website so we can make a few tests?

    We were not able to reproduce that issue here with the standard files.

    Kind Regards,

    Jonas


    in reply to: sticky mobile #10028279
    Support
    Keymaster

    Hello, OK, great.

    The sticky is actually disabled on mobile, to change that please edit the file: js/theme.js – line: 3244

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Archivos adjuntos #10028278
    Support
    Keymaster

    Hola, cambie el archivo PHP con el siguiente código: https://pastebin.com/raw/cx27LMbY

    Saludos cordiales,

    Jonas


    in reply to: datatable change language #10028277
    Support
    Keymaster

    Hello,

    You are referring to translation of tables, right ?

    Supposing that we are using the “Basic” table of “tables-advanced.html”:

    1) Replace all code of (assets/javascripts/tables/examples.datatables.default.js) with new code below:

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		$('#datatable-default').dataTable({
    			oLanguage: {
    			    "sEmptyTable":     "No data available in table",
    			    "sInfo":           "Showing _START_ to _END_ of _TOTAL_ entries",
    			    "sInfoEmpty":      "Showing 0 to 0 of 0 entries",
    			    "sInfoFiltered":   "(filtered from _MAX_ total entries)",
    			    "sInfoPostFix":    "",
    			    "sInfoThousands":  ",",
    			    "sLengthMenu":     "Show _MENU_ entries",
    			    "sLoadingRecords": "Loading...",
    			    "sProcessing":     "Processing...",
    			    "sSearch":         "Search:",
    			    "sZeroRecords":    "No matching records found",
    			    "oPaginate": {
    			        "sFirst":    "First",
    			        "sLast":     "Last",
    			        "sNext":     "Next",
    			        "sPrevious": "Previous" 
    			    },
    			    "oAria": {
    			        "sSortAscending":  ": activate to sort column ascending",
    			        "sSortDescending": ": activate to sort column descending" 
    			    }
    			}
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    * Change the English words with your language.

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

    Kind Regards,

    Jonas


    in reply to: editable tables column add error #10028276
    Support
    Keymaster

    Hello, please make sure you make the changes in the JS file too: js/examples/examples.datatables.editable.js

    For each new column you need to add another value in this part:

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: need only one page website #10028275
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Versión anterior de porto #10028274
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Bottom Logos #10028261
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please try to add the following carousel code:

    <div class="owl-carousel owl-theme mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '476': {'items': 1}, '768': {'items': 5}, '992': {'items': 7}, '1200': {'items': 7}}, 'autoplay': true, 'autoplayTimeout': 3000, 'dots': false}">
    								<div>
    									<img class="img-fluid opacity-2" src="img/logos/logo-1.png" alt="">
    								</div>
    								<div>
    									<img class="img-fluid opacity-2" src="img/logos/logo-2.png" alt="">
    								</div>
    								<div>
    									<img class="img-fluid opacity-2" src="img/logos/logo-3.png" alt="">
    								</div>
    								<div>
    									<img class="img-fluid opacity-2" src="img/logos/logo-4.png" alt="">
    								</div>
    								<div>
    									<img class="img-fluid opacity-2" src="img/logos/logo-5.png" alt="">
    								</div>
    								<div>
    									<img class="img-fluid opacity-2" src="img/logos/logo-6.png" alt="">
    								</div>
    								<div>
    									<img class="img-fluid opacity-2" src="img/logos/logo-4.png" alt="">
    								</div>
    								<div>
    									<img class="img-fluid opacity-2" src="img/logos/logo-2.png" alt="">
    								</div>
    							</div>

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, please check this topic for more information:

    It’s possible to enable the style switcher.

    Kind Regards,

    Jonas


    in reply to: Revolution Slider video not playing #10028259
    Support
    Keymaster

    Hello, thanks for your purchase.

    It’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: Icon gMap doesn't show #10028249
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Icon gMap doesn't show #10028244
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Select2 and jQUery error #10028242
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: making recaptcha required on a form #10028227
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Refund #10028226
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Form Wizard Problem #10028216
    Support
    Keymaster

    If possible send us a link so we can check for that problem. We still could not reproduce and understand the problem.


    in reply to: Form Wizard Problem #10028212
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Form Wizard Problem #10028209
    Support
    Keymaster

    You mentioned about the success message, this is the default popup message:

    There you need to change to show another message or just make an ajax post or redirect to a “success” page.

    The popup is just an example.


    in reply to: Form Wizard Problem #10028207
    Support
    Keymaster

    Hello,

    Please check the file: js/examples/examples.wizard.js – Line 32.

    You will see that file has the behavior when the form is completed, there will need to change and add anything you want (redirect or another popup message, etc…)

    Also, please change the for to have “method” and “action”. Example:

    <form class="form-horizontal" novalidate="novalidate" action="forms-wizard.php" method="post">

    Best Regards,

    Okler Themes.


    in reply to: I think I bought wrong #10028205
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Form Wizard Problem #10028202
    Support
    Keymaster

    Hello, I’m sorry but we are very confused about this topic, could you please send us more instructions on how to reproduce the problem?

    Best Regards,

    Okler Themes


    in reply to: megamenu open / toggle #10028129
    Support
    Keymaster

    Hello, you can do that with css only, for example:

    .header-nav-top-icon {
    	color: #000 !important;
    }
    
    .sticky-header-active .header-nav-top-icon {
    	color: #FFF !important;
    }

    The class “sticky-header-active” is added in the HTML tag when the sticky menu is active.

    Kind Regards,

    Okler Themes


    in reply to: Can't uplod to wordpress theme? #10028128
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Tools #10028127
    Support
    Keymaster

    Hello, Porto is a HTML template, in the HTML templates you need to repeat the menu structure in all files, but if the server supports PHP, this is an easy way: http://www.okler.net/forums/topic/how-to-use-php-includes-for-the-header-and-footer/

    Best Regards,

    Okler Themes


    in reply to: Questions regarding Menu and Hidden Content #10028126
    Support
    Keymaster

    Hello,

    1. Sorry, unfortunately it’s not possible.

    2. You can use responsive utilities, for example:

    <div class="d-none d-lg-block">Content</div>

    More information: https://getbootstrap.com/docs/4.1/utilities/display/

    Best Regards,

    Okler Themes


    in reply to: There are no pictures in the layout! #10028051
    Support
    Keymaster

    Hello, sorry about that, we just included in our item description the information that the images are not included and processed your refund.

    Best regards,

    Okler Themes.


    in reply to: Private question #10027627
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Private question #10027619
    Support
    Keymaster
    This reply has been marked as private.
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Using Porto Admin Multiselect in normale Porto Template #10027345
    Support
    Keymaster

    Hello, I’ve made a few tests and this is the code you need to make that work:

    https://pastebin.com/raw/a6tXJL7z

    Note that the admin path is /admin/

    This is the result:

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

    Kind Regards,

    Jonas


    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Contact Page #10027334
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Potential Website Template Sales #10027088
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Version #10027059
    Support
    Keymaster

    Hello, thanks for your purchase.

    Porto WordPress is also available on ThemeForest. Here’s the link: http://themeforest.net/item/porto-responsive-wordpress-woocommerce-theme/9207399

    If you purchase the WordPress version we can approve the refund for the HTML version.

    All support related to payment and refund is run through Envato’s ticket service:
    http://themeforest.net/refund_requests/new

    In the refund request details please send us the purchase code from your purchase of Porto WordPress version.

    Kind Regards,

    Okler Themes.


    in reply to: EZY Changelog #10026490
    Support
    Keymaster

    .


    in reply to: Porto template with bootstrap 3.3.6 #10026455
    Support
    Keymaster

    Hello,

    We cannot provide the PSD for that, but the image is above a blue rectangle with “multiply” filter and 25% opacity.

    Regards.


    in reply to: Porto template with bootstrap 3.3.6 #10026447
    Support
    Keymaster

    Hello, we just replied to your email.

    Regards.


    in reply to: How to integrate the contact form on CodeIgniter? #10026424
    Support
    Keymaster

    Hello,

    We cannot help you anymore with the tickets you open, as we said before, we helped you a lot with several questions and have done much more than our support is supposed to do. You won’t find this kind of service anywhere else, no other author would be helping you the same way we did so far and you are always being rude with the answers.

    If you are not satisfied with the templates, we will provide a refund.
    All support related to payment and refund is run through Envato’s ticket service:
    http://themeforest.net/refund_requests/new

    Regards,

    Jonas


    in reply to: Problem with the menu #10026423
    Support
    Keymaster

    Hello,

    We just added the print_r command to prove it’s nothing related to our code, it’s in your PHP script as described in the other ticket: http://www.okler.net/forums/topic/how-to-integrate-the-contact-form-on-codeigniter/

    We cannot help you anymore with the tickets you open, as we said before, we helped you a lot with several questions and have done much more than our support is supposed to do. You won’t find this kind of service anywhere else, no other author would be helping you the same way we did so far and you are always being rude with the answers.

    If you are not satisfied with the templates, we will provide a refund.
    All support related to payment and refund is run through Envato’s ticket service:
    http://themeforest.net/refund_requests/new

    Regards,

    Jonas


    in reply to: Combining Slider Range with Pagination #10026410
    Support
    Keymaster

    In this page: http://preview.oklerthemes.com/porto/6.2.1/portfolio-extra-pagination.html

    You can find the file: examples.portfolio.js – Line 335

    That file has the pagination script as well.


    in reply to: Combining Slider Range with Pagination #10026407
    Support
    Keymaster

    Hello,

    I found this example that might be helpful for the page that you are creating.

    Please check this:
    www.codepen.io/Igorxp5/pen/ojJLQE

    I hope that helps.

    Best Regards,

    Jonas


    • This reply was modified 1 year, 6 months ago by  Support.
    • This reply was modified 1 year, 6 months ago by  Support.
    in reply to: Combining Slider Range with Pagination #10026396
    Support
    Keymaster

    Hello,

    1) You can find the functional pagination is this link: http://preview.oklerthemes.com/porto/6.2.1/portfolio-extra-pagination.html – But in that case, where you are going to have many more filters I do not recommend to use it. My suggestion is that you make everything with the URL. So, for example, if you click on page 2 you redirect to /search-results.php?p=2 .

    2) Regarding the range filters, we actually don’t have a functional version of that in the HTML version (just on WP or Magento) – I also suggest that you make the same thing with the range (using an “apply” button) and redirecting the page to something like this: /search-results.php?p=2&min=100&max=800

    Unfortunately that is a little complicated to do and that question is a bit beyond from what support can offer.
    Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs.

    Item support does not include:

    – Customization and installation services
    – Support for third party software and plug-ins

    Support for our items includes:

    – Responding to questions or problems regarding the item and its features.
    – Fixing bugs and reported issues.
    – Providing updates to ensure compatibility with new software versions.

    The definition of support we provide is based on Envato/ThemeForest license.

    Kind Regards,

    Jonas


    in reply to: Chrome displays larger fonts and images as well #10026356
    Support
    Keymaster

    Hello, can you please confirm that your chrome is not on zoom mode?

    Please check this:

    If the problem persists, please send us a screenshot or the URL of your site.

    Kind Regards,

    Okler Themes


    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: Need help implementing these features, dropzone #10026338
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Problem with the menu #10026337
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: How to integrate the contact form on CodeIgniter? #10026336
    Support
    Keymaster

    Hello,

    1) OK

    2) I checked the file here but everything seems to be OK. Do you have access to the logs of the site? Maybe a log folder/file inside the root folder of your domain. It must have the error message somewhere there, so we can see exactly what is going on.

    3) To have the same circles as the other templates, you need to add this:

    .wizard {
    	background: transparent !important;
    	margin-bottom: 35px;
    }
    
    .connecting-line {
        height: 2px;
        background: #e0e0e0;
        position: absolute;
        width: 65%;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 50px;
        z-index: 1;
    }
    
    .wizard .nav-tabs {
    	border: 0 !important;
    }
    
    .wizard li.active:after {
    	display: none !important;
    }
    
    .tabs.tabs-simple-custom .nav-tabs > li {
        width: 33%;
        position: relative;
    }
    
    .wizard .nav-tabs > li a {
        width: 70px;
        height: 70px;
        margin: 20px auto;
        border-radius: 100%;
        padding: 0;
        position: absolute;
        left: 50%;
        margin-left: -25px;
    }

    in reply to: Issues with full width video #10026335
    Support
    Keymaster

    Hello, I’m sorry but I could not duplicate that issue, I tested in a phone but the menu stays at the top when I scroll down.

    Maybe this will solve the problem, which is probable in an a very specific browser/phone model.

    @media (max-width: 991px) {
    	html.sticky-header-active #header .header-body {
    		top: 0 !important;
    	}
    }

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

    Kind Regards,

    Jonas


    in reply to: infinite carousel #10026334
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please make sure you have the loop: true in that carrousel.

    Here’s an example with loop:

    <div class="owl-carousel carousel-center-active-items" data-plugin-carousel data-plugin-options="{'autoplay': false, 'dots': false, 'nav': true, 'loop': true, 'margin': 40, 'responsive': { '0': {'items': 1}, '576': {'items': 1}, '768': {'items': 3}, '992': {'items': 5}, '1200': {'items': 5}}}">

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

    Kind Regards,

    Jonas


    in reply to: Googlemaps is not working #10026333
    Support
    Keymaster

    Hello, in the log you can see this message.

    Google Maps JavaScript API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error

    Please try to generate a new apikey:

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: I need to download old versions #10026332
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Contact form error #10026331
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Cannot load php file on our server #10026329
    Support
    Keymaster

    Hello, it’s not recommended because in some cases the email will net be sent. (If the sender email server blocks that type of operation).
    But right now if you click on reply you will see the sender email in the reply email field.

    Because of this:

    $mail->AddReplyTo($_POST['email'], ' ');

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: Problem with the menu #10026313
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Need help implementing these features, dropzone #10026312
    Support
    Keymaster

    Hello,

    I can see that you are using the wizard but the pages are different, it’s not in the same page that you have all the steps, so I recommend to use tabs to have the behavior you want in those icons. Here’s an example:

    HTML:

    <div class="tabs tabs-bottom tabs-center tabs-simple tabs-simple-custom">
    	<div class="wizard-connecting-line"></div>
    	<ul class="nav nav-tabs">
    		<li class="nav-item active">
    			<a class="nav-link" href="link1.html">
    				<span class="featured-boxes featured-boxes-style-6 p-0 m-0">
    					<span class="featured-box featured-box-primary featured-box-effect-6 p-0 m-0">
    						<span class="box-content p-0 m-0">
    							<i class="icon-featured fas fa-user"></i>
    						</span>
    					</span>
    				</span>
    			</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link" href="link2.html">
    				<span class="featured-boxes featured-boxes-style-6 p-0 m-0">
    					<span class="featured-box featured-box-primary featured-box-effect-6 p-0 m-0">
    						<span class="box-content p-0 m-0">
    							<i class="icon-featured fas fa-file"></i>
    						</span>
    					</span>
    				</span>
    			</a>
    		</li>
    		<li class="nav-item">
    			<a class="nav-link" href="link3.html">
    				<span class="featured-boxes featured-boxes-style-6 p-0 m-0">
    					<span class="featured-box featured-box-primary featured-box-effect-6 p-0 m-0">
    						<span class="box-content p-0 m-0">
    							<i class="icon-featured fab fa-google-plus-g"></i>
    						</span>
    					</span>
    				</span>
    			</a>
    		</li>
    	</ul>
    </div>

    CSS:

    .tabs.tabs-simple-custom .nav-tabs > li .nav-link {
    	border-bottom: 0 !important;	
    	padding: 0 !important;
    }
    
    .tabs.tabs-simple-custom .nav-tabs > li {
    	width: 33%;
    }
    
    .wizard-connecting-line {
        height: 2px;
        background: #e0e0e0;
        position: absolute;
        width: 70%;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 28%;
        z-index: 1;
    }

    It will look like the wizard you have in the first site:


    in reply to: Cannot load php file on our server #10026311
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: How to integrate the contact form on CodeIgniter? #10026309
    Support
    Keymaster

    The file /php/contact-form-recaptcha.php is not returning any response, the result is blank. Do you have access to the log of the site? If possible, send me the content of that file /php/contact-form-recaptcha.php


    in reply to: Issues with full width video #10026308
    Support
    Keymaster

    Hello, try to change the slider to have the same aspect ratio of the video:

    FROM:

    <div class="slider-container light rev_slider_wrapper" style="height: 550px;">
    	<div id="video" class="slider rev_slider" data-version="5.4.7" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 800, 'gridheight': 550}">

    TO:

    <div class="slider-container light rev_slider_wrapper">
    	<div id="video" class="slider rev_slider" data-version="5.4.7" data-plugin-revolution-slider data-plugin-options="{'delay': 9000, 'gridwidth': 1920, 'gridheight': 960}">

    in reply to: Cannot load php file on our server #10026307
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Cannot load php file on our server #10026305
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Cannot load php file on our server #10026302
    Support
    Keymaster

    HTML:
    You must add the value in each checkbox:

    <div class="form-row">
    	<div class="radio-group">
    		<label class="radio-inline"><input type="radio" value="West Clinic" name="clinic" id="west"> West Clinic</label>
    		<label class="radio-inline"><input type="radio" value="East Clinic" name="clinic" id="east"> East Clinic</label> 
    	</div>
    </div>

    PHP:
    * Just change the date to be like this:

    $fields = array(
    	0 => array(
    		'text' => 'Clinic',
    		'val' => ( isset($_POST['clinic']) ) ? $_POST['clinic'] : ''
    	),
    	1 => array(
    		'text' => 'Date',
    		'val' => ( isset($_POST['date']) ) ? $_POST['date'] : ''
    	),
    	2 => array(
    		'text' => 'Time',
    		'val' => ( isset($_POST['time']) ) ? $_POST['time'] : ''
    	),
    	3 => array(
    		'text' => 'Name',
    		'val' => ( isset($_POST['name']) ) ? $_POST['name'] : ''
    	),
    	4 => array(
    		'text' => 'Email',
    		'val' => ( isset($_POST['email']) ) ? $_POST['email'] : ''
    	),
    	5 => array(
    		'text' => 'Number',
    		'val' => ( isset($_POST['number']) ) ? $_POST['number'] : ''
    	)
    );

    in reply to: Problem with the menu #10026294
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: How to integrate the contact form on CodeIgniter? #10026293
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Need help implementing these features, dropzone #10026292
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Media Gallery Problems #10026291
    Support
    Keymaster

    Hello,

    – I can see that you are using big-icons mode, right? In that case you would have just to change the HTML class to:

    <html class="sidebar-left-big-icons">

    And then add this:

    @media only screen and (min-width: 768px) {
    	.content-with-menu-has-toolbar .inner-toolbar {
    		padding-left: 0;
    	}
    }

    The result will be this:

    Best Regards,

    Jonas


    in reply to: Google Map as satellite #10026290
    Support
    Keymaster

    Hello, here’s an example on how to set the map as SATELLITE by default:

    // Map Markers
    var mapMarkers = [{
    	address: "New York, NY 10017",
    	html: "<strong>New York Office</strong><br>New York, NY 10017",
    	icon: {
    		image: "img/pin.png",
    		iconsize: [26, 46],
    		iconanchor: [12, 46]
    	},
    	popup: true
    }];
    
    // Map Initial Location
    var initLatitude = 40.75198;
    var initLongitude = -73.96978;
    
    // Map Extended Settings
    var mapSettings = {
    	controls: {
    		draggable: (($.browser.mobile) ? false : true),
    		panControl: true,
    		zoomControl: true,
    		mapTypeControl: true,
    		scaleControl: true,
    		streetViewControl: true,
    		overviewMapControl: true
    	},
    	scrollwheel: false,
    	markers: mapMarkers,
    	latitude: initLatitude,
    	longitude: initLongitude,
    	zoom: 16,
    	maptype: 'SATELLITE'
    };
    
    var map = $('#googlemaps').gMap(mapSettings);
    
    // Map text-center At
    var mapCenterAt = function(options, e) {
    	e.preventDefault();
    	$('#googlemaps').gMap("centerAt", options);
    }

    I just tested it here and it worked well, so please let me know if the problem persists.

    Kind Regards,

    Jonas


    in reply to: GDPR cookie consent etc #10026289
    Support
    Keymaster

    Hello, sorry but we could not create the tutorial yet, but it’s basically the same as described in this page:
    https://www.jqueryscript.net/other/GDPR-Cookie-Consent-Popup-Plugin.html

    The tutorial is actually already there, created by the author of the plugin.

    I hope that helps.

    Regards,

    Jonas


    in reply to: Cannot load php file on our server #10026288
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: check box change color #10026287
    Support
    Keymaster

    Hello, are you using the latest bootstrap version? BS4?

    If so, you can customize the checkboxes, please look this page:
    https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios-1

    Then you can just add this:

    .custom-checkbox .custom-control-input:checked~.custom-control-label::before {
        background-color: red;
    }

    The result will be this:

    Best Regards,

    Jonas


    Support
    Keymaster

    Hello, it’s basically just missing the “theme” option to initialize the select2 plugin manually the way you want.

    $().select2({
    	theme: 'bootstrap'
    });

    Best Regards,

    Jonas


    in reply to: Convert admin to BS4 #10026285
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Need help implementing these features, dropzone #10026273
    Support
    Keymaster

    Hello,

    You need to change the class from “done” to “completed”:

    Best Regards,

    Jonas


    in reply to: Problem with the menu #10026272
    Support
    Keymaster

    Hello,

    1) It’s probably related to a JS error. Can you confirm that there’s no error in the console log of your browser?

    2) Sorry, but I think I don’t understand that problem, those values are in the the “value” attributes of your fields:

    <input type="text" id="email" name="email" value="bestupload2@gmail.com" size="50" maxlength="255" class="form-control" placeholder="some@example.com">

    You should remove the value option.

    Best Regards,

    Jonas


    in reply to: How to integrate the contact form on CodeIgniter? #10026271
    Support
    Keymaster

    Hi,

    1) OK, but can you please explain how exactly do you want that to look?

    2) Yes, the line number 1 of that file.

    Best Regards,

    Jonas


    in reply to: Cannot load php file on our server #10026267
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Contact form error #10026266
    Support
    Keymaster

    Hello, thanks for your purchase.

    Could you please send us the URL of your site so we can make a few tests?

    Thanks!


    in reply to: Getting an error loading Certain JS files #10026261
    Support
    Keymaster

    That’s very strange because the error is inside Bootstrap script.

    Maybe this can help:

    Are you using the noConflict script? Please check that.


    in reply to: Getting an error loading Certain JS files #10026259
    Support
    Keymaster

    Hi, which line is showing the error? The debug screenshot you sent says line 18, but there’s nothing on line 18.


    in reply to: Getting an error loading Certain JS files #10026257
    Support
    Keymaster

    OK, can you send me the latest generated app.js so I can check it again? (not minified, as you sent earlier)


    in reply to: Getting an error loading Certain JS files #10026249
    Support
    Keymaster

    Hello,

    Those functions are from basic Bootstrap, as you can see in this link:
    https://getbootstrap.com/docs/4.1/components/tooltips/

    If you want to avoid the error you can do this:

    (function($) {
    	if ($.isFunction( $.fn.tooltip )) {
    		$('[data-toggle="tooltip"]').tooltip();
    	}
    	if ($.isFunction( $.fn.popover )) {
    		$('[data-toggle="popover"]').popover();
    	}
    })(jQuery);

    But it’s not recommended, because that will fix the error but tooltips and popover will no work.

    Are you using the same Bootstrap version that is included on EZY? I can see that you added Bootstrap VUE, which can be the problem.


    in reply to: Getting an error loading Certain JS files #10026247
    Support
    Keymaster

    Hello,

    Please try to replace the content of common.js with this: https://pastebin.com/raw/9DwSWpsp (see source)

    Let me know if the problem persists.

    Thanks!


    in reply to: Cannot load php file on our server #10026245
    Support
    Keymaster

    Hello,

    Note that you are using GMAIL, please try to use a email from the same domain.

    Please try to use the following code:

    FROM:

    $mail->SetFrom($email, $name);
    $mail->AddReplyTo($user_email, $name);

    TO:

    $mail->SetFrom($email, ' ');
    $mail->AddReplyTo($user_email, ' ');

    in reply to: How to integrate the contact form on CodeIgniter? #10026244
    Support
    Keymaster

    Hi,

    – Regarding “dark outline”, would it be possible for you to send us a screenshot from that? We could not find the different here comparing both.

    – The form sent, but returned a error message: “Erreur! Une erreur est survenue lors de l’envoi de votre message.” Try to add this at the beginning of PHP file:

    error_reporting(E_ALL ^ E_NOTICE);

    in reply to: Footer & menu #10026243
    Support
    Keymaster

    Hello, thanks for your purchase.

    1) It’s missing the header-btn-collapse-nav button, it must go after the navigation:

    <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
    	<i class="fas fa-bars"></i>
    </button>

    2) To use the boxed mode you cannot use footer-reveal class, so change from:

    <footer id="footer" class="footer-reveal custom-background-color-1 footer-reveal border-top-0 m-0">

    TO:

    <footer id="footer" class="custom-background-color-1 border-top-0 m-0">

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Getting an error loading Certain JS files #10026242
    Support
    Keymaster

    Is there any way to set VUE to not compact (minify) the file in your project? For DEV in that case, and not PRODUCTION. So we can see where the error is.


    in reply to: Parallax #10026241
    Support
    Keymaster

    Hello, you can change the parallax settings for mobile resolution with this:

    @media (min-width: 992px) {
    	.parallax-background {
    		element.style {
    			background-size: cover !important;
    			top: 0px  !important;
    			left: 0px !important;
    			width: 100% !important;
    			height: 125% !important;
    			background-position-x: 10% !important;
    		}
    	}
    }

    Change the values the way you want. Including background-position-x

    Best Regards,

    Jonas


    in reply to: Getting an error loading Certain JS files #10026238
    Support
    Keymaster

    Hello, try to change from vendor/common/common.min.js to vendor/common/common.js (not minified) so we can see where the conflict is. It must be some conflict with jquery or bootstrap vue as well.


    in reply to: Getting an error loading Certain JS files #10026236
    Support
    Keymaster

    Hello, it’s great that you figured it out most of the problems.

    Regarding the $.browser.mobile, that function is on common.js file. That function comes from this: http://detectmobilebrowsers.com/ – So please make sure the common.js file is being loaded and that the order of the file in the page is before theme.js.

    This is the script:

    // jQuery.browser.mobile (http://detectmobilebrowser.com/)
    (function(a){(jQuery.browser=jQuery.browser||{}).mobile=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

    It’s a simple script to check for a mobile device.’

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: How to integrate the contact form on CodeIgniter? #10026226
    Support
    Keymaster

    Hello, I’m sorry to say but Rodrigo had some personal problems and will be off for a few days. I was trying to understand the remaining problem you mentioned but I couldn’t understand.

    Could you please open a new ticket and explain again the problem that you still need to fix?

    Again, sorry about that.

    Thanks,

    Jonas


    in reply to: Getting an error loading Certain JS files #10026225
    Support
    Keymaster

    Hello, sure, PostCSS is installed. Tried for hours to run the project without success.

    But it looks like it’s missing config file (from the project itself).

    “No PostCSS Config found”

    Please try to run the same project that you sent me in a different folder and you will see the errors.

    Unfortunately we could not help in this one.


    in reply to: Parallax height ? #10026223
    Support
    Keymaster

    Hello, for that you can simply add a min-height value in a inner element, example:

    <section class="parallax section section-parallax section-center" data-plugin-parallax data-plugin-options="{'speed': 1.5}" data-image-src="img/parallax-7.jpg">
    	<div class="container">
    		<div class="row justify-content-center">
    			<div class="col-lg-8" style="min-height: 500px;">
    				<h4 class="mb-0 text-dark">Parallax Section</h4>
    				<h5 class="text-dark">(Dark Text)</h5>
    				<p class="mb-0">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. <br>Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.Aenean vulputate eleifend tellus.</p>
    			</div>
    		</div>
    	</div>
    </section>

    Best Regards,

    Jonas


    in reply to: Getting an error loading Certain JS files #10026219
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Steps Background Text #10026217
    Support
    Keymaster

    Hello, sure, add this:

    (css/custom.css)

    .steps .item.active .item-title {
        top: 34%;
        color: #FFF;
        font-size: 2.2em;
        z-index: 1;
    }

    Regards.


    in reply to: Getting an error loading Certain JS files #10026215
    Support
    Keymaster

    Hi,

    I get this errors when I try to run build command with your files:


    in reply to: Steps Background Text #10026213
    Support
    Keymaster

    Hello, sure, you can change that.

    For example:

    (css/custom.css)

    .section.section-text-overlay .text-background {
    	bottom: 80px !important;
    }

    It will change the bottom text.

    You can also change the numbers with this css:

    (css/custom.css)

    .steps .item .item-title span {
        top: -56px;
        font-size: 4.5rem;
    }

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

    Kind Regards,

    Okler Themes


    in reply to: Is there a form with steps? #10026212
    Support
    Keymaster

    Hello, thanks for the message.

    At the moment EZY does not have a form wizard plugin integrated with the files, but you can find some plugins (Bootstrap) to do that.

    Example: http://vinceg.github.io/twitter-bootstrap-wizard/#demo

    Best Regards,

    Okler Themes


    in reply to: Getting an error loading Certain JS files #10026211
    Support
    Keymaster

    Hello,

    OK, thanks for the message.

    We will make some tests with VUE and let you know as soon as possible.

    Please note that our template support does not include third party software and plug-ins but in that case we will check that for you and find out if it’s related to template files, which is probably not because it works without VUE.

    Regards.


    in reply to: GDPR cookie consent etc #10026210
    Support
    Keymaster

    Hello,

    We will make a few tests and create a item in our FAQ about the cookie consent plugin.

    That will be available soon.

    Kind Regards,

    Jonas


    in reply to: Custom error page – 20 errors? #10026209
    Support
    Keymaster

    Hello, thanks for your suggestion.

    We might add a error page (similar to the 404 one) but with a error list in a future update.

    Kind Regards,

    Jonas


    in reply to: Tooltips not working in Modals #10026191
    Support
    Keymaster

    Hello, please try this:

    HTML:

    <a class="modal-with-form btn btn-default" href="#modalForm">Open Form</a>
    
    <!-- Modal Form -->
    <div id="modalForm" class="modal-block modal-block-primary mfp-hide">
    	<section class="card">
    		<header class="card-header">
    			<h2 class="card-title">Registration Form</h2>
    		</header>
    		<div class="card-body">
    			<form>
    				<div class="form-row">
    					<div class="form-group col-md-12">
    						<label for="inputEmail4">Email</label>
    						<i class="fa fa-question-circle" data-toggle="tooltip" data-original-title="Searches for anything that 'contains' your search term'"></i>
    						<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    					</div>
    				</div>
    			</form>
    		</div>
    		<footer class="card-footer">
    			<div class="row">
    				<div class="col-md-12 text-right">
    					<button class="btn btn-primary modal-confirm">Submit</button>
    					<button class="btn btn-default modal-dismiss">Cancel</button>
    				</div>
    			</div>
    		</footer>
    	</section>
    </div>

    Result should be this:

    Thanks.


    in reply to: Tooltips not working in Modals #10026189
    Support
    Keymaster

    Hello, I just made a quick testing using this;

    CSS:

    .tooltip {
    	z-index: 1000000;
    }

    HTML:

    <a class="modal-with-form btn btn-default" href="#modalForm">Open Form</a>
    
    <!-- Modal Form -->
    <div id="modalForm" class="modal-block modal-block-primary mfp-hide">
    	<section class="card">
    		<header class="card-header">
    			<h2 class="card-title">Registration Form</h2>
    		</header>
    		<div class="card-body">
    			<form>
    				<div class="form-row">
    					<div class="form-group col-md-12">
    						<label for="inputEmail4">Email</label>
    						<a data-toggle="tooltip" title="Tooltip Link" href="#">Link</a>
    						<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    					</div>
    				</div>
    			</form>
    		</div>
    		<footer class="card-footer">
    			<div class="row">
    				<div class="col-md-12 text-right">
    					<button class="btn btn-primary modal-confirm">Submit</button>
    					<button class="btn btn-default modal-dismiss">Cancel</button>
    				</div>
    			</div>
    		</footer>
    	</section>
    </div>

    And this is the result:

    Can you please confirm that you are doing the same thing with the HTML and CSS?

    Thanks.


    in reply to: navbar breakpoint #10026188
    Support
    Keymaster

    Hello, I’m sorry but unfortunately it’s not possible, because the navigation is based on Bootstrap breakpoints (the collapse class).

    To do that you would have to create a custom BS version, changing the variables:
    https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

    It may cause conflict with another elements.

    Kind Regards,

    Jonas


    in reply to: Tooltips not working in Modals #10026186
    Support
    Keymaster

    Hello,

    Looks like the problem is related to z-index.

    Please try to add this:

    (css/custom.css)

    .tooltip {
    	z-index: 1000000;
    }

    Let me know if the problem persists

    Kind Regards,

    Jonas


    in reply to: Getting an error loading Certain JS files #10026184
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Getting an error loading Certain JS files #10026182
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Getting an error loading Certain JS files #10026179
    Support
    Keymaster

    Can you send us the HTML too? So we can see which files are being included.


    in reply to: Getting an error loading Certain JS files #10026173
    Support
    Keymaster

    Hello, can you please send us the generated JS file so we can make some tests? We could not reproduce that problem here with the same files (If possible send the file not minified). Looks like Vue is not generating the file correctly.


    in reply to: contact form php not working #10026146
    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: contact form php not working #10026144
    Support
    Keymaster

    Looks like it’s trying to call a different file: wordfence-waf.php – Can it be a plugin or something that you may added in the htaccess file?


    in reply to: contact form php not working #10026141
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: RTL – Skin Switcher #10026127
    Support
    Keymaster

    Please check our FAQs for more information:


    in reply to: RTL – Skin Switcher #10026126
    Support
    Keymaster

    Also, if you want to enable DARK mode:


    in reply to: RTL – Skin Switcher #10026125
    Support
    Keymaster

    Hello, the style switcher is not meant to be used online in a website, it’s used just to generate a skin:

    But if you want to enable it:

    To activate the Style Switcher you need to include the JS file:

    <script src="master/style-switcher/style.switcher.js" id="styleSwitcherScript" data-skin-src=""></script>

    * Make sure you added the JS file exactly in that order.

    Note that you cannot open the file directly on the browser, you need a local server (localhost) or upload to the remote server via FTP.


    in reply to: Convert admin to BS4 #10026109
    Support
    Keymaster

    Hello, thanks for your purchases.

    1. You can check all the changes that were done by the Bootstrap team in this link: https://getbootstrap.com/docs/4.0/migration/ – Note that they have changed several things.

    The differences, mainly in the grid system are explained in this link:
    https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm

    Unfortunately there’s no easy way to update the theme other than doing it manually, updating all the vendor folders with the latest version of all plugins, update the JS and CSS files that come with the theme (theme.js, theme.init.js, theme.css, etc…) and then update the HTML itself, comparing the new classes and changing them.

    We recommend to use a “compare tool”, like this one: http://kdiff3.sourceforge.net/ – and use it to compare the folders (your current website and the new version).

    2. Sure, you can access the BS3 version in this link: http://preview.oklerthemes.com/porto-admin/1.7.0/

    Kind Regards,

    Jonas


    in reply to: Open an Iframe in a modal popup? #10026106
    Support
    Keymaster

    Hello, please check below the responsive table with the classes you need to use to show the elements depending on the resolution:

    Screen Size Class
    Hidden on all d-none
    Hidden only on xs d-none d-sm-block
    Hidden only on sm d-sm-none d-md-block
    Hidden only on md d-md-none d-lg-block
    Hidden only on lg d-lg-none d-xl-block
    Hidden only on xl d-xl-none
    Visible on all d-block
    Visible only on xs d-block d-sm-none
    Visible only on sm d-none d-sm-block d-md-none
    Visible only on md d-none d-md-block d-lg-none
    Visible only on lg d-none d-lg-block d-xl-none
    Visible only on xl d-none d-xl-block

    And here’s the table with the breakpoints:

    Extra small
    <576px
    Small
    ≥576px
    Medium
    ≥768px
    Large
    ≥992px
    Extra large
    ≥1200px
    Max container width None (auto) 540px 720px 960px 1140px
    Class prefix col- col-sm- col-md- col-lg- col-xl-
    # of columns 12
    Gutter width 30px (15px on each side of a column)
    Nestable Yes
    Column ordering Yes

    • This reply was modified 1 year, 6 months ago by  Support.
    • This reply was modified 1 year, 6 months ago by  Support.
    in reply to: Open an Iframe in a modal popup? #10026079
    Support
    Keymaster

    Hello, to open an iframe in a popup here’s what you can do:

    HTML:

    <a class="popup-iframe" href="http://www.okler.net">Open Iframe Popup</a>

    JS:

    $(document).ready(function() {
    	$('.popup-iframe').magnificPopup({
    		disableOn: 700,
    		type: 'iframe',
    		mainClass: 'mfp-fade',
    		removalDelay: 160,
    		preloader: false,
    		fixedContentPos: false
    	});
    });

    Regards.


    Support
    Keymaster

    Hello.

    Great, let us know if you find anything else that needs to be fixed.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, can you please send us a screenshot from what you are seeing? We could not reproduce that problem here.


    in reply to: Google custom search – search button #10026035
    Support
    Keymaster

    Hello,

    You can customize that using this css:

    .gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
        border: 0 !important;
        background: #111 !important;
        position: absolute !important;
        top: 0px !important;
        right: 13px !important;
        width: 40px !important;
        height: 34px !important;
        padding: 0 !important;
        line-height: 47px !important;
        border-radius: 0 40px 40px 0 !important;
    }
    
    td.gsc-search-button {
    	position: relative !important;
    }

    Kind Regards,

    Jonas


    in reply to: Work Process Steps – Change color #10026033
    Support
    Keymaster

    Hello, thanks for your purchase.

    To change the colors you can add this css:

    .steps .dots .dots-color-dark {
    	background: #00B259 !important;
    }
    
    html .steps-primary .dots .dots-color {
    	background: #D90000 !important;
    }

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

    Regards.


    in reply to: Youtube Lightbox does not work anymore #10026016
    Support
    Keymaster

    Hello, I just tested both links and it worked well.

    Which browser version are you using? It may be new chrome settings for autoplay on videos.

    I just tested it here on Version 66.0.3359.139 and it worked well for me.

    Best Regards,

    Jonas


    in reply to: WordPress #10026015
    Support
    Keymaster

    Hello,

    As you can see, the WordPress version was created by another author (p-themes), and unfortunately they do not provide a version without woocommerce at the moment, I’m sorry about that.

    Best Regards,

    Jonas


    in reply to: WordPress #10025996
    Support
    Keymaster

    Hello, thanks for your purchase.

    Porto WordPress is also available on ThemeForest. Here’s the link: http://themeforest.net/item/porto-responsive-wordpress-woocommerce-theme/9207399

    If you purchase the WordPress version we can approve the refund for the HTML version.

    All support related to payment and refund is run through Envato’s ticket service:
    http://themeforest.net/refund_requests/new

    In the refund request details please send us the purchase code from your purchase of Porto WordPress version.

    Kind Regards,

    Okler Themes


    in reply to: dropdown menu toggle / image gallery #10025983
    Support
    Keymaster

    Hello and thank you so much for your purchases 🙂

    1) Get the Bootstrap css for your Porto version here: http://preview.oklerthemes.com/porto/4.7.0/vendor/bootstrap/css/bootstrap.min.css – And replace that. To make it work with the HTML code that you are using you need that Bootstrap version.

    2) I think that’s the problem actually. Some of the files were updated and the other ones are from Porto 4.7.0, which is causing a conflict. You can update all the files and compare the HTML with the latest version (Porto 6) or use the vendor files from Porto 4.7. If you want to get the files from 4.7 version you can just access the URLs, for example: http://preview.oklerthemes.com/porto/4.7.0/vendor/jquery/jquery.min.js

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

    Kind Regards,

    Jonas


    in reply to: datatables not displaying correctly #10025980
    Support
    Keymaster

    Hello, I just checked the code and looks like this js file:

    <script src="/community/assets/js/theme.js"></script>

    Is before all the vendors javascripts, and it must go after the vendors. Please review the file order in the HTML.

    Kind Regards,

    Jonas


    in reply to: datatables not displaying correctly #10025968
    Support
    Keymaster

    Hello, to avoid that problem please try to add this:

    (css/custom.css)

    .dataTables_wrapper .dataTables_filter label {
        width: auto;
    }
    
    div.dataTables_wrapper div.dataTables_filter input {
    	max-width: 70%;
    }

    Kind Regards,

    Jonas


    in reply to: Mobile version #10025967
    Support
    Keymaster

    Hello, in that case you would have to cut the slider height (not making it full-height as it is now) it would make a blank space in the bottom but the aspect ratio of the image would be better. Please let me know if it’s what you’re looking for or you want any other solution.


    in reply to: Help with logo in header #10025966
    Support
    Keymaster

    Hello, sure, you can use different logos and links for desktop and mobile resolutions.

    Here’s an example:

    HTML:

    <a href="index.html" class="logo-desktop">
    		<img alt="Porto" width="111" height="54" data-sticky-width="82" data-sticky-height="40" data-sticky-top="33" src="img/logo.png">
    	</a>
    	<a href="index.html" class="logo-mobile">
    		<img alt="Porto" width="111" height="54" data-sticky-width="82" data-sticky-height="40" data-sticky-top="33" src="img/logo.png">
    	</a>

    (css/custom.css)

    .logo-desktop {
    	display: block;
    }
    
    .logo-mobile {
    	display: none;
    }
    
    @media (max-width: 991px) {
    	.logo-desktop {
    		display: none;
    	}
    
    	.logo-mobile {
    		display: block;
    	}
    }

    Note that the second image can be different.

    Kind Regards,

    Jonas


    in reply to: Links in footer not readable once clicked #10025965
    Support
    Keymaster

    Hello, I’m sorry but we could not reproduce that issue, it stays blue even when clicked. Can you send more details?

    Kind Regards,

    Jonas


    in reply to: Slider auto rotate #10025951
    Support
    Keymaster

    Hello,

    Just change from:

    <div class="owl-carousel owl-theme show-nav-hover mt-0" data-plugin-options="{'items': 1, 'margin': 10, 'stagePadding': 5, 'loop': true, 'nav': true, 'animateOut': 'fadeOut'}">

    TO:

    <div class="owl-carousel owl-theme show-nav-hover mt-0" data-plugin-options="{'items': 1, 'margin': 10, 'stagePadding': 5, 'loop': true, 'nav': true, 'animateOut': 'fadeOut', "autoplay": true, "autoplayTimeout": 3000}">

    Kind Regards,

    Jonas


    in reply to: portfolio Load More #10025950
    Support
    Keymaster

    Hello, thanks for your purchase.

    – That’s right, the portfolio items comes from AJAX, therefore due to local security restrictions, some things will not work locally, especially in Chrome. But everything will work once the files have been uploaded to your website/server (or localserver LOCALHOST).

    – The load more calls for the files in the ajax folder, for example: portfolio-ajax-load-more-2.html

    – The JS function that does that can be found at js/examples/examples.portfolio.js

    Kind Regards,

    Jonas

    Hola, gracias por tu compra.

    – Así es, los elementos del portafolio provienen de AJAX, por lo tanto, debido a restricciones de seguridad locales, algunas cosas no funcionarán localmente, especialmente en Chrome. Pero todo funcionará una vez que los archivos se hayan cargado en su sitio web / servidor (o locallserver LOCALHOST).

    – La carga de más llamadas para los archivos en la carpeta ajax, por ejemplo: portfolio-ajax-load-more-2.html

    – La función JS que hace eso se puede encontrar en js / examples / examples.portfolio.js

    Saludos cordiales,

    Jonas


    in reply to: Popover #10025949
    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: Adding Calendar Page #10025948
    Support
    Keymaster

    Hello, thanks for your purchase.

    You can find all the instructions on how to integrate both templates in this topic: http://www.okler.net/forums/topic/how-to-integrate-porto-admin-extension-on-porto/

    – Please note that the calendar is specific for the admin and is not part of the integration, but also note that the calendar is based in this plugin: https://fullcalendar.io/ – You just need to add the JS and CSS files and initialize the calendar as their docs: https://fullcalendar.io/docs/installation and view-source:https://fullcalendar.io/releases/fullcalendar/3.9.0/demos/basic-views.html

    Kind Regards,

    Jonas


    in reply to: Portlet – event onMoved #10025946
    Support
    Keymaster

    Hello, you can see the “onUpdate” callback on file theme.js (line 2793).

    Best Regards,

    Jonas


    in reply to: Portlet – limit moving options #10025945
    Support
    Keymaster

    Hello,

    – To call the porlet init function after you finish adding the portlets you need to add this:

    // Portlets
    (function($) {
    
    	'use strict';
    
    	$(function() {
    		$('[data-plugin-portlet]').each(function() {
    			var $this = $( this ),
    				opts = {};
    
    			var pluginOptions = $this.data('plugin-options');
    			if (pluginOptions)
    				opts = pluginOptions;
    
    			$this.themePluginPortlet(opts);
    		});
    	});
    
    }).apply(this, [jQuery]);

    – It will resolve both problems.

    – You can also remove the events and start the portlets again by adding this:

    $('[data-plugin-portlet]').off()

    Best Regards,

    Jonas


    in reply to: Need to increase the logo size #10025944
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please note that you need to all the options in the IMG element:

    <img alt="Porto" width="111" height="54" data-sticky-width="82" data-sticky-height="40" data-sticky-top="33" src="img/logo.png">

    – width and height of the image
    – data-sticky-width and data-sticky-height are the size of the image when the header sticky is active.
    – data-sticky-top is the “top” in pixels set for the image when the header sticky is active.

    It actually depends on the header style you are using. Are you using the default header?

    Kind Regards,

    Jonas


    in reply to: Conflicts with the Porto CSS and another CSS file #10025913
    Support
    Keymaster

    Hello, thank you so much for your purchases and reviews on ThemeForest item page.

    Page builder is in our list for future updates, but unfortunately we still don’t have a release date for it yet.

    Best Regards,

    Jonas


    in reply to: Error page from 403 to 505? #10025911
    Support
    Keymaster

    Hello, thanks for the suggestion, we will add those pages.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, we are working on Porto and Porto admin and we want to update the admin in the next 15 days.

    Kind Regards,

    Jonas


    in reply to: CSS Helper Classes Not Working? #10025884
    Support
    Keymaster

    Hello, can you confirm which version you’re using?

    Please check theme.css file and see the version.

    Kind Regards,

    Jonas


    in reply to: photographylightbox #10025872
    Support
    Keymaster

    Hello, oh, OK, I think I get it now.

    The problem is that you can’t have multiple galleries with the thumbs at the bottom in the same page, but you can use the simple lightbox to do so. Here’s an example:

    HTML code:
    https://pastebin.com/raw/WymRTgix

    JS:
    (js/custom.js)

    $('.custom-gallery').each(function() { // the containers for all your galleries
        $(this).magnificPopup({
            delegate: 'a', // the selector for gallery item
            type: 'image',
            gallery: {
              enabled:true
            }
        });
    });

    Hope that helps.

    Kind Regards,

    Jonas


    in reply to: Portlet – limit moving options #10025869
    Support
    Keymaster

    Hello, just remove the data-portlet-item from the items that you want to be fixed.

    Example:
    FROM:

    <section class="card card-primary" id="card-1" data-portlet-item>

    TO

    <section class="card card-primary" id="card-1">

    Best Regards,

    Jonas


    in reply to: my logo dont appear to be clear on my website #10025807
    Support
    Keymaster

    Hello,

    The logo file must be exactly the double size that the one you want to show. So, if the logo is set with width=”100″ height=”50″ the size of the image must be 200×100.

    Please try that and let me know if the problem persists, if so, please send us the URL of you site so we can check that too.

    Kind Regards,

    Jonas


    in reply to: photographylightbox #10025806
    Support
    Keymaster

    Hello,

    Makes sense now, thanks.

    In that case you would have to create different galleries with different IDs:

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

    Kind Regards,

    Jonas


    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Modal Form #10025804
    Support
    Keymaster

    Hello,

    Please note that our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs. Please consider that for the next questions.

    Here’s a quick help on how you could do that with JS:

    HTML: – Add a class in each button and add the data-subject attribute.

    <button class="btn btn-primary custom-form-button" data-subject="The Subject" data-toggle="modal" data-target="#formModal"><i class="far fa-question-circle"></i></button>

    JS: – JS to change the form subject

    $('.custom-form-button').on('click', function() {
    
    	var subject = $(this).attr('data-subject');
    
    	$( "input[name*='subject']" ).val( subject );
    
    });

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello,

    – The problems you mentioned is in fact happening in current version and will be fixed on the next version of Porto Admin .

    – The complete guide for integrate both themes without conflicts can be found in this topic: http://www.okler.net/forums/topic/how-to-integrate-porto-admin-extension-on-porto/

    Kind Regards,

    Jonas


    in reply to: photographylightbox #10025801
    Support
    Keymaster

    Hello, I’m sorry but I’m a little confused about your question, could you please send me more details?

    Kind Regards,

    Jonas


    in reply to: Problem when using sidebar-left-big-icons #10025800
    Support
    Keymaster

    Hello, that’s right, the sidebar-left-big-icons does not work with the fixed class, but if you want to use both, just add this css:

    @media only screen and (min-width: 768px) {
    	html.fixed.sidebar-left-big-icons .content-body {
    		margin-left: 150px;
    	}
    
    	html.fixed.sidebar-left-big-icons .page-header {
    		left: 150px;
    	}
    }

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

    Kind Regards,

    Jonas


    in reply to: basic Contact Form #10025798
    Support
    Keymaster

    Hello, please note that in the file js/views/view.contact.js the ID of the form is different from the one you have in the lightbox, so to validate and use the ajax function on your form add the following JS code:

    (function($) {
    
    	'use strict';
    
    	/*
    	Contact Form: Basic
    	*/
    	$('#demo-form').validate({
    		submitHandler: function(form) {
    
    			var $form = $(form),
    				$messageSuccess = $('#contactSuccess'),
    				$messageError = $('#contactError'),
    				$submitButton = $(this.submitButton),
    				$errorMessage = $('#mailErrorMessage'),
    				submitButtonText = $submitButton.val();
    
    			$submitButton.val( $submitButton.data('loading-text') ? $submitButton.data('loading-text') : 'Loading...' ).attr('disabled', true);
    
    			// Ajax Submit
    			$.ajax({
    				type: 'POST',
    				url: $form.attr('action'),
    				data: {
    					name: $form.find('#name').val(),
    					email: $form.find('#email').val(),
    					subject: $form.find('#subject').val(),
    					phone: $form.find('#phone').val(),
    					message: $form.find('#message').val()
    				}
    			}).always(function(data, textStatus, jqXHR) {
    
    				$errorMessage.empty().hide();
    
    				if (data.response == 'success') {
    
    					$messageSuccess.removeClass('d-none');
    					$messageError.addClass('d-none');
    
    					// Reset Form
    					$form.find('.form-control')
    						.val('')
    						.blur()
    						.parent()
    						.removeClass('has-success')
    						.removeClass('has-danger')
    						.find('label.error')
    						.remove();
    
    					if (($messageSuccess.offset().top - 80) < $(window).scrollTop()) {
    						$('html, body').animate({
    							scrollTop: $messageSuccess.offset().top - 80
    						}, 300);
    					}
    
    					$form.find('.form-control').removeClass('error');
    
    					$submitButton.val( submitButtonText ).attr('disabled', false);
    					
    					return;
    
    				} else if (data.response == 'error' && typeof data.errorMessage !== 'undefined') {
    					$errorMessage.html(data.errorMessage).show();
    				} else {
    					$errorMessage.html(data.responseText).show();
    				}
    
    				$messageError.removeClass('d-none');
    				$messageSuccess.addClass('d-none');
    
    				if (($messageError.offset().top - 80) < $(window).scrollTop()) {
    					$('html, body').animate({
    						scrollTop: $messageError.offset().top - 80
    					}, 300);
    				}
    
    				$form.find('.has-success')
    					.removeClass('has-success');
    					
    				$submitButton.val( submitButtonText ).attr('disabled', false);
    
    			});
    		}
    	});
    
    }).apply(this, [jQuery]);

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

    Kind Regards,

    Jonas


    in reply to: Sticky Elements in Admin Template #10025797
    Support
    Keymaster

    Hello,

    Unfortunately Porto Admin does not have the Sticky Elements plugin yet but if you want to include that in your project please check the instructions from this page: http://webpop.github.io/jquery.pin/

    Porto Sticky elements is based in that plugin, so for Porto Admin you would have to include that.

    Best Regards,

    Jonas


    in reply to: Email page reporting error #10025796
    Support
    Keymaster

    Hello, I just made a quick test and the problem is that the debug mode is activated in the php file.

    Please open the contact-form.php file and change the debug to 0 and try again.

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

    Kind Regards,

    Jonas


    in reply to: Latest projects pop up on owl carousel #10025784
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please try to add the following JS lines:

    (js/custom.js)

    $(document).on('click', 'a[data-portfolio-close]', function(e) {
    	e.preventDefault();
    	$.magnificPopup.instance.close();
    	return false;
    });
    
    $(document).on('click', 'a[data-portfolio-prev]', function(e) {
    	e.preventDefault();
    	$.magnificPopup.instance.prev();
    	return false;
    });
    
    $(document).on('click', 'a[data-portfolio-next]', function(e) {
    	e.preventDefault();
    	$.magnificPopup.instance.next();
    	return false;
    });

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

    Kind Regards,

    Jonas


    in reply to: Style Switcher side bar not showing #10025783
    Support
    Keymaster

    Hello, thanks for your purchase.

    That’s right, you can enable the style switcher using the instructions on that topic.

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

    Kind Regards,

    Jonas


    in reply to: Line Chart with datetimespamp #10025759
    Support
    Keymaster

    Hello, thanks for your purchase.

    * To show chart with time/dates you need to include this JS file:

    <script src="vendor/flot/jquery.flot.time.js"></script>

    Here’s and example:

    (function() {
    	if( $('#flotBasicDataNew').get(0) ) {
    		var plot = $.plot('#flotBasicDataNew', flotBasicData, {
    			xaxis: { mode: "time" }
    		});
    	}
    })();

    Dates must be parsed like this:

    var flotBasicData = [{
    	data: [
    		[-373597200000, 315.71],
    		[-370918800000, 317.45],
    		[-368326800000, 317.50]
    	],
    	label: "Series 1",
    	color: "#0088cc"
    }];

    * https://stackoverflow.com/questions/38701847/how-can-i-convert-a-date-into-an-integer

    Kind Regards,

    Jonas


    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Portfolio Carousels Slider #10025757
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please open the file js/examples/examples.portfolio.js and change those values:

    Kind Regards,

    Jonas


    in reply to: Contact form #10025361
    Support
    Keymaster

    Hello, please try to remove the “required” attribute and let the jQuery Validator validate the field, for example:

    <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name">

    Please try that and let us know if the problem persists.

    Kind Regards,

    Jonas


    in reply to: Help im PHP Form #10025360
    Support
    Keymaster

    Hello, you must encode the HTML code.

    Here’s an tool for encoding the HTML:
    https://opinionatedgeek.com/Codecs/HtmlEncoder

    Best Regards,

    Jonas


    in reply to: section parallax #10025359
    Support
    Keymaster

    Hello, this is the code you need:

    <section class="section section-background section-center" style="background-image: url(img/parallax-7.jpg); min-height: 260px; background-attachment: fixed;">
    	<div class="container">
    		<div class="row justify-content-center">
    			<div class="col-lg-8">
    				Test
    			</div>
    		</div>
    	</div>
    </section>

    Kind Regards,

    Jonas


    in reply to: porto construction template 6.1error #10025327
    Support
    Keymaster

    Hello, sure, you just need to add the following css:

    (css/custom.css)

    html.sticky-header-active #header.header-semi-transparent-light .header-body:before {
        opacity: 1 !important;
    }

    Please, let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Header height #10025306
    Support
    Keymaster

    Hello, thanks for your purchase.

    Can you please say which header style are you using? Porto comes with several header types and the css is different for them.

    Kind Regards,

    Jonas


    in reply to: How to change the hover-icon in a lightbox element. #10025305
    Support
    Keymaster

    Hello, this is the CSS you need:

    (css/custom.css)

    .img-thumbnail.img-thumbnail-hover-icon::after {
    	content: "\f00e" !important;
    }

    Cheatsheet:
    https://fontawesome.com/cheatsheet

    Kind Regards,

    Jonas


    in reply to: Carousal missing border #10025304
    Support
    Keymaster

    Hello, thanks for your purchase.

    Could you please send us the URL of your site so we can understand it better. We weren’t able to reproduce that issue here.

    Kind Regards,

    Jonas


    in reply to: the version 5.7.2 and the version 1.7.0 #10025167
    Support
    Keymaster

    Hello,

    OK, I sent it to the other email you provided.

    Please let us know if it worked.


    in reply to: the version 5.7.2 and the version 1.7.0 #10025162
    Support
    Keymaster

    Hello, we’ve tried to send you the email with the old files but the email is returning:

    Your message did not reach some or all of the intended recipients.

    Subject: RE: [ThemeForest] Message sent via your Envato Market profile from shiru_tx
    Sent: 16/03/2018 08:56

    The following recipient(s) cannot be reached:

    ‘shiru_tx@163.com’ on 16/03/2018 08:56
    503 valid RCPT command must precede DATA

    Can you please confirm your email address or send us a new email? shiru_tx@163.com is not working here.


    in reply to: submenus in mobile doesn't appear #10025104
    Support
    Keymaster

    Hello, thanks for your purchase.

    I’m sorry but we could not see that problem here, this is what it looks on mobile for us:

    Can you please describe how to duplicate that issue?

    Kind Regards,

    Jonas


    in reply to: errorClass and Focus #10025100
    Support
    Keymaster

    Hello,

    – If you are using jQuery validator:

    $( "#theInputID" ).removeClass('error');

    – If you are using Bootstrap Validation method: ( https://getbootstrap.com/docs/4.0/components/forms/#validation ) – You will see it uses css :invalid to add that border, so to avoid that you can’t just remove a class from the input, you need to remove the class from the parent form:

    $( "#theInputID" ).parents('form').removeClass('was-validated');

    in reply to: Version 1.7.0 #10025099
    Support
    Keymaster

    Hello, can you please go to my profile page and send me a message? So we can help you with the old files, replying the email.
    http://themeforest.net/user/Okler#contact (just send a quick message).

    Kind Regards,

    Jonas


    in reply to: Version 5.7.2 #10025098
    Support
    Keymaster

    Hello, can you please go to my profile page and send me a message? So we can help you with the old files, replying the email.
    http://themeforest.net/user/Okler#contact (just send a quick message).

    Kind Regards,

    Jonas


    in reply to: Instagram Carousel #10025091
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: errorClass and Focus #10025089
    Support
    Keymaster

    Hello,

    1) Here’s a working test:

    HTML:

    <input id="theInputID" type="text" class="form-control" />
    
    <button id="setFocus" class="btn btn-default">Set Focus</button>

    JS:

    $('#setFocus').on('click', function() {
    	$( '#theInputID' ).focus();
    });

    2) $( "#theInputID" ).removeClass('error');


    • This reply was modified 1 year, 9 months ago by  Support.
    in reply to: errorClass and Focus #10025083
    Support
    Keymaster

    Hello,

    1) Sorry, I don’t understand the question.

    2) $( "#theInputID" ).focus();

    Best Regards,

    Jonas


    in reply to: CARROUSEL #10025082
    Support
    Keymaster

    Hello, OK, please try this:

    <div class="image-gallery sort-destination full-width">
    	<div class="isotope-item">
    		<div class="image-gallery-item">
    			<a href="portfolio-single-small-slider.html">
    				<img src="img/projects/project.jpg" class="img-fluid grayscale-hover" alt="">
    			</a>
    		</div>
    	</div>
    	<div class="isotope-item">
    		<div class="image-gallery-item">
    			<a href="portfolio-single-small-slider.html">
    				<img src="img/projects/project.jpg" class="img-fluid grayscale-hover" alt="">
    			</a>
    		</div>
    	</div>
    	<div class="isotope-item">
    		<div class="image-gallery-item">
    			<a href="portfolio-single-small-slider.html">
    				<img src="img/projects/project.jpg" class="img-fluid grayscale-hover" alt="">
    			</a>
    		</div>
    	</div>
    	<div class="isotope-item">
    		<div class="image-gallery-item">
    			<a href="portfolio-single-small-slider.html">
    				<img src="img/projects/project.jpg" class="img-fluid grayscale-hover" alt="">
    			</a>
    		</div>
    	</div>
    	<div class="isotope-item">
    		<div class="image-gallery-item">
    			<a href="portfolio-single-small-slider.html">
    				<img src="img/projects/project.jpg" class="img-fluid grayscale-hover" alt="">
    			</a>
    		</div>
    	</div>
    </div>

    CSS:
    (css/custom.css)

    img.grayscale-hover {
    	filter: gray;
    	-webkit-filter: grayscale(1);
    }
    
    img.grayscale-hover:hover {
    	filter: none;
    	-webkit-filter: none;
    }

    Best Regards,

    Jonas


    in reply to: Modal with scroll bar #10025081
    Support
    Keymaster

    Hello,

    Please try to change to:

    <div style="max-height: 300px; overflow: auto;">

    in reply to: Popup-YouTube in Lightbox #10025080
    Support
    Keymaster

    Hello, please try this:

    HTML:

    <a class="popup-youtube-2 mfp-iframe" href="https://www.youtube.com/watch?v=83UHRghhars">Click here</a>

    JS:

    $('.popup-youtube-2').magnificPopup({
    	iframe: {
    	  markup: '<div class="mfp-iframe-scaler">'+
    		'<div class="mfp-close"></div>'+
    		'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
    		'</div>',
    	  patterns: {
    		youtube: {
    		  index: 'youtube.com/',
    		  id: 'v=',
    		  src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0&showinfo=0'
    		}
    	  }
    	}
    });

    Best Regards,

    Jonas


    in reply to: Iframe and modal #10025079
    Support
    Keymaster

    Hello, because the server is blocking.
    You need to contact the server administrator for that.

    It’s not related to the template files.

    Best Regards,

    Jonas


    in reply to: horizontal scrolling on mobile devices #10025071
    Support
    Keymaster

    Hello, a few thing to try:

    – Change the viewport to:

    FROM:

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

    To:

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    Or try this css:

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    Best Regards,

    Jonas


    in reply to: Modal Slideout like Style Switcher #10025070
    Support
    Keymaster

    Hello, unfortunately it would be too complicated to separate that part of the code from the Style Switcher, but you can find some nice scripts that do the same thing, for example:

    Best Regards,

    Jonas


    Support
    Keymaster

    Hello, now it looks like the server is blocking the SMTP attempt to send the email.

    Please make sure you enter the correct authentication settings:

    (You may contact the server administrator to make sure you are using the right HOTS/USER/PASS AND PORT)

    Best Regards,

    Jonas


    Support
    Keymaster
    This reply has been marked as private.
    in reply to: CARROUSEL #10025066
    Support
    Keymaster

    Hello, you need to change the container class to container-fluid.

    FROM:

    <section id="sponsors" class="section-center pb-2 pt-4">
    	<div class="container pb-4 pt-4 mt-4">

    TO:

    <section id="sponsors" class="section-center pb-2 pt-4">
    	<div class="container-fluid pb-4 pt-4 mt-4">

    Best Regards,

    Jonas


    in reply to: Iframe and modal #10025065
    Support
    Keymaster
    This reply has been marked as private.
    Support
    Keymaster

    Hello, thanks for your purchase.

    Here’s the fix for that button:

    Change the HTML code of it to:

    <a class="btn btn-block btn-primary btn-md pt-2 pb-2 text-3 mg-upload-files" href="#">
    	<i class="fa fa-upload mr-1"></i>
    	Upload Files
    </a>

    ADD this JS (custom.js):

    $('.mg-upload-files').off().on('click', function(e) {
    	e.stopPropagation();
    });

    Now you can add any upload script you want with that button.

    Kind Regards,

    Jonas


    in reply to: Modal with scroll bar #10025056
    Support
    Keymaster

    Hello, please check the code below:

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#defaultModal">
    	Launch Default Modal
    </button>
    
    <div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4>
    				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    			</div>
    			<div class="modal-body">
    				<div style="max-height: 300px; overflow-y: auto;">
    					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
    					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
    					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
    					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
    					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
    				</div>
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
    			</div>
    		</div>
    	</div>
    </div>

    Best Regards,

    Jonas


    in reply to: Modal Slideout like Style Switcher #10025055
    Support
    Keymaster

    Hello, please check this file: shortcodes-sticky-elements.html – You will see how to make sticky elements.

    Best Regards,

    Jonas


    in reply to: Iframe and modal #10025054
    Support
    Keymaster

    Code of the site that you want to open inside the iframe. To unblock it.


    in reply to: Saving Editable Ajax table #10025053
    Support
    Keymaster

    Hello, you basically need to do an ajax call in each function, please take a look at this screenshot:

    Kind Regards,

    Jonas


    in reply to: Modal Styling #10025052
    Support
    Keymaster

    Hello, to change the opacity use this code:

    .mfp-bg {
    	opacity: 0.8;
    }

    Best Regards,

    Jonas


    in reply to: Timepicker doc #10025044
    Support
    Keymaster

    Hello,

    Timepicker settings can be changed using the data-plugin-options, for example:

    <input type="text" data-plugin-timepicker class="form-control" data-plugin-options='{ "showMeridian": false }'>

    Here’s the available options:
    http://jdewit.github.io/bootstrap-timepicker/

    Kind Regards,

    Jonas


    in reply to: Adding Phone Number to Form #10025041
    Support
    Keymaster

    Hello, please check this topic to see how to add more fields in the contact form:

    Kind Regards,

    Jonas


    in reply to: Select2 – Adding new values to the list #10025040
    Support
    Keymaster

    Hello, you need to set the theme that you want for style the select2 plugin, theme: 'bootstrap',, for example:

    $(document).ready(function () {
    	$('#BuildingName').select2({
    		theme: 'bootstrap',
    		tags: true,
    		selectOnClose: true,
    
    		//Allow manually entered text in drop down.
    		createSearchChoice: function (term, data) {
    			if ($(data).filter(function () {
    				return this.text.localeCompare(term) === 0;
    			}).length === 0) {
    				return { id: term, text: term };
    			}
    		},
    	});
    });

    Best Regards,

    Jonas


    in reply to: style switcher js file not included in download #10025039
    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: How do you seperate the themes #10025038
    Support
    Keymaster

    Hello, thanks for your purchase.

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

    Let me try to explain it with more details about the Demos usage and folders/files you need:

    If you will work with only a single demo you can remove the following folders: However, the folders/files will not be in use, and not being called anywhere in the code.

    - ajax (just ajax content)
    - css
    	- /demos/ demos css that you will not use.
    	- theme-blog.css (You can remove that if you are not going to use blog features)
    	- theme-shop.css (You can remove that if you are not going to use shop features)
    	
    - img
    	- You can remove the images you will not use
    	- demos/ demos css that you will not use.
    	
    - js
    	- demos/ demos js that you will not use.
    	- examples/ those are just examples
    	
    - master
    	- You can remove this folder from your server if you are not going to use style switcher
    		
    - vendor
    	- It actually depends on which feature from the theme you are going to use.
    	
    - video
    	- You can remove videos folder if you are not going to use.

    Kind Regards,

    Jonas


    in reply to: Documentation problems #10025037
    Support
    Keymaster

    Hello, thanks for the message.

    You are right, that part from our documentation is still for Bootstrap 3. On Bootstrap 4 that was changed.

    We will update the docs as soon as possible.

    Thanks for letting us know.

    Best Regards,

    Jonas


    in reply to: Iframe and modal #10025036
    Support
    Keymaster

    Hello, note that the changes must be done in the site that you are opening inside the iframe.

    For example. You cannot open google.com inside and iframe (because they block it), but you can open okler.net (because I have standard settings for that).

    Do you have access to its code?

    Best Regards,

    Jonas


    in reply to: ToolTips not styling #10025035
    Support
    Keymaster

    Hello, I just tested it with the standard files and this is the result:

    Can you please send more details about that problem?

    Best Regards.


    in reply to: iphone menu display issues #10025020
    Support
    Keymaster

    Hello, we really could not reproduce the same issue here. Can you send more details? Iphone version and browser that you’re using.


    in reply to: Contact Form #10025019
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Google Analytics #10025018
    Support
    Keymaster

    Hello, thanks for your purchase.

    In fact we don’t have any examples included on Porto other than just the simple tracking code. Which you can find more information in this link:
    https://developers.google.com/analytics/devguides/collection/analyticsjs/

    Kind Regards,

    Jonas


    in reply to: Sticky top menu #10025013
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please check this following example:
    http://preview.oklerthemes.com/porto/6.0.0/index-header-always-sticky.html

    I think this is what you’re looking for, right?

    Best Regards,

    Jonas


    in reply to: iphone menu display issues #10025012
    Support
    Keymaster

    Hello, please try to add the following lines:

    @media (max-width: 991px) {
    	#header .nav-main-collapse.in {
    		overflow: visible !important;
    		height: auto !important;
    	}
    }

    Let us know if the problem persists.

    Kind Regards,

    Jonas


    in reply to: Iframe and modal #10024969
    Support
    Keymaster
    in reply to: Iframe and modal #10024951
    Support
    Keymaster

    Hello, yes, you can do that, here’s an example:

    <a class="popup-iframe" href="http://www.url.com">Open Iframe</a>

    (js/custom.js)

    $(document).ready(function() {
    	$('.popup-iframe').magnificPopup({
    		disableOn: 700,
    		type: 'iframe',
    		mainClass: 'mfp-fade',
    		removalDelay: 160,
    		preloader: false,
    
    		fixedContentPos: false
    	});
    });

    Kind Regards,

    Jonas


    in reply to: How to hide element on xs or sm ? #10024950
    Support
    Keymaster

    Hello,

    On Bootstrap 4 the classes “hidden-xs” and “hidden-sm” are deprecated. Here is a link showing the new classes to hide elements based in the resolution:
    https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

    And here is a migration guide from Bootstrap 3 to Bootstrap 4:
    https://getbootstrap.com/docs/4.0/migration/

    Kind Regards,

    Jonas


    in reply to: Contact Form #10024905
    Support
    Keymaster

    Hello, OK, so please contact the server administrator (host provider) and make sure you are entering the correct information for the authentication. Looks like the server is not allowing the connection.

    Kind Regards,

    Jonas


    in reply to: remove search bar #10024904
    Support
    Keymaster

    Hello, here are the options:

    1) Remove the following DIV in all files:

    <div class="search" id="headerSearch">
    	<a href="#" id="headerSearchOpen"><i class="fa fa-search"></i></a>
    	<div class="search-input">
    		<form id="headerSearchForm" action="page-search-results.html" method="get">
    			<div class="input-group">
    				<input type="text" class="form-control search" name="q" id="q" placeholder="Search..." required>
    				<span class="input-group-btn">
    					<button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
    				</span>
    			</div>
    		</form>
    	</div>
    </div>

    2) Or add this css:

    (css/custom.css)

    #header .search {
    	display: none;
    }

    Kind Regards,

    Jonas


    in reply to: remove search bar #10024886
    Support
    Keymaster

    Hello,

    Can you please confirm which header style are you using and send us the URL of your site please?

    Best Regards,

    Jonas


    in reply to: Contact Form #10024885
    Support
    Keymaster

    Hello, did you try to configure the authentication mode (SMTP) with the email details?

    Please try that and also set the debug mode.

    More info: http://www.okler.net/forums/topic/important-contact-form-is-not-working/

    Kind Regards,

    Jonas


    in reply to: Contact form #10024884
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Missing RTL files #10024883
    Support
    Keymaster

    Hello, if you are using Porto 6.0.0 (with Bootstrap 4) the bootstrap-rtl is not required anymore.

    Can you confirm which version you’re using?

    Best Regards,

    Jonas


    in reply to: Dynamicly set sidebar size #10024858
    Support
    Keymaster

    Hello, yes, you can do that, here’s an example:

    $(document).ready(function(){
    
    	$('html').removeClass('sidebar-left-xs').removeClass('sidebar-left-sm')removeClass('sidebar-left-md');
    
    	if ( $(window).width() > 480 && $(window).width() < 768) {
    		$('html').addClass('sidebar-left-xs');
    	}
    
    });

    See the “IF” conditional and add the other ones you want.

    Kind Regards,

    Jonas


    in reply to: Contact Form #10024856
    Support
    Keymaster

    Hello, I’ve checked the website and everything is fine in the JS/HTML files, the ajax is sending the request to the server.

    If the e-mail is not set to the same domain of the website you will have to set authentication mode (SMTP):

    The server of the website that is not working probably more restrict in terms of security.

    More info: http://www.okler.net/forums/topic/important-contact-form-is-not-working/

    This is also another alternative:

    Kind Regards,

    Jonas


    in reply to: Contact Form: word-wrap in message field #10024841
    Support
    Keymaster

    Hello, please open the php file contact-us-advanced.php and make the change in the line number :

    FROM:

    $message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>\n";

    TO:

    $message .= $field['text'].": " . nl2br($field['val']) . "<br>\n";

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

    Kind Regards,

    Jonas


    in reply to: Site Very Slow. CSS / JS / HTML Optimization problem. #10024839
    Support
    Keymaster

    Hello, thanks for your purchase.

    Regarding performance, there are a few things you can do after you finish your website. For example, there are several different ways to compress and combine the assets, this is probably the easiest way: http://www.okler.net/forums/topic/minify-php-how-to-combine-minify-and-cache-javascript-and-css-files-on-demand/

    The images can also be improved, consider to export them in a lower quality. JPG 80% is good enough.

    Regarding the cache, this is the right way to do that: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

    You can also remove the plugins that you will never use in any page and combine/compress all the other scripts so it will cache the resources and make it much better in performance in any other page.

    It works the same way for all HTML templates. All files come uncompressed to make it easy to edit and customize, and then when you finish your website you can make the improvements.

    Best Regards,

    Jonas


    in reply to: Bootstrap Hidden-Class #10024838
    Support
    Keymaster

    Hello, in the new Bootstrap (v4) the hidden class was changed, please check this for more information:

    https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

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

    Kind Regards,

    Jonas


    in reply to: Contact Form #10024837
    Support
    Keymaster

    Hello, can you please send us the URL of your site?

    Best Regards,

    Jonas


    in reply to: Older version download #10024825
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: remove search bar #10024779
    Support
    Keymaster

    Hello, you created this topic under “Tucson Template”, can you please confirm which header style are you using? I guess you are talking about Porto and not Tucson, right?

    Best Regards,

    Jonas


    in reply to: General Issue #10024778
    Support
    Keymaster

    Hello,

    Make sure you add all the required scripts, in the link you sent there are several broken scripts that are returning (404).

    You can see all the required external scripts in this link:
    http://preview.oklerthemes.com/porto/6.0.0/feature-admin-forms-advanced.html

    Kind Regards.


    in reply to: map on mobile #10024777
    Support
    Keymaster

    Hello, please open a new ticket and send us more details about that question.

    Best Regards,

    Jonas


    in reply to: License #10024663
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Secondary Navbar #10024659
    Support
    Keymaster

    Hello, the problem is that the navigation appears only on scroll, and if it loads in the middle of the page you need to scroll.

    To avoid that you can add this script:

    (js/custom.js)

    $(window).on('load', function() {
    	$(window).trigger('resize').trigger('scroll');
    });

    Best Regards,

    Jonas


    in reply to: Text beside logo in header #10024658
    Support
    Keymaster

    Hello, thanks for your purchase.

    My suggestion is that you add the text after the image, like this:

    <div class="header-logo">
    	<a href="index.html">
    		<img alt="Porto" width="165" height="165" data-sticky-width="82" data-sticky-height="82" data-sticky-top="0" src="img/logo-big.png">
    		<span class="logo-text">Company</span>
    	</a>
    </div>

    Then if you want to change the style, use the class .logo-text , to change font and color.

    Best Regards,

    Jonas


    in reply to: License #10024657
    Support
    Keymaster

    Hello, thank you so much for your purchase and kind words.

    Regarding the license, I’d like to understand it a little better, can you send more details?

    I believe the Extended License is the one for you, please check it here:
    https://themeforest.net/licenses/standard

    Best Regards,

    Jonas


    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Images #10024354
    Support
    Keymaster

    Hi, I’m sorry, but as mentioned earlier the images are not part of the package that you purchased and we are not authorized to send the images (based on Envato/ThemeForest license terms).

    Best Regards,

    Jonas


    in reply to: Images #10024336
    Support
    Keymaster

    Hello,

    Unfortunately the images are not included in the theme (it works the same way for all themes on ThemeForest), the images are just for the preview website. That information is at the theme description. On zip package that you downloaded comes only the placeholders of images.

    Kind Regards,

    Jonas


    in reply to: Images #10024334
    Support
    Keymaster

    Hello, thanks for your purchase.

    I’m sorry but I’m a little confused about that question, can you please explain it with more details?

    Kind Regards,

    Jonas


    in reply to: please help! #10024333
    Support
    Keymaster

    Hello,

    Please make sure you don’t forget any “container” divs that are opening and not closing correctly. For example:

    Please review your code to see that all elements are opening/closing perfectly.

    Best Regards,

    Jonas


    in reply to: Navigation button for mobile #10024332
    Support
    Keymaster

    Hello, this is the code that you need:

    HTML:

    <button class="btn header-btn-collapse-nav collapsed" data-toggle="collapse" data-target=".header-nav-main nav">
    	<i class="fa fa-bars"></i>
    	<i class="fa fa-times"></i>
    </button>

    CSS:
    (css/custom.css)

    #header .header-btn-collapse-nav {
    	width: 42px;
    	height: 38px;
    }
    
    #header .header-btn-collapse-nav.collapsed .fa-bars {
    	display: block;
    }
    
    #header .header-btn-collapse-nav.collapsed .fa-times {
    	display: none;
    }
    
    #header .header-btn-collapse-nav .fa-bars {
    	display: none;
    }
    
    #header .header-btn-collapse-nav .fa-times {
    	display: block;
    }

    Kind Regards,

    Jonas


    in reply to: how do i activate the style switcher? #10024301
    Support
    Keymaster

    Hello,

    To activate the Style Switcher you need to include the JS file:

    <script src="master/style-switcher/style.switcher.js" id="styleSwitcherScript" data-skin-src=""></script>

    Note that you cannot open the file directly on the browser, you need a local server (localhost) or upload to the remote server via FTP.


    in reply to: shortcode #10024300
    Support
    Keymaster

    Hello, thanks for your purchase.

    To get the shortcodes you just need to copy/paste the code you want to use, and to change the pricing table to use 5 columns this is the code you need:

    <div class="pricing-table row no-gutters mt-2 mb-2">
    	<div class="col-md-1-5">
    		<div class="plan">
    			<h3>Enterprise<span>$59</span></h3>
    			<a class="btn btn-lg btn-primary" href="#">Sign up</a>
    			<ul>
    				<li><strong>10GB</strong> Disk Space</li>
    				<li><strong>100GB</strong> Monthly Bandwidth</li>
    				<li><strong>20</strong> Email Accounts</li>
    				<li><strong>Unlimited</strong> subdomains</li>
    			</ul>
    		</div>
    	</div>
    	<div class="col-md-1-5 text-center">
    		<div class="plan most-popular">
    			<div class="plan-ribbon-wrapper"><div class="plan-ribbon">Popular</div></div>
    			<h3>Professional<span>$29</span></h3>
    			<a class="btn btn-lg btn-primary" href="#">Sign up</a>
    			<ul>
    				<li><strong>5GB</strong> Disk Space</li>
    				<li><strong>50GB</strong> Monthly Bandwidth</li>
    				<li><strong>10</strong> Email Accounts</li>
    				<li><strong>Unlimited</strong> subdomains</li>
    			</ul>
    		</div>
    	</div>
    	<div class="col-md-1-5">
    		<div class="plan">
    			<h3>Standard<span>$17</span></h3>
    			<a class="btn btn-lg btn-primary" href="#">Sign up</a>
    			<ul>
    				<li><strong>3GB</strong> Disk Space</li>
    				<li><strong>25GB</strong> Monthly Bandwidth</li>
    				<li><strong>5</strong> Email Accounts</li>
    				<li><strong>Unlimited</strong> subdomains</li>
    			</ul>
    		</div>
    	</div>
    	<div class="col-md-1-5">
    		<div class="plan">
    			<h3>Basic<span>$9</span></h3>
    			<a class="btn btn-lg btn-primary" href="#">Sign up</a>
    			<ul>
    				<li><strong>1GB</strong> Disk Space</li>
    				<li><strong>10GB</strong> Monthly Bandwidth</li>
    				<li><strong>2</strong> Email Accounts</li>
    				<li><strong>Unlimited</strong> subdomains</li>
    			</ul>
    		</div>
    	</div>
    	<div class="col-md-1-5">
    		<div class="plan">
    			<h3>Basic<span>$9</span></h3>
    			<a class="btn btn-lg btn-primary" href="#">Sign up</a>
    			<ul>
    				<li><strong>1GB</strong> Disk Space</li>
    				<li><strong>10GB</strong> Monthly Bandwidth</li>
    				<li><strong>2</strong> Email Accounts</li>
    				<li><strong>Unlimited</strong> subdomains</li>
    			</ul>
    		</div>
    	</div>
    </div>

    Kind Regards,

    Jonas


    in reply to: Lightbox help #10024241
    Support
    Keymaster

    Hello, this is my suggestion:

    <div class="owl-carousel owl-theme" data-plugin-options='{"items": 1, "animateOut": "fadeOut", "autoplay": true, "autoplayTimeout": 3000}'>
      <div>
    	<div class="img-thumbnail">
    		<a href="#" class="gallery-link"><img class="img-responsive" src="img/news/news-header-1.png" alt=""></a>
    	  </div>
    
    		<div class="gallery">
    			<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg"></a>
    			<a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg"></a>
    		</div>
      </div>
      <div>
    	<div class="img-thumbnail"><img class="img-responsive" src="img/news/news-header-2.png" alt=""></div>
      </div>
      <div>
    	<div class="img-thumbnail"><img class="img-responsive" src="img/news/news-header-3.png" alt=""></div>
      </div>
    </div>

    JS:
    (js/custom.js)

    // Bind Click Handler to Link, then Open Gallery
    $('.gallery-link').on('click', function (e) {
    	e.preventDefault();
        $('.gallery').magnificPopup('open');
    });
    
    // Initialize Magnific Popup Gallery + Options
    $('.gallery').each(function () {
        $(this).magnificPopup({
            delegate: 'a',
            gallery: {
                enabled: true
            },
            type: 'image'
        });
    });

    Kind Regards,

    Jonas


    in reply to: Skin Problem #10024239
    Support
    Keymaster

    Hello, thanks for you purchase.

    You can change that add the following css lines:

    (css/custom.css)

    .slider-container {
    	background: #F4f4f4;
    }

    Let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Fixed header #10024173
    Support
    Keymaster

    Hello, to use the Fixed Header (fixedHeader) on datatables you need to:

    1) Add the CSS:

    https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.bootstrap4.min.css

    and

    (css/custom.css)

    table.dataTable.fixedHeader-floating {
    	top: 114px !important;
    }

    2) Add the JS:

    https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js

    3) Change the Initialization to:
    (examples.datatables.default.js)

    (function($) {
    
    	'use strict';
    
    	var datatableInit = function() {
    
    		$('#datatable-default').dataTable({
    			dom: '<"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
    			fixedHeader: true
    		});
    
    	};
    
    	$(function() {
    		datatableInit();
    	});
    
    }).apply(this, [jQuery]);

    Best Regards,

    Jonas


    in reply to: map on mobile #10024153
    Support
    Keymaster

    Hello, if you want to redraw the map on resize, please add this:

    $(window).on('resize', function() {
    	$('#googlemaps').gMap(mapSettings);
    });

    Kind Regards,

    Jonas


    in reply to: Fixed header DataTable Header #10024150
    Support
    Keymaster

    Hello, Datatables has an extension to make the fixed header (which is not included on Porto), but you can check the instructions in this topic:

    https://datatables.net/extensions/fixedheader/

    And download the extension here:
    https://datatables.net/download/release

    Best Regards,

    Jonas


    Support
    Keymaster

    Hello, please add the following css lines:

    .modal-block.modal-block-full .modal-wrapper {
    	min-height: 75vh;
    }

    Kind Regards,

    Jonas


    in reply to: Remove left sidebar on mobile view #10024148
    Support
    Keymaster

    Hello, you can invert the column order on mobile resolution, please check this for more information: https://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout

    Let us know if you have any further questions.

    Kind Regards,

    Jonas


    in reply to: Domain Search Function #10024121
    Support
    Keymaster

    Hello, thanks for your purchase.

    Here’s my suggestion to make it work:

    HTML (for that specific form area from Porto Hosting demo):

    <section class="parallax section section-text-light section-parallax section-center mt-none mb-none" data-stellar-background-ratio="0.5" style="background-image: url(img/parallax-hosting.jpg);" id="search-domain">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-8 col-md-offset-2 center">
    				<h2 class="heading-light mb-none">Search <strong>Domain</strong></h2>
    				<p class="mb-xl">Enter the domain name to register or transfer</p>
    
    				<form class="form-horizontal" action="#" method="post" id="domainSearchForm">
    					<div class="form-group form-group-lg">
    						<div class="col-sm-12">
    							<div class="input-group">
    								<input type="text" name="sld" class="form-control" aria-label="..." placeholder="Enter your domain" required data-msg-required="Please enter your domain.">
    								<input type="hidden" name="tld" value=".com">
    								<div class="input-group-btn">
    									<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="tldBtn">.com <span class="caret"></span></button>
    									<ul class="dropdown-menu dropdown-menu-right" id="tld">
    										<li><a href="#">.com</a></li>
    										<li><a href="#">.net</a></li>
    										<li><a href="#">.org</a></li>
    										<li><a href="#">.eu</a></li>
    										<li><a href="#">.us</a></li>
    									</ul>
    								</div>
    							</div>
    						</div>
    					</div>
    					
    					<button class="btn btn-lg btn-primary mt-md" href="#">Search Domain</button>
    				</form>
    
    			</div>
    		</div>
    	</div>
    </section>

    JS:
    (js/custom.js)

    (function($) {
    
    	'use strict';
    
    	// Domain Search Form
    	$('#domainSearchForm').validate({
    		submitHandler: function(form) {
    
    			var $form = $(form);
    
    			$.magnificPopup.open({
    				items: {
    					src: 'php/whois.php?domain=' + $form.find('[name=sld]').val() + $form.find('[name=tld]').val()
    				},
    				type: 'ajax',
    				tLoading: '<div class="bounce-loader"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>',
    				mainClass: ''
    			});
    
    		},
    		errorPlacement: function(error, element) {
    			error.appendTo(element.parent().parent());
    		}		
    	});
    
    	// Domain Dropdown
    	$('#tldBtn').html($('input[name=tld]').val() + ' <span class="caret"></span>')
    
    	$('#tld a').on('click', function(e) {
    		e.preventDefault();
    		$('input[name=tld]').val($(this).text());
    		$('#tldBtn').html($(this).text() + ' <span class="caret"></span>')
    	});
    
    }).apply(this, [jQuery]);

    PHP:
    (php/whois.php)

    Code from: http://www.phpeasycode.com/whois/

    http://pastebin.com/Av61b3kN

    I hope it helps.

    Kind Regards,

    Jonas


    in reply to: Where to get images? #10024089
    Support
    Keymaster

    Hello, thanks for your purchase.

    Unfortunately the images are not included in the theme (it works the same way for all themes on ThemeForest), the images are just for the preview website. That information is at the theme description. On zip package that you downloaded comes only the placeholders of images.

    Kind Regards,

    Jonas


    in reply to: Contact form for demo-resume.html is not working #10024088
    Support
    Keymaster

    Hello, thanks for your purchase.

    Did you test the “Say Hello” form? It works with the same script as the other forms on Porto, I just did a quick test here and the email is being sent.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, please make sure you are using the latest version of the theme, and if the problem persists, please send us the URL of your site so we can check that problem for you.

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, my suggestion for that particular demo is to put the bar at the bottom, to not conflict with the header, changing the css to this:

    #cookie-bar {
    	background-color: #171717;
    	height: 40px;
    	z-index: 99999;
    	padding: 8px 0;
    	position: fixed;
    	bottom: 0;
    	width: 100%;
    }

    Kind Regards,

    Jonas


    in reply to: STICKY MENU FONT COLOR #10024085
    Support
    Keymaster

    Hello,

    You can use the sticky-header-active class for that, example:

    .sticky-header-active #header a {
    	color: #000 !important;
    }

    Kind Regards,
    Jonas


    in reply to: Website Speed #10024084
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Make elements in navbar responsive? #10024083
    Support
    Keymaster

    Hello,

    The navigation uses the bootstrap “collapse” class to be show/hide depending on the resolution, the “collapse” class does that:

    Unfortunately it’s not possible to change that in the theme css file, it would require a customization in the bootstrap grid system.

    Kind Regards,

    Jonas


    in reply to: Upgrade problems #10024082
    Support
    Keymaster

    Hello, I just checked the URL that you provided and it looks like it’s working now, right?

    Let us know if the problem persists and if so, please send us the URL where it happens.

    Kind Regards,

    Jonas


    in reply to: Main image/text #10024068
    Support
    Keymaster

    Hello, I’m sorry but I’m a little confused about that question, can you please explain it again?

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, please check this topic for more information:

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, sure, you can add those options in the slider options, please check this example:

    <div id="revolutionSlider" class="slider rev_slider" data-plugin-revolution-slider data-plugin-options="{'viewPort': {'enable': true, 'outof': 'wait', 'visible_area': '80%', 'presize': true}, 'delay': 9000, 'gridwidth': 1170, 'gridheight': 500, 'disableProgressBar': 'on', 'responsiveLevels': [4096,1200,992,500]}">

    Kind Regards,

    Jonas


    in reply to: Real Estate Demo – Slider #10024015
    Support
    Keymaster

    Hello, that demo uses a customized version of the slider, the easiest way to remove them is to use css:

    (css/custom.css)

    .rev_slider .tparrows,
    .rev_slider .slides-number {
    	display: none !important;	
    }

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, I’m not sure I understand the question, but if you want to make the carousel with auto play, please change from:

    <div class="owl-carousel owl-theme nav-bottom rounded-nav" data-plugin-options="{'items': 1, 'loop': false}">
    <div class="owl-carousel owl-theme nav-bottom rounded-nav" data-plugin-options="{'items': 1, 'loop': false, 'autoplay': true, 'autoplayTimeout': 3000}">

    Kind Regards,

    Jonas


    in reply to: site Porto has the administrative area #10024013
    Support
    Keymaster

    Hello, in the HTML version there’s not administration panel to manage the shop products.

    Please consider the WordPress version (with WooCommerce) for that:
    https://themeforest.net/item/porto-responsive-wordpress-ecommerce-theme/9207399

    Kind Regards,

    Jonas


    in reply to: add more fields in the contact form #10024012
    Support
    Keymaster

    Hello, please check this topic to see how to add more fields in the contact form:

    Kind Regards,

    Jonas


    in reply to: Remove message from error line #10023986
    Support
    Keymaster

    Hello, that message comes from Mailchimp and it can’t be changed, but you can use a generic error message if you want, just open the file js/theme.js and change that:

    Kind Regards,

    Jonas


    in reply to: Require dotted pattern over image #10023985
    Support
    Keymaster

    Hello, you can set the dottedOverlay option in the slide, for example:

    <div id="revolutionSlider" class="slider rev_slider" data-plugin-revolution-slider data-plugin-options='{"delay": 9000, "gridwidth": 1170, "gridheight": 560, "dottedOverlay": "twoxtwo"}'>

    Possible values: twoxtwo, threexthree, twoxtwowhite, threexthreewhite

    Kind Regards,

    Jonas


    in reply to: In Second Loop of Banner Slide Text not Center Align #10023984
    Support
    Keymaster

    Hello, can you please send us more details about how to reproduce that issue? We were not able to see it here testing on Chrome, Firefox, etc…

    Kind Regards,

    Jonas


    in reply to: Construction logo as PSD #10023983
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: I need this version: 5.7.2 #10023947
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Ecommerce with HTML5 template #10023893
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Request features #10023874
    Support
    Keymaster

    Hello, thanks for your purchase.

    1) Bootstrap File Upload is included, please check it in the file: forms-basic.html – Vendor folder is: bootstrap-fileupload.

    2) Maxlenght is a separated plugin, not related to Summernote, example can also be found on forms-advanced.html

    Kind Regards,

    Jonas


    in reply to: Video background #10023870
    Support
    Keymaster

    Hello, the video background plugin just uses the same name of the video for the cover image, as you can see in the example:

    video/dark.jpg
    video/dark.mp4
    ...

    The image path can’t be changed in the code.

    Please try that and let us know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: Countdown timer with circular pie chart #10023869
    Support
    Keymaster

    Hello, thanks for your purchase.

    Unfortunately we don’t have an example of that on Porto, but you can find some similar solutions on CodePen, please check this one:
    https://tinyurl.com/y9x6xvcd

    It can be easily changed to look the way you want.

    Kind Regards,

    Jonas


    • This reply was modified 1 year, 11 months ago by  Support.
    in reply to: Install failed #10023868
    Support
    Keymaster

    Hello, thanks for your purchase.

    Porto WordPress is also available on ThemeForest. Here’s the link: http://themeforest.net/item/porto-responsive-wordpress-woocommerce-theme/9207399

    If you purchase the WordPress version we can approve the refund for the HTML version.

    All support related to payment and refund is run through Envato’s ticket service:
    http://themeforest.net/refund_requests/new

    In the refund request details please send us the purchase code from your purchase of Porto WordPress version.

    Kind Regards,

    Okler Themes


    in reply to: Lock Screen #10023867
    Support
    Keymaster

    Hello, about the URL, unfortunately there’s nothing we can do with javascript to avoid that (because it’s browser related), you would have to make that on server-side code to avoid the content to be shown when the page is reloaded, redirecting to pages-lock-screen.html.

    Kind Regards,

    Jonas


    in reply to: make responsive word-rotate-items #10023766
    Support
    Keymaster

    Hello, in that case you would have to reduce the font-size on mobile, using the following css code:

    (css/custom.css)

    @media (max-width: 992px) {
    	h1.word-rotator-title {
    		font-size: 2em;
    	}
    }

    Kind Regards,

    Jonas


    in reply to: Auto Show / Hide Header #10023765
    Support
    Keymaster

    Hello, the css for mouse over opacity is as follows:

    (css/custom.css)

    html.sticky-header-active #header .header-body {
    	opacity: 0;
    }
    
    html.sticky-header-active #header:hover .header-body {
    	opacity: 1;
    }

    Kind Regards,

    Jonas


    in reply to: Overall Text Color #10023764
    Support
    Keymaster

    Hello, thanks for your purchase.

    You can change the color adding this css:
    (css/custom.css)

    body,  p {
        color: #777;
    }

    Kind Regards,

    Jonas


    in reply to: Auto Show / Hide Header #10023749
    Support
    Keymaster

    Hello, unfortunately that is a little complicated to do and that question is a bit beyond from what support can offer.
    Our Support Center is here to help all the buyers with questions related to the template, but not customization to the buyers needs. Please consider that for the next questions.

    Item support does not include:

    – Customization and installation services
    – Support for third party software and plug-ins

    Support for our items includes:

    – Responding to questions or problems regarding the item and its features.
    – Fixing bugs and reported issues.
    – Providing updates to ensure compatibility with new software versions.

    The definition of support we provide is based on Envato/ThemeForest license.

    Kind Regards,

    Jonas


    in reply to: Social Icons #10023748
    Support
    Keymaster

    Hello, thanks for your purchase.

    You can find the social icons classes in the file: css/theme-elements.css (line 6542)

    Let me know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: How do I create a simple 2-column responsive layout #10023733
    Support
    Keymaster

    Hello, thanks for your purchase.

    I’m sorry, but I’m not sure I understand that question.

    Regarding the Grid System, please check this topic:
    https://getbootstrap.com/docs/3.3/css/#grid-example-basic

    (Check the Mobile, tablet, desktop example as well)

    Simple example on how to create 2 column responsive layout:

    <div class="row">
      <div class="col-md-6"></div>
      <div class="col-md-6"></div>
    </div>

    Kind Regards,

    Jonas


    in reply to: I dont know how to install the theme #10023732
    Support
    Keymaster

    Hello,

    Thanks for your purchase, however, please note that the template you purchased is not a WordPress Theme, it’s a HTML5/CSS3 template so this cannot be installed on WordPress.

    You can find the WordPress version in this link:
    http://themeforest.net/item/porto-responsive-wordpress-woocommerce-theme/9207399

    If 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 the WordPress version we can approve the refund for the HTML version.

    Please let us know if we can help you with anything else.

    Kind Regards,

    Jonas


    in reply to: Sticky Leftside bar #10023708
    Support
    Keymaster

    Hello, it’s not recommended if you have too many items in the menu, but if you still want it, just add this:

    @media only screen and (min-width: 768px) {
    
    	html.fixed .content-body {
    		margin-left: 150px;
    	}
    
    	html.fixed .page-header {
    		left: 150px;
    	}
    	
    }

    And change the HTML tag to this:

    <html class="fixed sidebar-left-big-icons">

    Kind Regards,

    Jonas


    in reply to: Slider Revo Videos are not loaded on mobile…. #10023707
    Support
    Keymaster

    Hello,

    To show the video background this is the HTML you need:

    <li data-transition="fade">
    	<img src="img/slides/light-cover.jpg"  
    		alt=""
    		data-bgposition="center center" 
    		data-bgfit="cover" 
    		data-bgrepeat="no-repeat" 
    		class="rev-slidebg">
    
    	<div class="rs-background-video-layer" 
    		data-forcerewind="on" 
    		data-volume="mute" 
    		data-videowidth="100%" 
    		data-videoheight="100%" 
    		data-videomp4="video/light.mp4" 
    		data-videopreload="preload" 
    		data-videoloop="loop" 
    		data-forceCover="1" 
    		data-aspectratio="16:9" 
    		data-autoplay="true" 
    		data-autoplayonlyfirsttime="false" 
    		data-nextslideatend="true" 
    	></div>								
    </li>

    * Note the on mobile the autoplay don’t works (mobile browsers don’t allow autoplay). So to play the video on mobile will need a touch/click.

    Here is more explanations about videos on mobile:
    https://www.themepunch.com/faq/video-not-showing-up-on-mobile/

    Kind Regards,

    Jonas


    in reply to: Burger Menu #10023701
    Support
    Keymaster

    Hello, I’m sorry but I wasn’t able to reproduce that problem. I tested on Chrome on Desktop and Mobile and it worked well, it goes to the right area in the page when clicked.

    Were you able to fix it? If not, please send us more details.

    Kind Regards,

    Jonas


    in reply to: Not a wordpress theme :( #10023700
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Lock Screen Assistance #10023677
    Support
    Keymaster

    Hello,

    1) Make sure you include jquery validate plugin in that page:

    <script src="vendor/jquery-validation/jquery.validate.js"></script>

    2) Update the lock screensh script on theme.js file: https://pastebin.com/raw/STaE59Ma

    * Check the events that I added for the validation.

    Kind Regards,

    Jonas


    in reply to: Drop files here to upload #10023674
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Need Bootstrap 3 Version #10023673
    Support
    Keymaster

    Hello Sven.

    I replied the email you sent.

    Best Regards,

    Jonas


    in reply to: Side Bar / header – Black Background Color Change #10023649
    Support
    Keymaster

    Hello, OK, for the Big Icons, use this:

    .sidebar-left .sidebar-header .sidebar-title {
    	background: #0088cc;
    }
    
    .sidebar-left .sidebar-header .sidebar-toggle,
    .page-header {
    	background: #0063A7;
    }
    
    html.no-overflowscrolling .sidebar-left .nano {
    	background: #006AAE;
    }
    
    .page-header {
    	border-left: 1px solid #0063A7;
    }
    
    html.no-overflowscrolling .sidebar-left .nano {
    	box-shadow: -5px 0 0 #0A7EC2 inset;
    }
    
    ul.nav-main li .nav-children {
    	background: #00518C;
    }
    
    ul.nav-main > li > a:hover, ul.nav-main > li > a:focus,
    ul.nav-main > li.nav-expanded > a,
    ul.nav-main li .nav-children li a:hover, ul.nav-main li .nav-children li a:focus,
    .sidebar-widget.widget-tasks ul li a:hover {
    	background: #0A7EC2;
    }
    
    .sidebar-widget.widget-stats .progress {
    	background: #00518C;
    }
    
    .sidebar-left .sidebar-header .sidebar-title,
    .sidebar-widget .widget-header h6,
    .sidebar-widget .widget-header .widget-toggle,
    .sidebar-widget.widget-stats .stats-complete,
    ul.nav-main li a .not-included {
    	color: #FFF;
    }
    
    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li > a {
        border-top: 1px solid #00589c;
    }
    
    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li:last-child > a {
    	border-top: 1px solid #00589c;
    	border-bottom: 1px solid #00589c;
    }
    
    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li:hover > a {
    	background: #0A7EC2;
    }
    
    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li ul.nav-children,
    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li.nav-active > a {
    	background: #0A7EC2;
    }
    
    html.sidebar-left-big-icons .sidebar-left .nano .nav-main > li ul.nav-children {
    	border-left: 3px solid #0A7EC2;
    }
    
    html.sidebar-left-big-icons .sidebar-left .nano .nav-main li.nav-parent:hover > a::before {
    	border-right: 4px solid #0A7EC2;
    }

    Kind Regards,

    Jonas


    in reply to: "Search" #10023646
    Support
    Keymaster

    Hello, thanks for your purchase.

    The easiest way to make a functional search is using Google Custom Search, which uses the language of the browser.

    More information: http://www.okler.net/forums/topic/how-to-use-google-custom-search/

    Let us know if you have any questions.

    Kind Regards,

    Jonas


    in reply to: Side Bar / header – Black Background Color Change #10023645
    Support
    Keymaster

    Hello, can you confirm that you are using Porto Admin 2.0.0. This is the result using the code we sent:

    Best Regards,

    Jonas


    in reply to: header #10023644
    Support
    Keymaster

    Hello, to remove the margin in the logo just add the following css code:

    (css/custom.css)

    #header .header-logo {
        margin: 0;
    }

    Kind Regards,

    Jonas


    in reply to: need help removing some unwanted box #10023643
    Support
    Keymaster

    Hello,

    1) CSS Problem, just add this:

    (css/custom.css)

    #header .header-nav-main nav > ul > li.dropdown-mega.dropdown-mega-shop .dropdown-menu {
    	border-radius: 0;
    	left: auto;
    	right: auto;
    	display: none !important;
    }
    
    #header .header-nav-main nav > ul > li.dropdown-mega.dropdown-mega-shop.loaded:hover .dropdown-menu {
    	display: block !important;
    }

    2) Add the JS to show only the box when the ajax is loaded:

    (js/custom.js)

    $('#headerShop > .dropdown-toggle').on('click', function() {
    	$(this).parent().addClass('loaded');
    });

    3) Sorry, unfortunately that is a bit beyond from what support can offer, because it’s a customized script that you are using, and that does not come with the template.

    Kind Regards,

    Jonas


    in reply to: Side Bar / header – Black Background Color Change #10023641
    Support
    Keymaster

    Hello, if you want to make the whole sidebar blue, this is the code you need:

    (css/custom.css)

    .sidebar-left .sidebar-header .sidebar-title {
    	background: #0088cc;
    }
    
    .sidebar-left .sidebar-header .sidebar-toggle,
    .page-header {
    	background: #0063A7;
    }
    
    html.no-overflowscrolling .sidebar-left .nano {
    	background: #006AAE;
    }
    
    .page-header {
    	border-left: 1px solid #0063A7;
    }
    
    html.no-overflowscrolling .sidebar-left .nano {
    	box-shadow: -5px 0 0 #0A7EC2 inset;
    }
    
    ul.nav-main li .nav-children {
    	background: #00518C;
    }
    
    ul.nav-main > li > a:hover, ul.nav-main > li > a:focus,
    ul.nav-main > li.nav-expanded > a,
    ul.nav-main li .nav-children li a:hover, ul.nav-main li .nav-children li a:focus,
    .sidebar-widget.widget-tasks ul li a:hover {
    	background: #0A7EC2;
    }
    
    .sidebar-widget.widget-stats .progress {
    	background: #00518C;
    }
    
    .sidebar-left .sidebar-header .sidebar-title,
    .sidebar-widget .widget-header h6,
    .sidebar-widget .widget-header .widget-toggle,
    .sidebar-widget.widget-stats .stats-complete,
    ul.nav-main li a .not-included {
    	color: #FFF;
    }

    * IT works for Porto Admin 2.0.0

    Best Regards,

    Jonas


    in reply to: Need Bootstrap 3 Version #10023623
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: theme don't show mapMarkers #10023615
    Support
    Keymaster

    Hello, thanks for your purchase.

    I just checked the website source code and looks like there’s something wrong, the HTML code is from version 6.0.0 and the JS/CSS files are from 5.7.1. Can you please download the latest version and upload the assets files?

    Also, the API Key is showing as not valid. Please try to generate a new one: http://www.okler.net/forums/topic/how-to-setup-google-maps-api-key/

    Try that and let me know if you need further assistance.

    Kind Regards,

    Jonas


    in reply to: Burger Menu #10023614
    Support
    Keymaster

    Hello, thanks for your purchase.

    Sure, please try the following JS code:

    (js/custom.js)

    $('#header .dropdown-item').on('mousedown', function() {
    	if($(window).width() < 992) {
    		$('.header-btn-collapse-nav').trigger('click');
    	}
    });

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

    Kind Regards,

    Jonas


    Support
    Keymaster

    Hello, you just need to open the file js/views/view.contact.js and remove the validation:

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

    Kind Regards,

    Jonas


    in reply to: I need add Yotpo Plugin in theme Porto but dindin´t work #10023612
    Support
    Keymaster

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

    Kind Regards,

    Jonas


    in reply to: Side Bar / header – Black Background Color Change #10023611
    Support
    Keymaster

    Hello, thanks for your purchase.

    – It actually depends on which color you want to change, for example, if you want to change the sidebar do light (white) you can just add the class sidebar-light to the html tag:

    <html class="fixed sidebar-light">

    – Regarding the blue color skin, please check this topic: http://www.okler.net/forums/topic/important-how-to-use-a-skin/

    – This may also help: http://www.okler.net/forums/topic/how-to-find-which-css-is-being-applied-to-an-element/

    Kind Regards,

    Jonas


    in reply to: header #10023608
    Support
    Keymaster

    Hello, sorry for the delay in responding.

    Please try to add the following css code:

    (css/custom.css)

    html.photography-demo-2 #header.transparent-header .header-body {
        background: rgba(255,255,255,0.6);
    }

    Please try that and let me know if you have any questions.

    Best Regards,

    Jonas


    • This reply was modified 2 years ago by  Support.
    in reply to: youtube videos not working with revolution slider #10023516
    Support
    Keymaster

    Hello, here’s another example with the controls and auto-play off:

    http://okler.net/tests/porto/5.5.0/test-video2.html

    <div class="slider-container rev_slider_wrapper">
    	<div id="revolutionSlider" class="slider rev_slider" data-plugin-revolution-slider data-plugin-options='{"delay": 9000, "gridwidth": 1170, "gridheight": 1200}'>
    		<ul>
    			<li data-index="" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="default" data-rotate="0"  data-saveperformance="off"  data-title="" data-param1="Youtube Video" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
    				<img src="img/slides/slide-bg-text-video.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    				<div class="tp-caption tp-resizeme fullscreenvideo tp-videolayer" 
    					id="slide-3018-layer-3" 
    					data-x="0" 
    					data-y="0" 
    					data-type="video" 
    					data-responsive_offset="on" 
    					data-frames='[{"speed":1000,"to":"o:1;","delay":1000,"ease":"Power1.easeInOut"},{"delay":"wait","speed":1000,"ease":"nothing"}]'
    					data-ytid="d_8fE-On19I"
    					data-videoattributes="version=3&amp;enablejsapi=1&amp;html5=1&amp;volume=100&hd=1&wmode=opaque&showinfo=0&ref=0&amp;origin=http://okler.net;"
    					data-videorate="1"
    					data-videowidth="100%"
    					data-videoheight="100%"
    					data-videocontrols="controls"
    					data-videoloop="none"
    					data-forceCover="1"
    					data-aspectratio="16:9"
    					data-textAlign="['left','left','left','left']"
    					data-paddingtop="[0,0,0,0]"
    					data-paddingright="[0,0,0,0]"
    					data-paddingbottom="[0,0,0,0]"
    					data-paddingleft="[0,0,0,0]"
    					data-autoplay="off" 
    					data-nextslideatend="true" 
    					data-volume="100"
    					data-forcerewind="on"
    					style="z-index: 7;text-transform:left;border-width:0px;">
    				</div>
    			</li>
    			
    		</ul>
    	</div>
    </div>

    Note that I had to change the height of the slide to show the bottom bar and making the video full-width.

    Kind Regards,

    Jonas


    in reply to: Old Shop Demos #10023514
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: google map #10023505
    Support
    Keymaster

    Hello, thanks for your purchase.

    The problem is that Google Maps is not finding your address.
    In that case, we need to set the position of marker with latitude and longitude.
    Change the map marker code to this below:

    var mapMarkers = [{
    	latitude: 37.09024,
    	longitude: -95.71289,
    	html: "<strong>...</strong><br>....",
    	icon: {
    		image: "img/pin.png",
    		iconsize: [26, 46],
    		iconanchor: [12, 46]
    	},
    	popup: true
    }];

    *** Change the latitude and longitude with the correct values.

    Find the Latitude and Longitude of your address:
    http://universimmedia.pagesperso-orange.fr/geo/loc.htm
    http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/

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

    Kind Regards,

    Jonas


    in reply to: More padding needed #10023504
    Support
    Keymaster

    Hello, to add a custom padding you can create a custom class, for example: “custom-addrs-padding” add in that element and then add that to css/custom.css file:

    .custom-addrs-padding {
    	padding-left: 60px;
    }

    Kind Regards,

    Jonas


    in reply to: demo form in lightbox #10023497
    Support
    Keymaster

    Hello, thanks for your purchase.

    That form in the shortcodes example is not functional (does not have the PHP part), but you can easily replace that form with the contact form, from contact us page and just add the fields you want to use.

    * Make sure you include the file js/view.contact.js in that HTML page as well.

    ** To learn how to add new fields in the contact form please check this: http://www.okler.net/forums/topic/how-to-add-fields-to-the-contact-form/

    Best Regards,

    Jonas


    in reply to: youtube videos not working with revolution slider #10023496
    Support
    Keymaster

    Hello, you can see an example of that in this URL: http://okler.net/tests/porto/5.5.0/test-video.html

    <div class="slider-container rev_slider_wrapper">
    	<div id="revolutionSlider" class="slider rev_slider" data-plugin-revolution-slider data-plugin-options='{"delay": 9000, "gridwidth": 1170, "gridheight": 500}'>
    		<ul>
    			<li data-transition="fade">
    				<img src="img/slides/slide-bg-text-video.jpg"  
    					alt=""
    					data-bgposition="center center" 
    					data-bgfit="cover" 
    					data-bgrepeat="no-repeat" 
    					class="rev-slidebg">
    
    					<div class="rs-background-video-layer" 
    						data-forcerewind="on" 
    						data-volume="mute" 
    						data-ytid="8dTzy_N0Pn4" 
    						data-videoattributes="version=3&amp;enablejsapi=1&amp;html5=1&amp;hd=1&amp;wmode=opaque&amp;showinfo=0&amp;rel=0;;origin=http://okler.net;" 
    						data-videorate="1" 
    						data-videowidth="100%" 
    						data-videoheight="100%" 
    						data-videocontrols="none" 
    						data-videostartat="00:06" 
    						data-videoendat="01:40" 
    						data-videoloop="loop" 
    						data-forceCover="1" 
    						data-aspectratio="4:3" 
    						data-autoplay="true" 
    						data-autoplayonlyfirsttime="false" 
    					></div>
    					
    			</li>
    		</ul>
    	</div>
    </div>

    Best Regards,

    Jonas


    in reply to: Main color and header change in HTML version #10023495
    Support
    Keymaster

    Hello,

    1) Please check this topic: http://www.okler.net/forums/topic/how-to-use-a-skin/ – You will see how to generate a skin.

    2) You can just replace the HTML itself, copy the HTML part from the other header and replace the old one in your current files.

    Kind Regards,

    Jonas


    in reply to: Centering address content #10023494
    Support
    Keymaster

    Hello, you can add the text-center class in any element you want to center, for example:

    <h4 class="mt-3 mb-0 text-center">New York</h4>

    Best Regards,

    Jonas


    in reply to: Advanced Tables (Basic Table with Tools) #10023465
    Support
    Keymaster

    Hi,

    Files:
    – examples.datatables.tabletools.js
    – vendor/datatables (you need to update the HTML to get the correct files are well)

    Let me know if the problem persists,

    Kind Regards,

    Jonas


    in reply to: Advanced Tables (Basic Table with Tools) #10023461
    Support
    Keymaster

    Hello, really sorry about that issue, we have made some tests and fixed the problem.

    Please download the latest version on ThemeForest and let me know if the problem persists.

    We also updated the preview (clear cache before test): http://preview.oklerthemes.com/porto-admin/2.0.0/tables-advanced.html

    Best Regards,

    Jonas


    in reply to: Need Example Demos Shop #10023426
    Support
    Keymaster
    This reply has been marked as private.
    in reply to: Need Example Demos Shop #10023415
    Support
    Keymaster

    Hello, I’m sorry about that, but we removed permanently the old shop demos from Porto. From version 6.0.0 the shop demos won’t be available anymore. If you need the old files (compatible with BS3), let us know.

    Best Regards,

    Jonas


    Support
    Keymaster

    Hello, thanks for the message.

    The update to the new Bootstrap 4 requires major changes in the HTML.

    You can check all the changes that were done by the Bootstrap team in this link: https://getbootstrap.com/docs/4.0/migration/ – Note that they have changed several things.

    The differences, mainly in the grid system are explained in this link:
    https://www.quackit.com/bootstrap/bootstrap_4/differences_between_bootstrap_3_and_bootstrap_4.cfm

    Unfortunately there’s no easy way to update the theme other than doing it manually, updating all the vendor folders with the latest version of all plugins, update the JS and CSS files that come with the theme (theme.js, theme.init.js, theme.css, etc…) and then update the HTML itself, comparing the new classes and changing them.

    We recommend to use a “compare tool”, like this one: http://kdiff3.sourceforge.net/ – and use it to compare the folders (your current website and the new version).

    Best Regards,

    Jonas


    in reply to: Where to find Div and Class attribute info? #10023357
    Support
    Keymaster

    Hello, thanks for your purchase.

    I’m sorry, but I’m a little confused about that question, can you please explain it with more details?

    This is the css structure:

    • theme.css – (The basic layout structure styles)
    • theme-elements.css – (Elements such as sliders, boxes, titles, etc…)
    • theme-shop.css – (Shop Pages styles)
    • theme-blog.css (Blog Pages styles)
    • custom.css (Add all customizations into this file)

    Kind Regards,

    Jonas


    in reply to: how to update the template #10023356
    Support
    Keymaster

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

    Kind Regards,

    Jonas


    in reply to: Toggle-simple #10023331
    Support
    Keymaster

    Hello, my suggestion is to use another script for that we don’t change the standard toggles. Use something like this:

    https://tinyurl.com/y7v5tbg4

    Kind Regards,

    Jonas


    • This reply was modified 2 years, 1 month ago by  Support.
    • This reply was modified 2 years, 1 month ago by  Support.
    • This reply was modified 2 years, 1 month ago by  Support.
    in reply to: Loading Overlay #10023330
    Support
    Keymaster

    Hello, inside a tab you can set the following code:

    <div class="tabs">
    	<ul class="nav nav-tabs">
    		<li class="active">
    			<a href="#popular" data-toggle="tab"><i class="fa fa-star"></i> Popular</a>
    		</li>
    		<li>
    			<a href="#recent" data-toggle="tab">Recent</a>
    		</li>
    	</ul>
    	<div class="tab-content">
    		<div id="popular" class="tab-pane active">
    			<div  data-loading-overlay data-loading-overlay-options='{ "startShowing": true, "css": { "backgroundColor": "#FFF" } }' style="min-height: 150px;">
    				<p>Popular</p>
    				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    			</div>
    		</div>
    		<div id="recent" class="tab-pane">
    			<p>Recent</p>
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitat.</p>
    		</div>
    	</div>
    </div>

    Kind Regards,

    Jonas


    in reply to: Pagination #10023329
    Support
    Keymaster

    Hello, thanks for your purchase.

    You mean the “Load More” button, right? That button is actually an ajax call to the page: demo-real-estate-ajax-load-more.html – Please note that the server side integration of it is not included in the HTML Template, but you basically need to consider that the page that is called is set in the file: demo-real-estate.js – Line 127, you an change that if you want.

    I hope that helps.

    Kind Regards,

    Jonas


    in reply to: Drop files here to upload #10023328
    Support
    Keymaster

    Hello, you can change all the strings, just add this JS:

    (js/theme.custom.js)

    Dropzone.prototype.defaultOptions.dictDefaultMessage = "Drop files here to upload";
    Dropzone.prototype.defaultOptions.dictFallbackMessage = "Your browser does not support drag'n'drop file uploads.";
    Dropzone.prototype.defaultOptions.dictFallbackText = "Please use the fallback form below to upload your files like in the olden days.";
    Dropzone.prototype.defaultOptions.dictFileTooBig = "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.";
    Dropzone.prototype.defaultOptions.dictInvalidFileType = "You can't upload files of this type.";
    Dropzone.prototype.defaultOptions.dictResponseError = "Server responded with {{statusCode}} code.";
    Dropzone.prototype.defaultOptions.dictCancelUpload = "Cancel upload";
    Dropzone.prototype.defaultOptions.dictCancelUploadConfirmation = "Are you sure you want to cancel this upload?";
    Dropzone.prototype.defaultOptions.dictRemoveFile = "Remove file";
    Dropzone.prototype.defaultOptions.dictMaxFilesExceeded = "You can not upload any more files.";

    Kind Regards,

    Jonas


    in reply to: Font changes #10023327
    Support
    Keymaster

    Hello, I’m not sure if I understand the question but please check this topic:

    It may be helpful.

    Kind Regards,

    Jonas


    in reply to: How do I create GRID menu #10023275
    Support
    Keymaster

    Hello, you can use the dashboard html as an example:
    http://preview.oklerthemes.com/porto-admin/1.7.0/

    Note that we use images and text below, you can use similar HTML to make that menu.

    Kind Regards,

    Jonas


    in reply to: How do I set background for the content area #10023274
    Support
    Keymaster

    Hello, I’m not sure I understand the question, but if you want to add a background in the content area you need to add the following css:

    .content-body {
    	background: url('......') no-repeat;
    	background-attachment: fixed;
    	background-position: center center;
    	background-size: cover; 
    }

    Best Regards,

    Jonas


    in reply to: Menu color not changing #10023273
    Support
    Keymaster

    Hello,

    To make that work you need to change the <body> tag to:

    <body data-target="#header" data-spy="scroll" data-offset="100">

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

    Kind Regards,

    Jonas


    in reply to: Images not showing & error with Google Maps #10023271
    Support
    Keymaster

    Hello, thanks for your purchase.

    1) The images are not included in the theme (it works the same way for all themes on ThemeForest), the images are just for the preview website. That information is at the theme description. On zip package that you downloaded comes only the placeholders of images.

    2) To make the map to work you need to generate a API Key, please check this topic to see how to do that: http://www.okler.net/forums/topic/how-to-setup-google-maps-api-key/

    Kind Regards,

    Jonas


    in reply to: Dynamically generating theme.css #10023270
    Support
    Keymaster

    Hello, we provide the main SASS files that generate the main style of the theme and also the .LESS files that controls the colors, using the style switcher. I’m not sure if aspNet have some script to generate the compiled version of the sass/less files, but you can find the source code at:

    LESS: assets\vendor\style-switcher\less
    SASS: assets\stylesheets\sass

    Kind Regards,

    Jonas


    in reply to: how to autoslide latest news crousel #10023241
    Support
    Keymaster

    Hello, thanks for your purchase.

    To set the autoplay option you need to change the carousel:

    FROM:

    <div class="owl-carousel owl-theme mb-none" data-plugin-options="{'items': 1}">

    To:

    <div class="owl-carousel owl-theme mb-none" data-plugin-options="{'items': 1, 'autoplay': true, 'autoplayTimeout': 3000}">

    You can also set the autoplayTimeout with the delay.

    Kind Regards,

    Jonas


    in reply to: Issues with contact form #10023240
    Support
    Keymaster

    Hello, you can set the marker with lat/long values instead of address. Please check this topic:

    Best Regards,

    Jonas


    in reply to: Incorrect order in data-sort ordered list #10023170
    Support
    Keymaster

    Hello, to keep the same order and not use the masonry mode, please add this:

    (js/custom.js)

    $.extend(theme.PluginSort.defaults, {
    	"layoutMode": "fitRows"
    });

    Kind Regards,

    Jonas


    in reply to: Panels #10023169
    Support
    Keymaster

    Hello, for me it looks like this:

    Please describe how you want to show it.

    Kind Regards,

    Jonas


    in reply to: Load more #10023168
    Support
    Keymaster

    Hello, the content that is loaded when the “Load More” button is pressed comes from this page: /ajax/demo-one-page-agency-ajax-load-more.html

    That HTML must have the content that you want to show.

    Kind Regards,

    Jonas


    in reply to: Urgent need to turn in work in 3 hours. #10023167
    Support
    Keymaster
    in reply to: How to setup tab-navigation #10023153
    Support
    Keymaster

    Hello, thanks for your purchase.

    It uses the default bootstrap taps plugin with a customized style that is included in the core css files, it should be working.

    Please send us the URL of your site so we can check that for you.

    Kind Regards,

    Jonas


    in reply to: Mailchimp is not working #10023131
    Support
    Keymaster

    Hello, thanks for your purchase.

    Please send us a private message with the URL of your site.

    Kind Regards,

    Jonas


    in reply to: Including worpress posts like in static example #10023130
    Support
    Keymaster

    Hello, thanks for your suggestion, we will consider that for the future.

    Kind Regards,

    Jonas


    in reply to: Contact Form Advanced in html file? #10023095
    Support
    Keymaster

    Hello, great. Please let me know if you have any other questions.

    Kind Regards,

    Jonas


    in reply to: Add video to right side of page #10023094
    Support
    Keymaster

    Hello, this is how you can do that:

    HTML:

    <section id="overview" class="section custom-background-color-1 custom-background-style-1 m-none">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-8 col-sm-8">
    				<div class="custom-top-title-box">
    					<span class="text-color-light font-weight-semibold">CHECK OUT THE ONLY</span>
    					<h1 class="text-color-light">Mobile App</h1>
    					<span class="text-color-light font-weight-semibold mb-xlg">You will ever need!</span>
    					<a href="#downloads" class="btn custom-btn-style-1 text-color-light mb-xlg" data-hash>GET STARTED</a>
    					<a href="#key-features" class="btn btn-primary custom-btn-style-1 _borders text-color-light ml-sm mb-xlg" data-hash data-hash-offset="62">KEY FEATURES</a>
    					<span class="custom-as-seen text-color-light mt-lg">AS SEEN ON</span>
    					<img src="img/demos/app-landing/logos/logo-1.png" style="max-width: 120px;" alt class="img-responsive pull-left mt-xlg" />
    					<img src="img/demos/app-landing/logos/logo-2.png" style="max-width: 120px;" alt class="img-responsive pull-left mt-xlg" />
    				</div>
    			</div>
    			<div class="col-md-4 col-sm-4 col-xs-8 col-sm-offset-0 col-xs-offset-2">
    				<a href="https://vimeo.com/178747566" class="play-video-custom popup-vimeo">
    					<img src="img/image-.jpg" class="img-responsive" />
    				</a>
    			</div>
    		</div>
    	</div>
    </section>

    JS:
    (js/custom.js)

    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
    	type: 'iframe',
    	mainClass: 'mfp-fade',
    	removalDelay: 160,
    	preloader: false,
    
    	fixedContentPos: false
    });

    Best Regards,

    Jonas


    in reply to: Icon color in timeline #10023093
    Support
    Keymaster

    Hello, to change the icon and the border color you need a custom css:

    <div class="tm-icon tm-icon-custom">
    	<i class="fa fa-star text-secondary"></i>
    </div>
    .timeline .tm-items > li .tm-icon-custom {
        border-color: #000;
        color: #000;
    }

    Kind Regards,

    Jonas


Viewing 500 posts - 1 through 500 (of 8,205 total)