Creating a search template or altering the search page

Come here for help or to post comments on Sphider
Post Reply
User avatar
captquirk
Site Admin
Posts: 299
Joined: Sun Apr 09, 2017 8:49 pm
Location: Arizona, USA
Contact:

Creating a search template or altering the search page

Post by captquirk »

The default search page for Sphider 2.0 is tabbed.
The first tab (Search) is for legacy textual content.The second tab (RSS Search) is for querying RSS feeds, and the third tab (Image Search) is for finding images.

For some people, all they need is the legacy textual search. If this is what you need, simply rename "search.php" to something like "newsearch.php". What you rename it to is not important, so long as it makes sense to you. Next, rename "search-161.php" to "search.php". The tabbed search is now gone and the only option available is the legacy search. Pretty easy.

But what if you want to keep both the legacy search and the image search, but no longer want to see the "RSS Search" tab? Well, now you are going to have to do a tiny bit of editing. Open "search.php" in a text editor. Lines 105-113 will be:

Code: Select all

105 echo "<li><a href='search.php?s=1' class='".$tab1_funcs[$s]
106   ."'>Search</a></li>";
107 echo "<li><a href='search.php?s=2' class='".$tab2_funcs[$s]
108   ."'>RSS Search</a></li>";
109 echo "<li><a href='search.php?s=3' class='".$tab3_funcs[$s]
110   ."'>Image Search</a></li>";
111 echo "</ul>\n";
112 echo "</div></div>\n";
113 echo "<div id='main'>\n";
Comment out lines 107 and 108, like this:

Code: Select all

105 echo "<li><a href='search.php?s=1' class='".$tab1_funcs[$s]
106   ."'>Search</a></li>";
107 //echo "<li><a href='search.php?s=2' class='".$tab2_funcs[$s]
108 //  ."'>RSS Search</a></li>";
109 echo "<li><a href='search.php?s=3' class='".$tab3_funcs[$s]
110   ."'>Image Search</a></li>";
111 echo "</ul>\n";
112 echo "</div></div>\n";
113 echo "<div id='main'>\n";
Save and exit The RSS Search tab is now gone. If you wanted ONLY the RSS Search tab, you instead would comment out lines 105, 106, 109, and 110. Get the idea?

Okay. What if you want to create your own template? For this you will also need to do some editing. A basic understanding of CSS is also helpful.
First, go to the "templates" directory (folder, for you Windows folks). You will need to create a new directory. Name it something simple and self-explanatory. Let's say your website is for a bakery. You might name the new directory "pastry". From settings, a new entry, "pastry", will appear under templates.
Next step. are you going to have a picture or plain background in your new template? If the background will be plain, copy the two files "header.html" and "search.css" from the "standard" template directory to your new "pastry" directory. If you are going to use a background image, copy the three files (header.html, search.css, and bgimage.jpg) from the "air" directory to your new "pastry" directory.
Change to the "pastry" directory, and open header.thml in a text editor. Change line 6:

Code: Select all

    <link type="text/css" rel="stylesheet" href="templates/standard/search.css">
or

Code: Select all

    <link type="text/css" rel="stylesheet" href="templates/air/search.css">
to

Code: Select all

    <link type="text/css" rel="stylesheet" href="templates/pastry/search.css">
Save and exit.
If you are using a background image in your new template, find an appropriate graphic, be sure it is in jpg format, and name it "bgimage.jpg", replacing the existing one.
The final step is to edit the search.css file. Open it in a text editor. It is in this file that you change the background color, text colors, hyperlink normal, active, and visited colors, text font, text size... You have LOTS of options here. The sparse comments and CSS selectors are an excellent guide as to what sections you may want to edit. Note that values for a "color" property can be either a name or an RGB value, such as "aqua" or "#00FFFF". The majority of your edits will have to do with the values of the "color" properties. This is where at least a basic understanding of CSS comes into play. Without this understanding, editing this file is going to become an exercise in futility and frustration. If you understand CSS, make some changes (remember what you did), save and test. If you have some artist competency (something I definitely lack!) you will end up with a beautiful search page.
If you are not comfortable with CSS, it would be next to impossible for me to walk you through it. Find a basic tutorial on CSS and you'll be up and running in a short time. You won't need to be a CSS guru. The simple knowledge you need can be obtained in just a couple hours with a halfway decent book. There are a lot of books available. My first book was "Teach Yourself CSS in 24 Hours" by Kynn Bartlett. Is it the best? Probably not, but it sure helped me.

For those wishing to modify their search page, I hope this is enough to get you going in the right direction.

I will answer questions regarding new templates the best I can, but, as I said, I can't teach CSS as well as a basic guide.
Post Reply