3

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; }

HELP_Improve_Search_Results_Page

**NOTE: I have very limited experience with CSS, PHP. So please be specific as you can with suggestions.

Thanks so much.

Improve this question
7
  • 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, 2015 at 10:39
  • 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, 2015 at 11:09
  • Ok then maybe post a link to your website, as any CSS is valid on specific html.
    – FFrewin
    Oct 28, 2015 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, 2015 at 16:41
  • Will the demo site work? Thanks again.
    – mrbuckmccoy
    Oct 28, 2015 at 16:43

2 Answers 2

Reset to default
2

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.

Improve this answer
2

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!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.