Pique : Search widget in header area

mluyten · Member · Oct 18, 2017 at 6:26 pm
Copy link

Add topic to favorites
Hi there,
I would like to have the search widget next to the last menu item in the header.
With Premium account, is that possible? That would be great!

Thanks!

The blog I need help with is: (visible only to logged in users)
siobhyb · Member · Oct 19, 2017 at 8:49 am
Copy link
Hi Marcia,

There isn’t a way to move the search widget into your header with the Pique theme due to the way the front page is coded.

As (a bit of a hacky) workaround, you could add the following custom link to your site’s menu:

https://marcialuyten.nl/search

The above would lead to the theme’s default 404 page, which includes a search box. You could use the following custom CSS to hide the 404 errors messages on the page, so that it just looks like a search page to visitors:
```
.error-404 .page-header, .error-404 .page-content p {
    display: none;
}
```
I appreciate that this isn’t an ideal workaround and, so, I have added a request to be able to add a search box within posts/pages to our internal ideas tracker. We use that tracker to keep an eye on demand for different features. Although I can’t guarantee such a feature will be implemented, we have it logged.

Another option is for you to switch to a theme that includes a search bar in the header area by default. Baskerville is an example of such a theme.

Let me know if those options help or if you have any questions on any of them.
mluyten · Member · Oct 19, 2017 at 10:38 am
Copy link
I like the creative solution and seems the best for now.
But as you can see your css doesnt hide the Oops message, nor the rest of the content such as the widgets.
Can you fix that? That would be an acceptable solution!
siobhyb · Member · Oct 19, 2017 at 1:42 pm
Copy link
I’m glad that solution will work for you!

I’m not seeing the custom CSS that I provided on your site at the moment. Could you save it to your site? I’ll then take a look into why it’s not working correctly.

Thanks.
mluyten · Member · Oct 19, 2017 at 1:51 pm
Copy link
I re-added it now :-)
https://marcialuyten.nl/search
siobhyb · Member · Oct 19, 2017 at 3:14 pm
Copy link
Great! It appears to be working correctly and hiding the error text. Are you not seeing that? If not, try clearing your browser’s cache to see if that resolves it.
mluyten · Member · Oct 20, 2017 at 7:09 am
Copy link
hI,
Looking closer i see that the error messages are gone indeed.
But the page shows not only the widget that i chose, but also ones that i didn’t select.
Can we make it a page which only shows a search bar?
siobhyb · Member · Oct 20, 2017 at 9:27 am
Copy link
Hi Marcia,

You can edit your widget’s visibility settings so that they don’t display on the 404 error page. Guidance for tweaking widget visibility can be found here:

Widgets

Take a look and let me know if questions come up. :)
mluyten · Member · Oct 31, 2017 at 10:20 pm
Copy link
Please have a look at https://marcialuyten.nl/search

With the above css I’ve made this page working. BUT i would like the search widget disappear from this page only.
You also see the most used categories. I also would like to hide that widget.

Here is the css. The latter two don’t work…

.error-404 .page-header, .error-404 .page-content p {
display: none;
}

.widget.widget_recent_entries {
display: none;
}

.widget.widget_archive {
display: none;
}

.widget.widget-search {
display: none;
}

.widget.widget-categories {
display: none;
}
curiouszo · Member · Nov 1, 2017 at 12:51 am
Copy link
Hi There,

I was just playing with this in chrome dev tools, and I believe the reason why your CSS meant to remove categories doesn’t work, is because the dash should be an underscore. Also, I believe you want the .error-404 code to precede each rule, so that the widgets are not removed on every page. So to get rid of the category widget on the 404 page, I believe you would use:

.error-404 .widget_categories {
display: none;
}

Hope that helps!
siobhyb · Member · Nov 1, 2017 at 7:04 am
Copy link
@mluyten: @curiouszo: It’s not necessary to use custom CSS to hide widgets from certain pages. :) You can, instead, tweak you widget’s visibility settings as described here:

Widgets

I’ve created a screenshot at the following link that shows what the visibility settings would look like if you edited your search widget’s settings so that it doesn’t display on the 404 page:

Take a look and let me know if you have questions on that!
mluyten · Member · Nov 1, 2017 at 7:36 am
Copy link
Ah thank you! I have never seen that option, always thought it could only be done with a plugin.

I managed to hide the search sidebar widget, but what is the remaining widget called? I can’t find something like a “Most used categories” widget.

Rob
siobhyb · Member · Nov 1, 2017 at 9:29 am
Copy link
Hi there,

The remaining widget is added within the theme’s code to the 404 page, so you’ll need to use the following custom CSS to hide it:
```
.error-404 .widget {
    display: none;
}
```
Hope that’s helpful!
mluyten · Member · Nov 1, 2017 at 12:21 pm
Copy link
Great, worked!
siobhyb · Member · Nov 1, 2017 at 2:22 pm
Copy link
Perfect! 🎉

No items found.