Can anyone offer some guidance on how to change the look of the Search Results page? Right now there is no visual separation and everything looks very condensed and cluttered making it hard to view.
I have attached a screenshot to help illustrate the areas of concern and improvements.
Any help you can give would be so helpful as I cannot find help anywhere. I have tried Firebug to change margins below, but it changes the margins on other things I do not want.
I like the look of the "Smart Search" results page better because it has better visual separation but like the functions of the normal "Search" Plugin.
Any suggustion on how to customize Search results page (possible search result templates)?
p:last-child, blockquote:last-child, form:last-child, dl:last-child, ul:last-child, ol:last-child, fieldset:last-child, address:last-child, table:last-child { margin-bottom: 5px; }
p, pre, blockquote, form, dl, ul, ol, fieldset, address, table { margin: 5px 0; }
**NOTE: I have very limited experience with CSS, PHP. So please be specific as you can with suggestions.
Thanks so much.
-
When you say limited experience with CSS, how much limited you mean? What kind of guidance are you looking for? Is it for which selectors you should use? – FFrewin♦ Oct 28 '15 at 10:39
Best option will be if you use Mozilla Firefox, and then install the add-on extension WebDeveloper. That extension will help you a lot with discovering where are you on your HTML code, which CSS class/id is assigned to that specific line, and then easily you can edit your CSS code and see in "live" what you are getting by changing parameters.
At the same time if you need to modify layout itself, then I suggest overriding existing template. But for visual effects only, CSS and WebDeveloper extension will help you a lot.
The best way for make this changes is making an override.
First, here some docs for make the override step by step:
https://docs.joomla.org/J3.x:How_to_use_the_Template_Manager
Now you need to create an override in the column:
Components > com_search > search
You can find the files in:
yoursite/templates/yourtemplate/html/com_search/search
- For the first grey block edit default_form.php
- For the results area edit default_results.php
Best Regards!
-
-
Thank you for your response. My CSS skills are using Firebug to test out some changes and duplicating it in the template.css files. But yes, which selectors would I need to edit in which css file to add margins to only the area in between the search options and results? and how would I add a horizontal line there also? changing the background color of the top search option area to a light gray would be good for visual separation. Any help you can offer would be greatly appreciated. Thanks! – mrbuckmccoy Oct 28 '15 at 11:09
-
-
Ok then maybe post a link to your website, as any CSS is valid on specific html. – FFrewin♦ Oct 28 '15 at 11:18
-
Hi again, really appreciate your help on this. My real site is internal and not accessible without VPN but I use JSN Solid Template. Here is a link to the demo search results page, I have searched some example terms for results to display, demo.joomlashine.com/joomla-templates/jsn_solid/pro/… – mrbuckmccoy Oct 28 '15 at 16:41
