Tweet
This 'how to' is for other newbies like myself. Setting up Zoom Search and the CSS style sheet was really easy and should only take about 15 minutes.
Hopefully this simple explanation of how I managed to setup my Zoom search will help someone else avoid the 3-4 hours I spent sorting through all of the information.
First, here's the great explanation / clarification I received from the Zoom tech support. This explanation is followed by the steps I used to setup my Zoom search using Dreamweaver and my Dreamweaver .dwt template.
------------------------------------------------
Zoom Tech Support explanation...
When you bring up the search page, search.php, Zoom will read the contents of "search_template.html" line by line. Whatever is not related to Zoom, will be outputted directly. When Zoom runs across the <!--ZOOMSEARCH--> comment tag, it will replace it with the search form (and if the search done requested, the search results.)
Knowing the above, you can create a new page in Dreamweaver with your template, but save the file as "search_template.html", within the file, place <!--ZOOMSEARCH--> where you want your search results to appear.
Note: If you wish to go back to the default Zoom template, you can just delete search_template.html and Zoom will recreate the file upon finish indexing.
----------------------------------------------------------
My Dreamweaver setup...
First, I completed the standard Zoom install and verified that the default search form working correctly.
0. Recall from above that the 'search_template.html' is opened by the 'search.php' page. So start you need to initiate your search by linking your website's search button or search link to the Zoom search.php page which is installed when you install Zoom.
1. First, create a new html page using your Dreamweaver template [.dwt page]. The new html page must be named 'search_template.html' since this is the page name used by the search.php
2. Insert the <!--ZOOMSEARCH--> tag [include the <> brackets] into your new html page wherever you want the search form and results to occur. Place <div id="search_template"> tag before the <!--ZOOMSEARCH--> and </div> tag after:
<div id="search_template">
<!--ZOOMSEARCH-->
</div>
When the search.php script opens your new search_template.html page, your html code is executed starting from the top of the page until the script reaches this tag. Then the Zoom php search code is executed. The <div id="search_template"> tag assigns your separate css style sheet so your css styles are applied to the search form and results created by the search.php script.
3. Now create and save a new blank css page using Dreamweaver. I named mine 'search_template.css'
4. Open the Zoom default 'search_tempate.html' page that was installed when you installed Zoom. Copy and paste just the css code into your newly created css page. Omit any html code, ie, copy the code between the <style> and </style> tags. Don't include in the 'style' tags.
My page looks like this:
----------------------------------------------
@charset "utf-8";
/* CSS Document Zoom Search Template CSS Code */
.highlight { background: #FFFF40; }
.searchheading { font-size: 130%; font-weight: bold; }
.summary { font-size: 80%; font-style: italic; }
.suggestion { font-size: 100%; }
.results { font-size: 100%; }
.category { color: #999999; }
.sorting { text-align: right; }
.result_title { font-size: 100%; }
.description { font-size: 100%; color: #008000; }
.context { font-size: 100%; }
.infoline { font-size: 80%; font-style: normal; color: #808080;}
.zoom_searchform { font-size: 100%; border: 1px solid; background-color: #FFFF96 ; margin-top:20px; margin-bottom:20px; padding-left:20px; }
.zoom_results_per_page { font-size: 80%; margin-left: 10px; }
.zoom_match { font-size: 80%; margin-left: 10px;}
.zoom_categories { font-size: 80%; }
.zoom_categories ul { display: inline; margin: 0px; padding: 0px;}
.zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; }
.cat_summary ul { margin: 0px; padding: 0px; display: inline; }
.cat_summary li { display: inline; margin-left: 15px; list-style-type: none; }
input.zoom_button { }
input.zoom_searchbox { margin-top:20px; }
.result_image { float: left; display: block; }
.result_image img { margin: 10px; width: 80px; border: 0px; }
.result_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.result_altblock { margin-top: 15px; margin-bottom: 15px; clear: left; }
.result_pages { font-size: 100%; }
.result_pagescount { font-size: 100%; }
.searchtime { font-size: 80%; }
.recommended
{
background: #DFFFBF;
border-top: 1px dotted #808080;
border-bottom: 1px dotted #808080;
margin-top: 15px;
margin-bottom: 15px;
}
.recommended_heading { float: right; font-weight: bold; }
.recommend_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.recommend_title { font-size: 100%; }
.recommend_description { font-size: 100%; color: #008000; }
.recommend_infoline { font-size: 80%; font-style: normal; color: #808080;}
.recommend_image { float: left; display: block; }
.recommend_image img { margin: 10px; width: 80px; border: 0px; }
--------------------------------------------
5. Now save and close your new css page. You can make any css style changes later using the Zoom CSS how-to tutorials.
6. If not already open, re-open your Dreamweaver template [.dwt page] you use to create your website html pages.
7. You need to enter the following line of code somewhere between the <head> </head> tags of your Dreamweaver template [.dwt file] that you use to create your website html pages. These <head> tags should be toward the top of your .dwt page. This line of code references your new css file you created which contains the Zoom css code.
<link href="../zoom_search/search_template.css" rel="stylesheet" type="text/css" />
Make sure you replace my '../zoom_search/search_template.css' file location with your own.
8. Now simply save your Dreamweaver template which should also update your html pages that you created using your template.
9. Okay, now go ahead and upload your new / updated files to your website server and you're ready to try a search.
When you click on your website's 'search' button or link, the search.php script is started which opens your search_template.html page you created with your Dreamweaver template (.dwt page). You should now see the Zoom search form. Enter a search word and execute your search. The results should be presented on the same page below the search entry fields and formatted according to your Zoom css code that you copied and pasted into your new css page.
You now have a search page that matches the rest of your website. Plus the search form and results can now be easily customize using the Zoom how-to css tutorials.
Hope this helps.
Scott
Hopefully this simple explanation of how I managed to setup my Zoom search will help someone else avoid the 3-4 hours I spent sorting through all of the information.
First, here's the great explanation / clarification I received from the Zoom tech support. This explanation is followed by the steps I used to setup my Zoom search using Dreamweaver and my Dreamweaver .dwt template.
------------------------------------------------
Zoom Tech Support explanation...
When you bring up the search page, search.php, Zoom will read the contents of "search_template.html" line by line. Whatever is not related to Zoom, will be outputted directly. When Zoom runs across the <!--ZOOMSEARCH--> comment tag, it will replace it with the search form (and if the search done requested, the search results.)
Knowing the above, you can create a new page in Dreamweaver with your template, but save the file as "search_template.html", within the file, place <!--ZOOMSEARCH--> where you want your search results to appear.
Note: If you wish to go back to the default Zoom template, you can just delete search_template.html and Zoom will recreate the file upon finish indexing.
----------------------------------------------------------
My Dreamweaver setup...
First, I completed the standard Zoom install and verified that the default search form working correctly.
0. Recall from above that the 'search_template.html' is opened by the 'search.php' page. So start you need to initiate your search by linking your website's search button or search link to the Zoom search.php page which is installed when you install Zoom.
1. First, create a new html page using your Dreamweaver template [.dwt page]. The new html page must be named 'search_template.html' since this is the page name used by the search.php
2. Insert the <!--ZOOMSEARCH--> tag [include the <> brackets] into your new html page wherever you want the search form and results to occur. Place <div id="search_template"> tag before the <!--ZOOMSEARCH--> and </div> tag after:
<div id="search_template">
<!--ZOOMSEARCH-->
</div>
When the search.php script opens your new search_template.html page, your html code is executed starting from the top of the page until the script reaches this tag. Then the Zoom php search code is executed. The <div id="search_template"> tag assigns your separate css style sheet so your css styles are applied to the search form and results created by the search.php script.
3. Now create and save a new blank css page using Dreamweaver. I named mine 'search_template.css'
4. Open the Zoom default 'search_tempate.html' page that was installed when you installed Zoom. Copy and paste just the css code into your newly created css page. Omit any html code, ie, copy the code between the <style> and </style> tags. Don't include in the 'style' tags.
My page looks like this:
----------------------------------------------
@charset "utf-8";
/* CSS Document Zoom Search Template CSS Code */
.highlight { background: #FFFF40; }
.searchheading { font-size: 130%; font-weight: bold; }
.summary { font-size: 80%; font-style: italic; }
.suggestion { font-size: 100%; }
.results { font-size: 100%; }
.category { color: #999999; }
.sorting { text-align: right; }
.result_title { font-size: 100%; }
.description { font-size: 100%; color: #008000; }
.context { font-size: 100%; }
.infoline { font-size: 80%; font-style: normal; color: #808080;}
.zoom_searchform { font-size: 100%; border: 1px solid; background-color: #FFFF96 ; margin-top:20px; margin-bottom:20px; padding-left:20px; }
.zoom_results_per_page { font-size: 80%; margin-left: 10px; }
.zoom_match { font-size: 80%; margin-left: 10px;}
.zoom_categories { font-size: 80%; }
.zoom_categories ul { display: inline; margin: 0px; padding: 0px;}
.zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; }
.cat_summary ul { margin: 0px; padding: 0px; display: inline; }
.cat_summary li { display: inline; margin-left: 15px; list-style-type: none; }
input.zoom_button { }
input.zoom_searchbox { margin-top:20px; }
.result_image { float: left; display: block; }
.result_image img { margin: 10px; width: 80px; border: 0px; }
.result_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.result_altblock { margin-top: 15px; margin-bottom: 15px; clear: left; }
.result_pages { font-size: 100%; }
.result_pagescount { font-size: 100%; }
.searchtime { font-size: 80%; }
.recommended
{
background: #DFFFBF;
border-top: 1px dotted #808080;
border-bottom: 1px dotted #808080;
margin-top: 15px;
margin-bottom: 15px;
}
.recommended_heading { float: right; font-weight: bold; }
.recommend_block { margin-top: 15px; margin-bottom: 15px; clear: left; }
.recommend_title { font-size: 100%; }
.recommend_description { font-size: 100%; color: #008000; }
.recommend_infoline { font-size: 80%; font-style: normal; color: #808080;}
.recommend_image { float: left; display: block; }
.recommend_image img { margin: 10px; width: 80px; border: 0px; }
--------------------------------------------
5. Now save and close your new css page. You can make any css style changes later using the Zoom CSS how-to tutorials.
6. If not already open, re-open your Dreamweaver template [.dwt page] you use to create your website html pages.
7. You need to enter the following line of code somewhere between the <head> </head> tags of your Dreamweaver template [.dwt file] that you use to create your website html pages. These <head> tags should be toward the top of your .dwt page. This line of code references your new css file you created which contains the Zoom css code.
<link href="../zoom_search/search_template.css" rel="stylesheet" type="text/css" />
Make sure you replace my '../zoom_search/search_template.css' file location with your own.
8. Now simply save your Dreamweaver template which should also update your html pages that you created using your template.
9. Okay, now go ahead and upload your new / updated files to your website server and you're ready to try a search.
When you click on your website's 'search' button or link, the search.php script is started which opens your search_template.html page you created with your Dreamweaver template (.dwt page). You should now see the Zoom search form. Enter a search word and execute your search. The results should be presented on the same page below the search entry fields and formatted according to your Zoom css code that you copied and pasted into your new css page.
You now have a search page that matches the rest of your website. Plus the search form and results can now be easily customize using the Zoom how-to css tutorials.
Hope this helps.
Scott