Overview

CoffeeCup Flash Website Search generates a normal search results page when your visitor enters their search words into the box and and clicks the 'Search' button.
You can however have the search results displayed in a custom page layout using any custom text or graphics, for example your site logo. The walkthrough below is for a single column layout but it is quite easy to add the results to a 2 column layout, the steps are similar to Creating a Custom Form Results Page, the top half goes in the 'HTML Header' box and the bottom half goes into the 'HTML Footer' box.

If you enter something that is Coffeecup related into the above Search Box you will see how the layout will look on your site, you will be able to change the color's further down this page.

Building your code

Before you start to build your code there are 4 css tags listed below that you should be aware of.
When Website Search begins to process your results page it looks to see if you have any of the tags below, if it finds them it will use them, if it does not find them it will use it's own which are built into the .php file that is created before uploading.

• H3 - This is the tag that is used to show the link to the page.
• P - Description containing the search words and the URL Date and Relevance lines.
• Strong - This is used to mark the searched words within the description text.
• url_info - This will allow you to give this line a different color to the description lines.

The code below is the stylesheet settings which I am going to use that will generate the page.
It will build your page allowing for a full size logo or graphic, the search results will be centered on your page within a 768 pixel box which has a border.

Please Note:- these settings will overwrite the default setting built into WebSite Search, after all that is the idea of using a stylesheet.

I will quickly explain some of the .css settings, you can then change some of the colors etc. before you save the file
.column {
background-color: #FFFF99; - This is set to a Pale Yellow, you can change it to any color you want, if you want it to appear transparent you can remove line.
border: 1px solid #2B3D8F; - The border is set to a light Blue, you can change it to any color you want, if you don't want a border you can remove the line.

.body {
background-color: #FFFFFF; - This is set to White, you can change it to any color you want, however we can also add a background image, it could be a gradient or a tiled graphics. If your site has a vertical gradient you will need to add these lines:-
background-image: url(images/your image.jpg); you should find this in the 'files' folder of your vnu_website folder.
background-repeat: repeat-x; - This repeats your graphic left to right across your page, repeat-y if it is a horizontal gradient.

Adding the Code to SiteSearch

This process requires copy and pasting code, so you can either copy the 3 sections of code below, edit any image paths and then save it to a text file or html template for later use, or have this page open while you carry out the process.
Remember to change anything in RED within the code to your own values.

Copy the code below and paste it into any text editor, then save it as ccsearch.css. It will help if you save it in the same place you are going to save your Website Search project.

Next start Coffeecup Website Search. Note:- If you already have a saved project you should open it now.
If this is your first project then I suggest you click the 'Build Search' button, enter your url into the Site Url box and then click the 'Scan' Button', when you have done this click the 'Next' button.
Click the HTML_Settings icon at the top.
Click the HTML Header tab so that you see the box below.

Now Copy and Paste the code below into the Header Box.

Make sure the path to your Logo or header image in this line is correct, <div style="text-align: center"><img src="path to your image.jpg"></div>

Next Click the HTML Footer tab and Copy and Paste the Code below into this box.

Copy it the way you would normally and then paste it into the HTML Footer box.
When you have done this, click the 'Save' button to save you project.

You will now have the box asking you to save your project, save where you normally save your files.
When saved, the 'Files to Upload' box will appear, first click the 'Copy to Clipboard' button, you will need this shortly.
You can either upload the files with the built-in ftp, or click the red cross to close the box and upload these files later:-

• filename.php
• filename.swf
• filename.txt
• filename.xml

Next open the pages you want to have your search box on and paste the flash code that you copied to your clipboard where you would like it to appear.
When you have done this, upload the pages and the ccsearch.css file plus the 4 files above, if you have not already done so, also make sure any graphics you have linked to are on your server.
You can now go to your site and if you have followed each step correctly your Site Search will be working ok.
You can change any of your color's by simply opening your css file, make your changes and then upload the file again.

Other Walkthroughs

Adding Anchor Bookmarks to a VSD Page
The idea of this page is to show as easily as possible how to add bookmark links into a page created with VSD. Ideal if you wish to create a Question and Answers page.

Creating Custom Google Sitemap Page
How to add a customised Sitemap Page.

Back to home page