Discussion on Overlap - High Performance WordPress Theme

Discussion on Overlap - High Performance WordPress Theme

By
Cart 1,531 sales
Well Documented

Wyde supports this item

Supported

1305 comments found.

Hi there, I think I may have struck this issue before with the sliding bar – when the button/link “purchase now” is hovered over, it disappears (maybe it’s set to white text on hover?) Can I have a fix for this please? Hover colour needs to be ##ff0000 on my theme. Many thanks.

Here’s the shortcode for the button that you’re looking for:


[wyde_link_button style="none" size="large" title="Purchase Now" link="url:http%3A%2F%2Fthemeforest.net%2Fitem%2Foverlap-high-performance-wordpress-theme%2F15344205%3Fref%3DWyde||" hover_color="#ff0000"]

Also, I would recommend using the page builder to build the content for the Text widget. You may need to create a blank page first, then add a button and choose the settings for it. Switch to the Classic mode and select the Text tab in the Text Editor, then copy the code and put it into the Text widget on the Sliding bar.

Header/Navigation Hi support…I’ve been trying to work out the best way to recreate the following menu layout: https://align1solutions.com/product/muuv/ with your theme. I’ve arrived at possibly using the sidebar for the menu on desktop, with a regular menu (hidden on desktop) and reverse for both on mobile.

My question is whether I can hide specific menu items on desktop or its an “all or nothing” approach? Other themes offer a top header section where I could place the phone number but I don’t think this theme offers this – correct me if I’m wrong as it would be a really simple solution!).

I’ve loaded the personal portfolio demo (if I can hide the menu and specific items still remain visible) so would need to now switch to the standard menu style – what’s the best way to do this? Regards

That menu layout is not available in this theme. This theme comes with only 3 navigation layouts and doesn’t have a top bar to show the phone number as you can see in our demos. This is only available in our new theme called “Aoraki”: https://themeforest.net/item/aoraki-multiconcept-business-wordpress-theme/19652714

To hide specific menu items on desktop, you will need to put an extra CSS class named hidden-lg into the CSS Classes field of the menu item. That field is hidden by default, you can enable it under the Screen Options in the top right corner of the menu edit screen, select “CSS Classes” so that field will show up in the menu item setting box. Put hidden-lg to that field to hide the menu item on desktop.

Also, here are extra CSS classes to hide it on other screens:

hidden-lg    = Large (desktop)
hidden-md  = Medium (laptop, tablet landscape mode)
hidden-sm  = Small (tablet portrait mode)
hidden-xs   = Extra small (mobile).

Hi thanks, I thought I’d found the perfect solution to my layout issues with this! However, adding the css into the menu also now hides it in my sliding bar (which I’m using for the desktop menu system) argh! Is there any way to further specify? I To be clear, I want my full menu to show in my sliding bar on desktop/large screens, only two items to be visible in the actual menu (across the header area), with all the menu items to be visible on mobile and act normally as per the template…. thanks SO much for your assistance on this one…

Unfortunately, you couldn’t adjust this by using a built-in extra CSS class from the theme. You will need to add custom CSS to style.css in your child theme to hide specific menu items. However, this is a theme modification, you will need to do it yourself and at your own risk.

Hi, I’d like my menu to be capitalised (rather than all caps)...what’s the css snippet for this or the place to set it? Cheers.

Here you are:

.vertical-menu > li > a, 
.vertical-menu .back-to-parent span {
    text-transform: capitalize;
}

Hi support I have a question regarding shop thumbnails – under the Woocommerce, Products settings it has 3 options: 1:1, custom or uncropped, but I’m not seeing any chances to my thumbnails when selecting these options. Would you mind explaining them? Also, what is the size to upload an image (for both main image and thumbnail? TIA

Those thumbnail settings are for product images on your product archives (catalog). The size of gallery thumbnails on the product single page couldn’t be changed. You can find more details about those 3 options in the link below: https://woocommerce.wordpress.com/2017/12/11/wc-3-3-image-size-improvements/

Hi support

I’m wanting to style the buttons on just a single page, not throughout the site to capitalised. What is the css snippet please? I assume I put it in the extra css settings under the button element. Do I need to put it anywhere else? Regards

(I tried this css snippet but didn’t have much luck? text-transform: capitalize)

Thanks in advance.

You should add CSS snippet to the Page Settings so it will affect only the elements on that page.

1. Click on a gear icon in the top right of the page builder toolbar, see the picture below:

2. Put the snippet below to the CSS Settings in the Page Settings window:

.w-button {
    text-transform: capitalize;
}

Hope this helps!

Hi, thanks…I am wanting to style it more specifically ie only certain buttons on a page lol (otherwise the above would be great)..Is this possible at an individual button level? Sorry I wasn’t more clear in my original question…

Here’s a quick tip:

1. You will need to add custom CSS class to the CSS Settings as I provided above. For example:


.custom-button {
  text-transform: capitalize;
}

2. Put the class name custom-button into the Extra CSS Class field in the element settings window when you edit the button or any other content elements.

Hi is it possible to add additional images into the product page/post? I have three inserted (as a gallery and using columns shortcodes) but the last image sits lower (although fits alongside) than the other two. Not really sure how to achieve the look I’m after. Happy to send screenshot if needed.

ok, that’s great. I’ve switched to this method. However, my row is set is ‘full width’ but isn’t showing as full width (is this a shop page template setting?)

Hi again, have switched it all over, the product looked ok on preview but now isn’t showing any of the information (inside the page builder), only the image… not showing the product short info either. Help please?

1. The fullwidth row is not available in the single post template including single product, it always displays as a boxed layout even you choose fullwidth for the row.

2. Looks like you’ve figured it out, everything seems to work well on your product page.

Hi, is there a zoom on hover option available for the main product image? Where do I set this? Regards

We’re sorry but the zoom option is not available in this theme, it doesn’t support.

Hi, regarding shop thumbnails (gallery)...If I want to set them to display within a 150×262 window (original image uploaded at 510×892), what’s the best way to do this? TIA

The size of shop thumbnails is defined by WooCommerce plugin. Unfortunately, it is set as squared thumbnails and always be 100×100px.

Hi,

I have three requests from my clients:

1) We need to modify “Overlap Slider” – need to eliminate bullets on the bottom (we have too many pictures) – need to scale down the big arrow: 1/3 thickness and 1/2 dimension

2) We would like to use “Uranus” arrows in Home page “Slider Revolution”, but we would like to have the possibility to change their color

3) We would like to keep the header fixed without the changing of dimension with mouse scrolling.

Thank you very much for your help.

Also, if possible, the header with an alpha effect…

4) We would like to use “Ares” bullets in Home page “Slider Revolution”, but we do not want the title appears on mouse over the bullet…

Again… thank you so much!

1) You may need to add CSS snippet below to Appearance -> Customize -> Additional CSS to adjust this:

.w-slider-dots {
    display: none;
}

.w-slider-nav a:after {
   font-size: 75px;
}

2) It seems like the color option is not available for the Uranus arrows, only the Background Color is. Unfortunately, those settings are built-in settings from the Slider Revolution plugin, we couldn’t adjust this for you. However, if you’d like to change it, you will need to add CSS snippet below to Appearance -> Customize -> Additional CSS to achieve this:


.uranus.tparrows:before {
    color: red;
}

3) You can change only the height of the sticky header. Here’s CSS snippet to set the height of the sticky header to the same as the normal header:


#header.w-scrolled .container, 
#header.w-fixed .container {
    height: 85px;
}

4) Try adding CSS snippet below to see if it works:


.ares .tp-bullet-title {
    display: none;
}

Hi, i’d like to add more padding between my product main image and the product details to the right (it seems a bit squished). Can I adjust this somehow? Regards

Try adding CSS snippet below to see if it works:

@media only screen and (min-width: 992px) {

.product .images {
    margin-right: 80px;
}

}

Great! Thanks :-)

Hi, I’d like to hide my product title and the amount/price showing underneath. How is this achieved please? TIA

That’s perfect! Thanks. Is there a way to also hide the breadcrumb: ‘Shop/Category/Product’... Cheers?

Here’s snippet to hide the breadcrumb on shop and product pages:


.woocommerce-breadcrumb {
    display: none;
}

cheers

Hi there, I’m using the personal portfolio layout (with the menu showing as in hamburger style at right). However, when I change my header to light (under theme settings), the hamburger shows as white (so, not visible) but then shows up in my theme colour on hover. I would prefer it displays as the theme colour (#e20000) OR white but inside a boxed background (in my theme colour #e20000). How can I achieve this? I also noticed that when changing to the ‘light’ header colour, the menu opens up against the theme coloured background (#e20000) when previously it was a dark background. I’d prefer the later…can I adjust this with css?? Thanks and regards

We’re sorry but you couldn’t adjust this under the theme options panel and this is not included in the theme design. You will need to modify template files in your child theme to achieve this.

However, the theme modification and customization are not included in the theme support, you will need to do it yourself and at your own risk.

ok, could i get around this then by setting a dark header in navigation, but on a page level setting header to transparent and then specifying the sliding bar colour? (now styled as hamburger menu)

Try adding snippet below to see if it works:

#slidingbar {
    background: #ff0000;
    color: #fff;
}

Hi, i have duplicated a page and recreated a simliar page. I have inserted a rev slider in the new page but for some reason its showing with a thin white gap either side (even though the row is set to full width). The page settings are the same as the original page I duplicated from and the sliders on that page are showing fine. I’m a bit stumped as to what the issue could be? Can you take a minute to check this issue? Regards

You have to set the Padding Size in the column settings to No Padding to remove the gap from both sides of the column. To set this option, you have to edit the column, not the row.

HI, I’d like to specify font size and line height within a specific row (using text block and paragraph style)...what’s the best way to achieve this? Cheers,

The Text Block uses default WordPress text editor to edit the text and headings. Unfortunately, it doesn’t have font size and line height options. I would recommend using the Custom Heading instead. You can change the Element tag to “p” to add plain text and paragraph.

Hi, i have three images (equal size) which I want to display side by side (full width) with no spaces in between – what’s the best way to set this up in this theme? Row with 3 columns (no space between columns? – that option doesn’t seem to be available in the row settings?) or as a gallery? TIA Regards Carrie

I would recommend adding them to a row with 3 columns because when adding to the Image Gallery, it will show the full size in the lightbox when you click on each image.

To get rid of the space between columns, you have to set the Padding Size option for each column to No Padding. This option is in the column settings window when you edit the column.

perfect, thanks!

Hi, I’d like to specify the size of my H4 – that option doesn’t seem available in the theme settings. How do I achieve this please? Thanks

The size of headings is not available in the theme settings because they might have different sizes in different content elements and parts. I would recommend using the Custom Heading element so you can set the font size including other font styles for the headings.

However, if you’d like to change default font size for H4 in the Text Block and the blog post content, you will need to add CSS snippet below to achieve this:

h4 {

font-size: 26px;

}

thanks :-)

Hi support, I seem to be having issues with revolution slider. It works when inserting the slider shortcode via a text element but not when using the Visual Composer Element and selecting the slider alias… I haven’t struck this problem before – do you know if there is a current issue or bug? I downloaded Overlap yesterday so am assuming the Slider Revolution plugin (Version 5.4.7.3) is the latest version. Your help would be appreciated. Thanks and regards, Carrie

my bad. have fixed this. error was my end…lol

Hi there, Just wanting to change the background colour of my contact 7 form text input fields (to #808080 with text colour of #e6e6e6)...how/where do I set this please? Cheers

Thanks for the tip! Cheers – problem resolved :-)

Just quickly revisiting the initial snippet… I have changed the background and colour values (the rest of the snippet remains the same) but the label text (ie “email”, “name” etc) doesn’t seem to change colour (the input text seems right) – am I missing something?

That is a placeholder text for the input field, you will need to add snippet below to change it:


::-webkit-input-placeholder {
    color: #fff;
}

::-moz-placeholder {
    color: #fff;
}

:-ms-input-placeholder {
    color: #fff;
}

input:-moz-placeholder {
    color: #fff;
}

Hi, I’m having trouble accessing the site’s live previews and demo content – has the overlap theme been made redundant??

Hi,

It’s now online and we can access the site’s live previews and can import demo content too. This might be an issue with our VPS or CDN, please try it again to see if it works.

Hi support team,

1 – Yes I’m talking about the Slider element https://wydethemes.com/overlap/elements/overlap-slider/

The function you gave me is ok, but probably there was a misunderstanding… I’m talking about the fading effect at the bottom, the one that slightly covers the photos to allow you to insert some text: we do not have any text to insert and the photos have to look good, without the fading that lightens them …

you can see this link: https://test2.rivierestyle.it/collection/ and scroll down till the voices “Vassoi”, “Portacenere”, “tazzina”

My bad! I thought that the fade effect of the slider’s transition :)

Anyway, you can add CSS snippet below to Appearance -> Customize -> Additional CSS to remove the fade effect at the bottom of the slider:

@media only screen and (min-width: 992px) {

.w-slide:after {
  display: none;
}

}
by
by
by
by
by
by

Tell us what you think!

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

Sure, take me to the survey