Docs

[crucialtim]

Hi,
I’ve noticed on this site that I’m building that the search results page uses a blog detail page as a template. In reading through this forum, I understand that the search results page uses these templates by default. I’m wondering how to modify the layout slightly to match the rest of my site.

Search results page: http://fts.crucialstaging.com/?s=PMP
I’d love to have the blog detail/search results page look like this: http://fts.crucialstaging.com/who-we-are/mission/ with the white background for body content and the same sidebar, instead of the blog-related sidebar.

[Rahul]

Hey There,
Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:
– WordPress Admin username / password
Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.
Thanks.

[crucialtim]

This reply has been marked as private.

[Rupok]

Hey there,

Thanks for writing back! I checked the possibility. Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[crucialtim]

OK…you guys helped me on another site (recently) with mods to the blog design. Anyway…I’ve mostly gotten this page to a place that I can live with by eliminating the main sidebar from the widgets page within WordPress, but the last thing I’m looking to do, for consistency across the site, is add in the phone number below the logo.

If you look here: http://fts.crucialstaging.com/why-fts/ or any other page on the site, you’ll see “Call us: 617.306.5766” right below the logo. How can I add that to the search results page? http://fts.crucialstaging.com/?s=PMP

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

(function($) {
   $('<h4 class="h-custom-headline cs-ta-center link-phone h4" style="color: #ffffff;font-family: \'Open Sans,\' sans-serif;font-size: 18px ;margin-top: -25px ;padding-top: 0;"><span>Call us: <a href="tel:16173065766">617.306.5766</a></span></h4>').insertAfter('.search .x-brand img');
})(jQuery);

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[crucialtim]

It’s working – just having some trouble matching the spacing, font size, and font weight exactly with the other pages.

[Christopher]

Hi there,

Please update your code to :

(function($) {
   $('<h4 class="h-custom-headline cs-ta-center link-phone h4" style="color: #ffffff;font-family: 'Open Sans,' sans-serif;font-size: 1.35em;margin-top: -60px;padding-top: 0;"><span>Call us: <a href="tel:16173065766">617.306.5766</a></span></h4>').insertAfter('.search .x-brand img');
})(jQuery);

Hope it helps.

[crucialtim]

Here’s what that looks like (attached)

I was close with what I had previously (which I’ve not put back in place). The font-weight is off, and possibly the letter spacing. I just came seem to get them to match.

[crucialtim]

Here’s what I’m seeing on the results page vs. what I see on all other pages (attached)

[Rupok]

Hi there,

Thanks for writing back. Let’s organize the suggested code a bit for better customization :

Add this under Custom > JavaScript in the Customizer.

(function($) {
   $('<h4 class="h-custom-headline cs-ta-center link-phone h4""><span>Call us: <a href="tel:16173065766">617.306.5766</a></span></h4>').insertAfter('.search .x-brand img');
})(jQuery);

Then add this under Custom > CSS in the Customizer.

.link-phone{
  color: #ffffff;
  font-family: 'Open Sans,' sans-serif;
  font-size: 1.35em;
  margin-top: -60px;
  padding-top: 0;
}

Now let’s change the CSS part according to your need. I hope it’s better now to understand and amend.

Cheers!

[crucialtim]

This gives me the same result as https://community.theme.co/forums/topic/search-results-page-layout-2/#post-1116387 above, Rupok. 🙁 The font on the results page is enormous.

[crucialtim]

One other question as well: how can I adjust the font weight of the main navigation so it matches the navigation on the footer of all pages? The main navigation font is lighter (thinner) than the footer.

I have both set to font-weight: 400;, so not sure why the main navigation isn’t taking.

[Paul R]

Hi,

You can try adding this in your Custom > Edit Global CSS in the customizer.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,800italic,300,300italic);

Hope that helps.

[crucialtim]

Thanks Paul. It looks like the issue is actually the font size in the main navigation.

I have it set like this

.x-navbar {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
}
.x-navbar .x-nav > li a {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
}

…which is a dupe of the font settings for the footer navigation, but the main navigation is showing up at 13px, not 16.

[Author]

Posts