Hi there,

Those icons are web font icons, to use custom icons, you will need to upload the custom font files to your web hosting.

Here are the instructions on how to add custom font icons to the theme.

1. Install and activate the Overlap Child theme, overlap-child-theme.zip. You will find that zip file in the download package.

2. Upload your custom font files ( e.g. ‘custom-icons.woff’ ) to your child theme folder on your web server “wp-content/themes/overlap-child-theme/fonts/custom-icons.woff”.

3. Add the font CSS to style.css in your child theme.

For example:

@font-face {
  font-family: 'your-font-name';
  src: url('fonts/custom-icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="custom-icon-"]:before, [class*=" custom-icon-"]:before {
    font-family: 'your-font-name';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.custom-icon-1:before { 
  content: '\e800';
}

.custom-icon-2:before { 
  content: '\e801'; 
}

4. Add custom function to functions.php in your child theme:

/** 
 * Add CSS file to admin page.
 */
function overlap_load_admin_css() {
    // Add child theme stylesheet file
    wp_enqueue_style( 'overlap', get_stylesheet_directory_uri() . '/style.css', null, '1.0' );
}
add_action( 'admin_enqueue_scripts', 'overlap_load_admin_css' );

/** 
 * Add your custom icons to the Icon Picker.
 */
function overlap_add_simple_line_icons( $icons ){

    $custom_icons =  array(
        array( 'custom-icon-1' => 'Custom 1' ),
        array( 'custom-icon-2' => 'Custom 2' ),
    );        

    return array_merge_recursive( $icons, $custom_icons );

}
add_filter( 'vc_iconpicker-type-simple_line', 'overlap_add_simple_line_icons' );

This will append your icons into Simple Line icon set.

First of all, please ensure that you’ve installed the Wyde Core plugin and you will need to log in as admin to access the Theme Options.

You will find the Theme Options menu in both WordPress admin bar (at the top of WordPress admin page) and the main menu (below the Slider Revolution) on your WordPress admin page.

If it is not available, there may be plugin conflicts on your site. If you have any other plugins, try to deactivate them to see if it works.

Hope this helps!

Thank you, it ended up just appearing on the dashboard after an hour or so. All sorted! Thank you

Glad to hear that the problem has been solved

This is a bug of the theme when the blog post doesn’t have a featured image. Thank you for reporting this issue, we will fix it in the next update of the theme.

In the meantime, you can add CSS snippet below to Appearance -> Customize -> Additional CSS to fix it right now if you’d like:

.w-blog-posts .no-cover:not(.format-quote) .post-title {
max-height: none;
}

Thanks, Wyde Team! It has fixed the issue.

Glad to hear that it works

Thank you for your interest in our theme!

Sure, you can turn on and off the One Page Site feature in Theme Options panel to switch between single page and multipage with just a click, so you can use the single page layout for the multipage site and can also use the multipage layout as a single page.

There may be plugin conflicts on your site because we can add new testimonials on our demo site correctly. If you have any other plugins installed, try to deactivate them to see if it works.

Also, the latest update of the Overlap theme 1.4.4 comes with Wyde Core 3.7.7, please ensure that both of them on your site are up-to-date.

The Wide Core update fixed it. I was running 3.7.5 with 1.4.4. Thank you.

Glad to hear that it has been fixed

It sounds like the zip file is too large to upload. Please ensure that you’re uploading the correct theme file.

Before downloading the theme file from the Downloads tab on ThemeForest, you have 2 options to download.

1. All files & documentation, if you choose this option, you will need to extract the zip file first, you will find the theme file named “overlap.zip” in the folder “WordPress Theme”. Upload the file overlap.zip to your WordPress site. You can find more details on installing the theme in our documentation.

2. Installable WordPress file only, this is a WordPress theme, you can upload that zip file directly to Appearance -> Themes on your WordPress admin page.

However, if you couldn’t upload the theme zip file, it means that your site has the low PHP limits, you may need to increase the maximum file upload size on your WordPress site. The easiest way is using the PHP Settings plugin ( https://wordpress.org/plugins/php-settings/ ) to increase the PHP settings on your site to the minimum as follows:

max_execution_time = 300

memory_limit = 128M

post_max_size = 32M

upload_max_filesize = 32M

max_input_vars = 5000

Also, you can find more details on how to increase the maximum file upload size manually in the link below:

https://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/

Thanks, I have followed these instructions, installed the plugin and updated the PHP settings. However, the max_execution_time is the only one not changing and remains at 0. Any tips? I have tried to search for answer online but nothing has worked thus far.

If your site is running on a share hosting, some of them do not allow changing the max_execution_time limit. However, if you’ve changed the upload_max_filesize, you should be able to upload the theme to your site now. You can find more details on how to check the maximum file upload size limit in the link below:

https://www.wpbeginner.com/wp-tutorials/how-to-increase-the-maximum-file-upload-size-in-wordpress/

The menu widget has extra space at the bottom by default, this adds the vertical space on mobile. Thank you for reporting this issue, we will fix it in the next update.

In the meantime, you can add CSS snippet below to work around this:

#footer .widget,
#footer .wpb_content_element {
    margin-bottom: 0;
}

cheers thanks

hi, so I’ve fixed the display issue for mobile but the gallery doesn’t seem to function properly. It navigates through the first two images then loops quickly through to the end, can arrow backwards one image only and kinda gets ‘stuck’. I don’t know if it needs additional settings or whether there’s some kind of glitch – would you mind checking?

Also the thumbnails seem really blurry, particularly on desktop – do I need to adjust a setting somewhere else?

Sorry for the delayed response!

1 – That is a bug of the jQuery Owl Carousel, this issue has been fixed in the next update of the theme that will be released in a couple of days.

2 – You can change the Image Size for the Image Gallery to Medium or bigger, those images will be bigger and won’t be blurry.

Here’s CSS snippet to remove it:

.w-heading.heading-7.text-left .heading-title:before,
.w-heading.heading-7.text-right .heading-title:after {
        display: none;
}

Edit the Travel Blog slider in the Slider Revolution on your WordPress admin page. On the slide edit screen, click on that vertical line, then click the “+” button in the Style tab to activate the advanced styling section, choose new background color in the Background tab, you can see more details in the link below:

https://www.themepunch.com/revslider-doc/layer-styles-positioning/#background-advanced

ah, thanks! so easy when you know how! cheers

That error in the screenshot you provided is not a theme related issue. It’s most likely a server issue. It couldn’t load resource files from your web server.

Anyway, you can edit the error 404 template in your child theme, here’s a quick guide:

1. Please ensure that you’ve installed the Overlap Child theme.

2. Open a cPanel File Manager or FTP to copy the template file from the Overlap theme “wp-content/themes/overlap/404.php” to your child theme “wp-content/themes/overlap-child-theme/404.php”.

3. Edit that template file in your child theme to suit your needs.

If it still doesn’t work, you may need to send me your site URL so I can take a closer look.

It sounds like this is not a theme issue. Actually, you can normally use the WooCommerce template (3.3.0) that’s included in the theme with the latest update of WooCommerce plugin without any problem as you can see in our demo site: https://wydethemes.com/overlap/shop/ Try to update your WordPress site and the theme including all bundled plugins to the latest update to see if it works.

If it still doesn’t work, it might be a plugin related issue, try to deactivate the plugins one by one to find the problematic plugin.

Anyway, we will update WooCommerce template that’s included in the theme in the next update.

There is custom CSS on your site that sets the color of H1 to white, this makes the product title is white so you couldn’t see it.

haha too funny. Didn’t think of that. Have changed now and its perfect. Thanks

hey so I’ve just noticed that implementing the above changed the active menu colour for my product (which is shown as ‘shop’) in the main menu to blue (throughout the rest of the site the active menu colour shows as yellow)...where do I set this please or css to amend? cheers.

Apology! This is a bug of the theme. Thank you for reporting this issue, we will fix it in the next update.

In the meantime, you may need to add custom CSS below to Appearance -> Customize -> Additional CSS to work around this:

#header #top-nav li.current-menu-item > a {
    color: #f8cd53;
}

ok thanks for the css fix.

Thank you for your interest in our theme.

1 – Sure, it is included in the Overlap settings, you can change both direction and distance options.

2 – The overlap elements are working only on laptop and desktop (screen sizes bigger than 992px). All overlap settings are disabled on mobile and tablet by default. You can see how it works when you visit our demo site on mobile.

Awesome, thank you!! I’ll reach out if I have any other questions.

You’re welcome

http://www.dustybarreldistillery.com.au/our-story/ – does it look right to you? I can provide login access if you need?

I couldn’t access your site, it requires login access. You may need to send a private message in the contact form on the profile page below:

https://themeforest.net/user/wyde#contact

Thanks for the login access!

The first footer bar layout is taller than others, you may need to add custom CSS below to reduce the height of it:

.footer-v1 {
    padding: 0 0 20px 0;
}

The comments page has changed some tags in the code. Actually, it should be: <a href="mailto:email@domain.com"><i class="ol-mail"> </i> email@domain.com</a> However, the code I provided is only for the Contact Info section in Theme Options -> Navigation -> Contact Info Items. If you’d like to set it to the link (e.g. menu item, link button) directly, you have to put only the link like below:

mailto:email@domain.com

hi, yes, the comments did change the tags in the code. However, I do have the correct code as above in the theme options – navigation – contact info section, but the envelope icon shows yellow (the other two icons show as white). I’d like it to be consistent please – how do I achieve this?

That’s because the email is a link, other two icons are plain text. You have to add CSS below to change the link color to white:

#side-nav .contact-info li a {
    color: #fff;
}

You may need to edit the single portfolio template file in your child theme as below:

1. Please ensure that you’ve installed the overlap-child-theme.zip on your site.

2. I would recommend you to edit the “Gallery” layout because it displays the Clients, Categories and Skills below the portfolio content so it is easier than others. You will need to open a cPanel File Manager or FTP to copy the template file from your Overlap theme “wp-content/themes/overlap/templates/portfolio/single-gallery.php” to your child theme “wp-content/themes/overlap-child-theme/templates/portfolio/single-gallery.php”.

3. Edit that template file in your child theme as follow: Replace:

<div class="post-description row">
            <div class="col col-12">
                <div class="col-inner">
                <?php overlap_portfolio_widget('meta'); ?>
                </div>
            </div>
            <div class="col col-3">
                <div class="col-inner">
                <?php overlap_portfolio_widget('categories'); ?>
                <?php overlap_portfolio_widget('skills'); ?>
                </div>
            </div>
            <div class="col col-8 col-offset-1">
                <div class="col-inner">
                <?php overlap_portfolio_widget('clients'); ?>
                <?php overlap_portfolio_widget('fields'); ?>
                </div>
            </div>
        </div>

With:

<div class="post-description row">
            <div class="col col-4">
                <div class="col-inner">
                <?php overlap_portfolio_widget('meta'); ?>
                </div>
            </div>
            <div class="col col-4">
                <div class="col-inner">
                <?php overlap_portfolio_widget('categories'); ?>
                <?php overlap_portfolio_widget('skills'); ?>
                </div>
            </div>
            <div class="col col-4">
                <div class="col-inner">
                <?php overlap_portfolio_widget('clients'); ?>
                <?php overlap_portfolio_widget('fields'); ?>
                </div>
            </div>
        </div>

Hope this helps!

Hello,

The product demos are included in the WooCommerce plugin, you can import them in the Products screen on your WordPress admin.

You can find the instructions on how to import products in the link below:

https://docs.woocommerce.com/document/product-csv-importer-exporter/#section-3

You will find the sample products in the WooCommerce plugin zip file. Once you extract the file woocommerce.zip, you will see the file “sample_products.csv” in the folder “sample-data”.

Also, you can download the sample products file directly from GitHub in the link below:

https://raw.githubusercontent.com/woocommerce/woocommerce/master/sample-data/sample_products.csv

Right click on that page, select “Save as…” and then save it as “sample_products.csv”.

Choose the file “sample_products.csv” in the Import section on the Products screen.

If you’re using the Center menu layout, you can add custom CSS below to Appearance -> Customize -> Additional CSS to increase the width of the navigation bar:

.center-nav #top-nav .top-menu {
    padding-right: 120px;
    padding-left: 120px;
}

However, I would recommend you to use a short title menu and move some menu items to the sub menu (dropdown) so they can display on any screen sizes correctly.

As always, your code works just fine! Thank you very much.

Brilliant! Glad to hear that it works