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, you can go here and see how it will look on a VSD site:- Sample VSD Site just enter something CoffeeCup related.

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: #FFFFFF; - This is set to White, 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(files/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>
you should already have one in your vnu_website/files folder:-

Next Click the HTML Footer tab and Copy and Paste the Code below into this 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, this should be your your vnu_website folder.
When saved, the 'Files to Upload' box will appear, Click the red cross to close this box

Adding the Search Box to VSD

Start VSD and open your website project.
Select a page you want to add the Search Box to.
Click the Lightening Icon (Add CoffeeCup Flash Application Tool) in the left Tools column then click on the page where you want the box to be.
The 'Add XML' box will open, navigate to where you saved your Site Search files and select the .xml file, click 'Open', a box will be added to your page. Click the 'Preview' button to make sure it is correct.
Next we need to add the mysearch.css file that we saved earlier. From the top menu click 'Settings/Add Files', when the add files box pops up click the 'Browse' button and navigate to where you saved the file, highlite your .css file and then click 'Open', next click 'Add file' button at the bottom of the box.
Once you have completed all the above steps you now need to save your site project, next click the 'Upload' button on the tool bar and let VSD upload all the new files.
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 your color's at any time by opening the .css file and change any values and then upload it to your site. This saves going through all the process 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