Wishlist 0 ¥0.00

How do I change the appearance of the search results page?

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.

  •  
    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

2 Answers

 

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.

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!

  •  
    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

How to display search results on a new page in Joomla?

Many customers ask as how to configure the search module to display search results on completely different page than the search module is assigned to.
Why is it a problem?


For instance, if the search module is displayed on the home page only and there are many modules also assigned to the home page it may be inconvenient for site visitors to use the search module and look through search results among tons of modules :) 

It's all about ItemID.

The key issue is that the seacrh module uses the current menu ItemID unless there is no search component com_search assigned to any menu.
What is ItemID?
Go to Menus -> Your menu to check ItemID of any menu item.
 

menu-itemid


Of course it may be different for you home link. 
So assuming that you've got the searach module on home page, search results page will use home ItemID that you can see in the URL.
 

search-result-url

Tip:
If ItemID does not appear in the URL check if you have disabled SEO Settings -> Search Engine Friendly URLs.
It's recommended to enable this option at the end of working on the site (if you build it from scratch). 

 

Solution.

Edit the search module and navigate Options tab. There's Set ItemID filed that you can use to force search results to be displayed on the new page.
 

Display Search Results on a New Page in Joomla

 

Create hidden menu with the desired ItemID.

Do not have to use your current menu items for search results. You can create the menu that will not be published on the site but it will include the important information - the itemID of com_search component.

Step by step guide:

1. Create the new menu - called "hiddenmenu".

2. Create the new menu item.

3. Choose Search Form or Search Results (display search results) for Menu Item Type.
 

search-results-link


4. Check ItemId for this menu item. 

5. Enter ItemID in the Set ItemId filed.

How to Utilize Joomla Smart Search - Basic and Advanced Settings

Minutes-to-Utilize-Joomla-Smart-Search
 

When the basic search component can not keep up with the demand, Joomla Smart Search can be used as an enhanced alternative for this popular feature. It’s a must-have component for every Joomla site

This article will show you how to create and utilize Joomla Smart Search straight out of the core system.

Table of Content

 

What is Joomla smart search?

Joomla smart search enable search function for site visitors. And it’s more advanced than the normal search feature.

But how advanced is it?

Basically, Joomla smart search enables you to:

1. Command search option 

A few example of how you can use the search feature
A few example of how you can use the search feature

 

2. Autocomplete /As-you-type suggestion

 

3. Have more control over your search results and search filter: with smart search, you can create a filter with only the author name or category.

4. Search result contains more information: it has a URL and more text description.

How to create Joomla Smart Search?

To enable Joomla smart search in your site, you need to:

  • Step 1: Enable Smart Search Plugin
  • Step 2: Run Indexer
  • Step 3: Display on frontend
  • Configure Smart Search Setting (Optional)

Step 1: Enable Smart Search Plugin

For the smart search to work, you have to enable the Content - Smart Search plugin. To do that, you can follow these steps:

  1. Go to Extension -> Plugins
  2. In the search bar, enter “smart search”
  3. Enable the “Content - Smart Search” plugin

You can also enable all the related plugins (Categories, contacts, content, etc), they give you extra searching options, however, it depends entirely on your usage.

 

 

Step 2: Run Indexer

After enabling all the necessary plugins, you need to run the Smart Search Indexing. This will scan all your website data to prepare for an advanced search.

    1. Go to Components -> Smart Search
    2. Go to Indexed Content section
    3. Click “Index”

 

Note:

- Depending on your collective site data, it might take from a few minutes to a few hours to complete the process.

- If your website is too large, then you ought to read this guide to utilize the process.

- If there is any content you don’t want to appear in your smart search, you can unpublish it by clicking the “tick" icon in the Status column.

Step 3: Display Joomla Smart Search on the frontend

To display on your site, you can choose one of the following options:

  • Option 1: Through the Smart Search Module
  • Option 2: Through the Menu Items Type - Smart Search

Note: there will be a slight difference between the two options. You can check out the details here.

Option 1: Display through the Smart Search Module

  • Step 1: Go to Extensions -> Modules -> Create New
  • Step 2: Choose Smart Search Module
  • Step 3: Fill in the Title and assign a position to the module
  • Step 4: Change the Status to Published and hit Save.

 

Configure Smart Search in the module

All the settings for the smart search module are quite straight forward, they will affect your design for the most part. You can read all about its definition when hovering over it or test it for yourself.

However, you need to pay attention to this field:

+ Search filter: None is the default, and you should stick to it this way. However, if you have configured the Search Filter in Componets_Smart Search, you will have another option to choose from. We will explain in the below section.

After all, this is your smart search module will look like this in the frontend:

 

 

Option 2: Display through Menu Item Types

  • Step 1: Go to Menu -> Main Menu (or any menu) -> Add New Menu Items
  • Step 2: In Menu Items Type field -> Select Smart Search - Search type
  • Step 3: Fill in the title and choose its parent items
  • Step 4: Change the Status to Published and hit Save.

 

Configure Smart Search in menu item types

In the Details tab, you can fill in the Search Content Maps field. Then, when clicking on the Smart Search menu, the page result always displays the result with the keyword you filled in.

For example, if “Joomla” is chosen, the result page will initially show all the results with the “Joomla” keyword.

Your smart search displaying through menu item will look like this in the frontend:

 

The difference between displaying through Module and Menu Items

This table shows the settings that the module and menu items search bar have.

Module

Menu Items

  • Search Field Label
  • Label Position
  • Alternative Label
  • Search Button
  • OpenSearch Autodiscovery
  • OpenSearch title
  • Set ItemID
  • Search Content Map

Configuring Smart Search Setting

Despite the difference between the settings in the module and menu items, you can control the smart search settings mainly through the Global Configuration settings.

General Settings

  • Step 1: Go to System -> Global Configuration
  • Step 2: Find Smart Search

The first tab is where you can handle all the settings.

Note: the settings will affect both module and menu items, however in the case of menu items, you can override the configuration within the menu item settings.

 

 

Some notable settings you should pay attention to:

+ Gather Search Statistics: Enable this will allow you to see all the search query your visitor has put in. It will bring you a great insight into what the customers actually want to see, so you can improve your content and site.

To see the search query, you need to go: Components -> Search.

+ Allow Empty search: this is only enabled when you create and select a Search Filter view. It will display all the search results in that filter whenever the search query results in none.

Index setting configuration

Indexing is an important part of setting up Smart Search, it will determine how fast the indexing process is. To configure it, you need to follow these steps:

  • Step 1: Go to System -> Global Configuration
  • Step 2: Find Smart Search
  • Step 3: Go to Index Tab 

 

+ Indexer Batch Size: By default, it goes to 50, it means that 50 content items will be indexed per batch. Increasing this setting will make the process faster, but it also uses more memory and possibly more temporary disk space.

+ Memory Table Limit: should not be changed unless you encounter the Table Full error. When getting the error, reduce the default number.

Configure Search Filter

The Search Filter determines which data can be searched and which will be left out. The filter will range from 4 areas:

  • Author
  • Language
  • Category
  • Type

To make a new search filter, you need to follow these steps:

  • Step 1: Go to Components -> Smart Search
  • Step 2: Go to Search Filter and create New
  • Step 3: Choose your filter options and Save

Note: you need to fill in the Search Filter field when displaying smart search over the module or menu item types.

 

 

Smart Search fits with most Joomla sites - it’s very useful and easy to use. We hope with this article you better understand how to create a Joomla Smart Search and configure the components to suit your needs.

How to Improve Search Results Page in Joomla 3.4

Beside website navigation, especially in large websites, search option is and always was very important part. Since many years Joomla improved many aspects of its core, but only adding Smart Search was the really big step move ahead. But many users still have question: How to improve searching in Joomla or How to improve search result page. I will try to answer to those customization question in current blog post.

Things You Need to Know

It is no secret that the standard search within Joomla 3.4+ still not have best appearance, normal user cannot control all available options, in particular, if site developer wants to hide something. Different Joomla 3 Templates feature different template files. Some include a override template file, which displays the search results. But in most cases they just add some extra CSS class, but final page still looks this same. And most people (clients) ask about how to hide specific elements.

Improving a Search Results Page

 search-joomla34-default

 I think you, like me, do not need all those searching filters. Let's hide some of them in Joomla 3.4. To create your own custom Search Page, based on default search component, you will need to create a Page template to include your search form and the information you want your users to see. Of course we do not suggest to edit Joomla core files, we use override system instead.

First, check if your current using template have such a folders inside: YourTemplateName\html\com_search\search  - if not, please create all of them.

Second, now you have to copy two files from \components\com_search\views\search\tmpl into new folder which you created a few second ago. I think coping even only "default_form.php"  file will help you customize result page. Inside that file you will find all filters, inluding: "Search for" and "Serach only".

search-code-in-joomla

Now you can using your basic HTML knownledge remove those parts which you do not need, whithout worries they will appear again after next Joomla 3.4+ update, it's fully safe. For my purposes I removed all those elements, also with Display Num. From the bottom section of code I left only Page counter which maybe useful, when Joomla will show more than 20 result items.

search3

Now search result is clean. But one "small" but importnat in my opinion element is missing I guess.

Highlight Search Terms

Highlight Search Terms does not come the default Joomla templates. I think that adding distinctive color for searching phrase will help users to find out in what context search term appears in the sentence on search results page. This part is very easy to do alone, all you have to do is add a extra CSS line into your template style file. In most cases those phrases wil get "hightlight" :

<span class="highlight">Joomla</span>

You can easy change font color or/and add background color or add underline, what you decide to do. Just use simple style, for example:

span.highlight {background: #9BCC56; color: #fff; padding:0 3px;}

Here is the final result:

search4

Of course use your own colors, style effects etc. I hope that quick tip helped you get a customized search result a little bit more than before.

Zero Results Found Page - How to reduce those cases

Probably your site do not have all topics and also people made mistakes in search bar. And as a result Joomla will present a prominent message indicating that nothing was found. However, there are ways to enhance even these pages with some useful information. First, if your website is fully based on English language you can use Smart Search instead of default, which better index content of site and may help improve search results or even during typing a words in search module.

Second idea, you can use search module based on Ajax Live Search, which can be used to create more user-friendly and interactive searches. When someone starts to type with the search field they will be presented with a drop-down box offering suggestions. Live search has many benefits compared to traditional searching, one of them is, of course, reducing a zero page results. On Joomla! Extension Directory you should find at least few of those modules, also free versions.

Third, you can replace the default Joomla Search Engine with something else, for example Google. The default code that Google gives you generates search results on the same page or frame. The downside to this is that if you placed the search box on your sidebar, search results would be displayed there too. Thankfully, it is very easy to display search results on a dedicated page. Also for this kind of search you will find ready modules. But remember about one fault of this method Joomla do not automatically sends notifications to Google with every new article and page update. So the Google search engines need time for index of whole content. It may take few weeks or more for search engines to revisit your site/blog and discover new content.

Four, if you site have PDF, RTF, DOC, XLS, ODT and others documents inside you can also make then search-able using addcional extension. JiFile (isapp.it) was designed to obtain an integrated tool in Joomla 3.x that allows the indexing of textual content of a document and research into them.

Search only here... 

Sometimes in result page you don't want to show all results from whole website, especially where some content should be protected/hidden from guests. In that case you can use free plugin  Improved Content Search  (offlajn.com)  which replace the default Joomla content search plugin with this extension, and you will get much more functionalities. You will be able to select the mode for category inclusion/exclusion, article inclusion/exclusion or limit for the search results.

search-index

 

Some people like Joomla search functionality, others needs improvements. If you fall into the latter group, I recommend you try one of the solutions detailed in this article, making for our clients easier to find the information presented on your web page.

About Us

Since 1996, our company has been focusing on domain name registration, web hosting, server hosting, website construction, e-commerce and other Internet services, and constantly practicing the concept of "providing enterprise-level solutions and providing personalized service support". As a Dell Authorized Solution Provider, we also provide hardware product solutions associated with the company's services.
 

Contact Us

Address: No. 2, Jingwu Road, Zhengzhou City, Henan Province

Phone: 0086-371-63520088 

QQ:76257322

Website: 800188.com

E-mail: This email address is being protected from spambots. You need JavaScript enabled to view it.