Cornerstone, search and plugin conflict

Support
#1

Hi,

I’ve been testing a few knowledge base plugins and have a conflict when cornerstone is enabled.

The knowledge base plugins allow you to perform a search and when cornerstone is enabled the search returns multiples of the same results. See image: https://imgur.com/a/RxWv2qv

I’ve tested 5 knowledge base plugins and they all do the same thing.

I know support for third party plugins is not supported but have you seen this behavior before?

Any suggestions I could try would be greatly appreciated.

Thanks

Brad

#2

Hi Brad,

We’re sorry for the inconvenience. This is a known issue and a fix will be available on the next release. For the mean time, please check this thread for temporary solution. Thank you.

#3

Hey @Lely,

Thanks for letting know. I added the filter to my child themes functions.php and works perfectly!!

I’ll watch the change logs for fix.

Thanks

Brad

#4

Hi @Lely / Support,

I have two new issues on the same search results page.

When my search returns no results the header from my blog appears above the search box. See image in secure notes.

I thought I was hiding it with this code:

.search-results .x-header-landmark.x-container.max.width {
display: none;
}

but perhaps it’s not working because I use this code to display an image as my blog header:

.x-header-landmark {
margin: 15px auto 0;
height: 150px;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center center !important;
background-image: url(‘https://www.example/wp-content/uploads/2019/04/example-2.png’);
}

Thoughts?

Additionally the footer doesn’t stay on the bottom of the page on the results page despite me using this JS code:

jQuery(document).ready(function($) {
var $main = $(’.x-main’),
$windowHeight = $(window).outerHeight(),
$masthead = $(’.masthead’).outerHeight(),
$wpbar = $(’#wpadminbar’).outerHeight(),
$footer = $(’.x-colophon.bottom’).outerHeight() + $(’.x-colophon.top’).outerHeight();

$main.css(‘min-height’, $windowHeight - $masthead - $wpbar - $footer);
});

Thoughts?

Thanks

Brad

#5

Hello Brad,

I can see you have 2 sites. The first one, search looks like this not the one you describe above:

The second site is not accessible.
Although, yes, your custom CSS will affect all landmarks that display page title. When you say blog header, do you mean blog listing page or blog single post page. We can adjust those CSS to work specifically on those pages. Something like this:

.blog .x-header-landmark {  /*blog is default class of blog listing page*/
margin: 15px auto 0; 
height: 150px; 
background-color: #FFFFFF; 
background-repeat: no-repeat; 
background-position: center center !important; 
background-image: url('https://www.example/wp-content/uploads/2019/04/example-2.png'); 
}

.single-post .x-header-landmark {  /*single-post is default class of blog single post page*/
margin: 15px auto 0; 
height: 150px; 
background-color: #FFFFFF; 
background-repeat: no-repeat; 
background-position: center center !important; 
background-image: url('https://www.example/wp-content/uploads/2019/04/example-2.png'); 
}

For the footer issue, I can see min height is already added on main container

Hope this helps.

#6

Hey @Lely,

It’s the site that isn’t accessible. I’m in health care so unfortunately I can’t provide you access.

Adding “.blog”" removed the image from the search results, thank you!!!, but the search results header still appears. I thought this code should remove it? New image in secure notes.

.search-results .x-header-landmark.x-container.max.width {
display: none;
}

Any suggestions for lowering the footer on the search page? The JS code in my previous post works on every other page but the search results page.

Thanks

Brad

#7

Hi Brad,

The no result page has a different body class (search-no-results), please update your CSS code to this

.search-results .x-header-landmark.x-container.max.width,
.search-no-results .x-header-landmark.x-container.max.width {
	display: none;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

That should correct the calculation of your JS code above since there is no more x-header-landmark height in the equation.

Hope it helps,
Cheers!

#8

Hey @friech,

The code successfully removed the “no results” header but the footer is still not locked to the bottom on the no results page.

Any other ideas?

Thanks

Brad

#9

Hi Brad,

Try adding a minimum height using CSS:

.search .x-main.full {
    min-height: 1800px !important; /*Adjust the height value per your requirement */
}

Hope this helps.

#10

Hey @Lely,

Unfortunately that didn’t help but I think I might have figured it out by trial and error.

I’ll paste part of my source code in the secure notes but by adding an additional JS code directed at the div tag of my knowledge base plugin fixed the issue.

jQuery(document).ready(function($) {
var $main = $(’.mkb-root’),
$windowHeight = $(window).outerHeight(),
$masthead = $(’.masthead’).outerHeight(),
$wpbar = $(’#wpadminbar’).outerHeight(),
$footer = $(’.x-colophon.bottom’).outerHeight() + $(’.x-colophon.top’).outerHeight();

$main.css(‘min-height’, $windowHeight - $masthead - $wpbar - $footer);
});

Can you tell me if this is good practice for this solution?

Thanks

Brad

#11

Hello Brad,

To make sure that the footer will always stay at the bottom of the page, please remove the JS code. And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r) instead:

.site > .x-container.max.width.offset {
    min-height: calc(100vh - 374px);
}

The 374 pixels is the total height of the masthead, the landmark header and the footer.

Hope this helps. Please let us know how it goes.

#12

Hey @RueNel

I removed my JS code/s (tried removing both) and added the CSS to the global css and it didn’t work. I tried the code on my dev site too and it didn’t keep the footer down there either.

The JS codes are working. Are they not good practice?

Thanks

Brad

#13

Hello Brad,

The custom css is more efficient in resolving this issue. With JS code, it may not work some time especially if there are JS errors on the page. If the custom css do not work for you, I am sure that there is also a css conflict. Would you mind providing us the url of your site with login credentials so we can take a closer look and fix the issue?

To do this, you can make a post with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

#14

Hey @RueNel,

I tried the code again on my dev site. disabled all plugins, removed all JS, removed all global css. It still didn’t work so I started playing around with the values.

This (code below) worked for some pages, but not all.

.site > .x-container.max.width.offset {
min-height: calc(100vh - 100px);
}

I’d love to provide access but my site is HIPAA complaint. I’m in health care. I could potentially duplicate my dev site and strip it off all sensitive information if you don’t have any other suggestions?

Thanks

Brad

#15

Hi Brad,

That CSS doesn’t work on all pages probably because of different page template in use. Please try a more general selector like this:

.site > .x-container{
    min-height: calc(100vh - 374px);
}

If there are still pages where that CSS is still not working, please inspect that page and get the main content container class. Add it on that CSS. The following might help.

#16

Hey @Lely,

The selector appears to be x-main on two of the pages. But 374px doesn’t work. It works when I change it to 100px though.

I’ll play around with it and when I get it dialed in I’ll switch from the JS code.

Thanks @Lely, @friech and @RueNel for the support.

Brad

#17

We are delighted to assist you with this.

Cheers!

#18

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.