Monitor Reply

Support

Adding and customizing the Search block

Permalink Browser Info Environment October 25, 2014 at 6:03 PM

I'm looking to add a search bar to the top of the web home page (or in the Header area) on each page the functionality is fine but the current search block display or presentation gives me a problem - I'm trying to get it to fit in a line and be about 60 pixels high.

The problem is that the standard display has too much white space around it.

Ideally, I'd like to use something that displays like the "Intelligent Search that shows when you are in the Dashboard.

I'm not sure how a change to the CSS affects the Viewport theme. (add to customization on the Theme or make a direct change in the CSS - where?? Main or...

Any thoughts or direction would be appreciated.

1 Attachment

Type:	Discussion
Status:	In Progress

HOBOcs replied on Oct 25, 2014 at 6:04 pm Permalink Reply 1 Attachment

additional Display

c5mix replied on Oct 28, 2014 at 12:30 pm Permalink Reply

After adding the search block to the Header area, try adding this CSS to the "Add your CSS" box in the theme's customization panel:

header .ccm-search-block-form, header .ccm-search-block-form input {
margin-bottom:0px!important;
}
header .ccm-search-block-form h3 {
display:none!important;
}

HOBOcs replied on Oct 28, 2014 at 5:36 pm Permalink Reply

OK , I tried that and it appears to work (presentation wise) but when I invoke a search (with a defined results page) it puts the page list of search results in the header area ... and then it shows again on the "search page" as it should.

What if I put the search in the "Feature" area just below the menu. Is it just a matter of changing "Header" to Feature in your CSS code??

Also - spacing is an issue and I'd like to reduce white space 2 areas (1/2 inch) to something less .. found (1) under the top band (Home and date) and (2) between the Header and the Feature below the menu ... again more CSS
Thoughts

c5mix replied on Nov 1, 2014 at 11:00 am Permalink Reply

You need to be able to remove the search block from the header on the search results page. But since it's a Global Area you won't really be able to do that. Maybe you can try hiding it with CSS on that page. Try adding this CSS to the "Header Extra Content" custom attribute field on that page:

<style>
header .ccm-search-block-form { display:none!important; }
</style>

Where exactly is the other spacing you'd like to reduce?

ViewPort

Support

Adding and customizing the Search block

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post