PDA

View Full Version : Change Layout with CSS Styles


weberhannes
02-10-2005, 12:00 AM
Thank you for your help so far. I managed to move around the search summary string through margin: -30px; etc. with css-styles. I could even switch it off by using visibility: hidden.

I have a problem though changing the "...pages of results" string and the
"search took..." string. How are they editable using css? :roll:

Thank you for your help
wrensoft
02-10-2005, 12:22 AM
Those elements share the same CSS class, so you can't alter their styles seperately. However, you can edit the text for them via the Language (ZLANG) files from the Configuration window of the Indexer (click on the "Language" tab and select a file to edit). More information in our Users Guide:
http://www.wrensoft.com/zoom/usersguide.html
Anonymous
02-10-2005, 07:35 AM
Thank you,
what is the name of the css.class they share, since for some reason I cant change the search too string at all via the template?
Ray
02-10-2005, 09:45 PM
Actually, the "Search took" string shares the style with the "Search powered by..." string, which is defined as "small". So the following would change these two strings to red:

small { color: #FF0000; }

The "x pages of results" text is defined by the style "summary".
weberhannes
02-20-2005, 05:11 PM
Thanks so far.
I have managed to do a lot via the template file.
Yet there are some strings that simply cannot be changed.
Such as: Did you mean..., ... pages of results, results pages etc.

the .summary style just changes the ...results found string,

How can I change the other strings? All I want is to adjust the font size.

Thanks!

This is an extract of my template file:

.highlight { font-weight: bold; }
.searchheading { font-family: arial; font-size: 70%; font-weight: bold;margin-top:-20px; }
.summary {font-family: arial; font-size: 60%; font-style: bold; margin-top:-20px; }
.results {font-family: arial; font-size: 60%; }
.category { font-family: arial; font-size: 80%; color: #0000cc; }
.description { font-family: arial; font-size: 80%; color: #333333; }
.context {font-family: arial; font-size: 80%; }
.infoline { font-family: arial; font-size: 80%; font-style: normal; color: #008000; }
.sorting { text-align: right; }
.result_title {font-family: arial; font-size: 100%; margin-top:-10px; }
small { font-family: arial; font-size: 60%; font-style: bold; }

.zoom_searchform { font-size: 100%; }
.zoom_options { font-size: 80%; }
input.zoom_button { }
input.zoom_searchbox { }
weberhannes
02-20-2005, 05:46 PM
.. and if I edit the language file and try to delete the text after a string I get an error message that says:

Unable to open settings.zdat or file is invalid.
Check file permissions and that file exists

How can I get rid of unnecessary information such as ...x pages of resulte or x terms found containing... strings when using cgi?


Thank you for you time and troubles
Ray
02-20-2005, 10:50 PM
"Did you mean...", "Result pages", etc. are all part of the ".results" style class.

You should never edit the "settings.zdat" file. All settings here are automatically updated by the Indexer, where you should make your configuration changes.

You can not remove entire lines from the Language files. Each of the STR_ lines must be retained, but you can empty out a text entry like so:

STR_SUMMARY_NO_RESULTS_FOUND=
(Note that there's a space after the "=" sign)

However, for lines which include numbers or other data from the script (eg. "x results found") - you will not be able to remove them completely this way. You will have to use the CSS visibility:hidden attribute for that.

Note that we do not particularly recommend removing too many of these messages: some of these are less customizable because we consider them fairly critical to the search function. Removing them would also make it alot harder for us (and yourself) to determine if something goes wrong, as we can't get accurate information on the search results.
weberhannes
02-21-2005, 07:00 PM
Thanks,
I really tried everything, but by changing the .results style the
"x pages of results." string cannot be changed. Even if I
write .results {visibility: hidden; } it is displayed.
So for some reason I can neither influence the formatting nor the appearance.

The following string cant be formatted at all either. But this ugly and especiallly large, italic output doesnt suit my page:

The following word(s) are in the skip word list and have been omitted from your search: "on", "us"

Can I influence the appearance of the "result pages: 1 2.... next"

Thank you

What can I do?

Here is my style sheet´:

.highlight { font-weight: bold; }
.searchheading { font-family: arial; font-size: 70%; font-weight: bold;margin-top:-20px; }
.summary {font-family: arial; font-size: 60%; font-style: bold; margin-top:-20px; }
.results {visibility: hidden; }
.category { font-family: arial; font-size: 80%; color: #0000cc; }
.description { font-family: arial; font-size: 80%; color: #333333; }
.context {font-family: arial; font-size: 80%; }
.infoline { font-family: arial; font-size: 80%; font-style: normal; color: #008000; }
.sorting { text-align: right; }
.result_title {font-family: arial; font-size: 100%; margin-top:-10px; }
small { font-family: arial; font-size: 60%; font-style: bold; }

.zoom_searchform { font-size: 100%; }
.zoom_options { font-size: 80%; }
input.zoom_button { }
input.zoom_searchbox { }
Ray
02-21-2005, 10:33 PM
.results { visibility: hidden; } should hide everything in the "results" block. Unless you have other CSS defined elsewhere (is there a .css file linked?) that is overriding the attribute. Check that you have specified this correctly as you pasted. I just cut+pasted your stylesheet and tried it and it did hide all results including "x pages of results", "Result pages: 1 2 3...", etc.

Note that once you get it working, the above also hides the actual search results. You would need to set all your other style classes (which you want to actually appear) to have a visibility: visible; attribute, eg.

.context {font-family: arial; font-size: 80%; visibility: visible; }

As for the line "The following word(s) are in the skip word list...", it is hardcoded to be in italics. One tricky way to get around it would be to change the text in the language file to be "[/i]The following word(s)... [i]", which would open/close the matching italic tags before and after the text phrase.

When you are customizing the search page like this, you really should open the search page in a browser, perform a search query, and then click "View Source". Looking at the HTML source of the output, you can determine how to best modify the page ... which lines belong to which CSS attribute etc.
Anonymous
02-22-2005, 07:44 AM
http://www.zeptown.de/villareal/neweco5/

Sorry, didnt want to paste my code. Have a lot of css styles linked within the search_template file. Dont see why the .results css style should be the only one to be overwritten by other styles, while .summary etc. work fine. Thanks for you help. Please perform a search on my test-page.
Once I come to Australia, Ill bring you guys some bottles of German beer... Promise ;)

Jo
Anonymous
02-22-2005, 07:48 AM
Just in case my search_template file...

<html>
<head>
<title>eco5.com | Search Engine and Link Portal. For Finance and Economics. | Jobs & Internships, Historical Data, Working Papers, Research Links, etc. </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css_styles/links.css" type="text/css">
<link rel="stylesheet" href="css_styles/line.css" type="text/css">
<link rel="stylesheet" href="css_styles/formobjects.css" type="text/css">
<link rel="stylesheet" href="css_styles/one.css" type="text/css">
<link rel="stylesheet" href="css_styles/textfieldbeschriftung.css" type="text/css">

<link rel="stylesheet" href="css_styles/margin.css" type="text/css">
<link rel="stylesheet" href="css_styles/blackline.css" type="text/css">
<link rel="stylesheet" href="css_styles/one10.css" type="text/css">
</head>
<style>
html,body &#123;
height&#58; 100.1%;
&#125;
</style>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-1252">
<style>
.highlight &#123; font-weight&#58; bold; &#125;
.searchheading &#123; font-family&#58; arial; font-size&#58; 70%; font-weight&#58; bold;margin-top&#58;-20px; &#125;
.summary &#123;font-family&#58; arial; font-size&#58; 60%; font-style&#58; bold; margin-top&#58;-20px; &#125;
.results &#123;font-family&#58; arial; font-size&#58; 60%; font-style&#58; bold; &#125;

.category &#123; font-family&#58; arial; font-size&#58; 80%; color&#58; #0000cc; &#125;
.description &#123; font-family&#58; arial; font-size&#58; 80%; color&#58; #333333; &#125;
.context &#123;font-family&#58; arial; font-size&#58; 80%; &#125;
.infoline &#123; font-family&#58; arial; font-size&#58; 80%; font-style&#58; normal; color&#58; #008000; &#125;
.sorting &#123; text-align&#58; right; &#125;
.result_title &#123;font-family&#58; arial; font-size&#58; 100%; margin-top&#58;-10px; &#125;
small &#123; font-family&#58; arial; font-size&#58; 60%; font-style&#58; bold; &#125;

.zoom_searchform &#123; font-size&#58; 100%; &#125;
.zoom_options &#123; font-size&#58; 80%; &#125;
input.zoom_button &#123; &#125;
input.zoom_searchbox &#123; &#125;

</style>
</head>

[Edited by Admin: Rest of HTML file has been chopped. That's all we needed]
Ray
02-23-2005, 12:28 AM
We had a closer look, and noticed there is a bug. The ".results" css class appears to be completely missing from the CGI output (thus it had no effect). We'll make sure to update this in the next build (4.0.1012).

In the meantime however, there is a workaround. Since your results are in a table cell (td), you can assign a style to it and it will be picked up by everything in the search results (pretty much equivalent to what .results would have done):

td { font-family: arial; font-size: 60%; font-style: bold; }

However, you will notice that this will also affect everything else in the search results such as the descriptions, URL line etc. This is because your font sizes are specified as percentages, which means that they will become a percentage of the parent class. ie: if you set "td" to be 60%, and ".searchheading" to be 80%, then the result would be 80% of 60%. You'll need to change your font-sizes to compensate for this, eg:


td &#123;font-family&#58; arial; font-size&#58; 60%; font-style&#58; bold; &#125;
.searchheading &#123; font-family&#58; arial; font-size&#58; 110%; font-weight&#58; bold;
.summary &#123;font-family&#58; arial; font-size&#58; 110%; font-style&#58; bold; &#125;
.category &#123; font-family&#58; arial; font-size&#58; 140%; color&#58; #0000cc; &#125;
.description &#123; font-family&#58; arial; font-size&#58; 140%; color&#58; #333333; &#125;
.context &#123;font-family&#58; arial; font-size&#58; 140%; &#125;
.infoline &#123; font-family&#58; arial; font-size&#58; 140%; font-style&#58; normal; color&#58; #008000; &#125;
.sorting &#123; text-align&#58; right; font-size&#58; 140%; &#125;
.result_title &#123;font-family&#58; arial; font-size&#58; 140%; margin-top&#58;-10px; &#125;
small &#123; font-family&#58; arial; font-size&#58; 100%; font-style&#58; bold; &#125;

When you upgrade to the new build (with ".results" added to the CGI - should be available in the coming week or so), all of the above still applies. You can just rename "td" with ".results" in the CSS above.