This FAQ is Part 3 of the series on using template codes to customize the search results page design for PicoSearch Professional and Premium accounts. For the beginning of the series, see Template Codes Overview FAQ
3. Style Control Codes: attach your own CSS classes to parts of the search results page
Here we discuss a list of codes that focus on controlling styles, by assigning Cascading Style Sheet classes to components of the search results. By assigning your own class names, you can control display variables that are not otherwise controllable, such as the background color of the text input box.
PicoSearch's Style Control codes are all of form PICO_CLASS_(part), where (part) is the HTML component of the search results where you want to attach your class instead of PicoSearch's default class. This gives you very specific control, or alternatively you can simply turn off all of PicoSearch's default classes in your results by using the PICO_RM_CLASS_PICO code, which is covered in the next FAQ section on Layout Control Codes.
Like the Parts Substitution codes, the Style Control codes are in the style of HTML commented lines, so that you can develop your template without them being visible. In practice, they will be mined and stripped from your final search results display, so no one will know, even in the source code, that PICO custom codes were utilized. We suggest that you put them in the head of your template, as you would for meta tags.
There are many class codes to set the class for each of the many individual pieces you may wish to modify. Use only the ones that interest you. As an example:
<!-- PICO_CLASS_INPUT_SEARCH searchboxclass -->
This class code makes the search input box get class=searchboxclass added to its input tag attributes:
<input type="text" class="searchboxclass" name="query" size="40" />
So then the following CSS definition, for example, would make the search box pink and italic:
<style>
<!--
.searchboxclass {background:pink; font-style:italic}
--> </style>
- PICO_CLASS_TABLE_ALL
set the class of table containing the entire results
Note: Usage of this code may override the Font Face and Width of Results settings from your account manager's "Colors, Fonts & Display" and "Page Design" sections. If you use this template code, be sure to specify your desired overall font face and results width in your CSS class.
- PICO_CLASS_TABLE_SEARCH
set the class of table containing the search box
- PICO_CLASS_INPUT_SEARCH
set the class of text input for the search box
- PICO_CLASS_TD_SEARCH
set the class of column containing the search box
- PICO_CLASS_INPUT_BUTTON
set the class of the search button
- PICO_CLASS_TD_BUTTON
set the class of column containing the search button
- PICO_CLASS_INPUT_WITHIN
set the class of checkbox for 'within results' option
- PICO_CLASS_TD_WITHIN
set the class of column containing 'within results' option
- PICO_CLASS_TD_HELP
set the class of column containing the help link
- PICO_CLASS_A_HELP
set the class of help link
- PICO_CLASS_A_PICO
set the class of 'powered by picosearch' link
- PICO_CLASS_SELECT_PARTITION
set the class of partition select box
- PICO_CLASS_TD_PARTITION
set the class of column containing partition select box
- PICO_CLASS_SELECT_ANYALL
set the class of any/all/exact select box
- PICO_CLASS_TD_ANYALL
set the class of column containing any/all/exact select box
- PICO_CLASS_SELECT_DATESORT
set the class of date sorting selection
- PICO_CLASS_TD_DATESORT
set the class of column containing date sorting selection
- PICO_CLASS_TD_NOTFOUND
set the class of column containing 'not found' message
- PICO_CLASS_SPAN_SEARCHLABELS
set the class of span containing the labels for the last search (eg. Search, ignoring )
- PICO_CLASS_SPAN_TERMS
set the class of span containing the words of last search
- PICO_CLASS_SPAN_NUMDOCS
set the class of span containing the reported number of documents found
- PICO_CLASS_A_PREVNEXT
Set the class of previous and next links in the pagebar for more than one page of results. Notice that this class gets added to both the links for other pages, and also as a span on the unlinked current page. Thus, you could make the current unlinked page have its own behavior, such as a pink background overridden by white links in the following example:
<style>
<!--
.currentpink {background:pink}
a.currentpink {background:white}
--> </style>
<!-- PICO_CLASS_A_PREVNEXT currentpink -->
- PICO_CLASS_HR_1
set the class of first hard rule line, after the search box
- PICO_CLASS_HR_2
set the class of second hard rule line, before the results
- PICO_CLASS_HR_3
set the class of third hard rule line, after the results
- PICO_CLASS_OL
set the class of the ordered list containing the results
- PICO_CLASS_RESULT_LIST_TABLE
if displaying results in tables instead of an ordered list, this sets the class of the table containing the result list. If you decide to switch back to ordered list display, this will also set the list class if you do not specify a PICO_CLASS_OL as well.
- PICO_CLASS_SPAN_RESULT_NUMBERING
if displaying results in tables instead of an ordered list, this sets the class of spans containing the result numbers
- PICO_CLASS_A_TITLE
set the class of title links of results
- PICO_CLASS_SPAN_TITLE
set the class of spans containing the linked titles of results
- PICO_CLASS_SPAN_CONC
set the class of spans containing the concordance of results
- PICO_CLASS_SPAN_META
set the class of spans containing the meta description of results
- PICO_CLASS_SPAN_TITLEHITS
set the class of spans containing the hit words in result titles (normally bolded)
- PICO_CLASS_SPAN_CONCHITS
set the class of spans containing the hit words in result concordances (normally bolded)
- PICO_CLASS_SPAN_METAHITS
set the class of spans containing the hit words in result meta descriptions (normally bolded)
- PICO_CLASS_SPAN_URL
set the class of spans containing the URLs of results
- PICO_CLASS_SPAN_DATESIZE
set the class of spans containing file date and file size
- PICO_CLASS_A_HIGHLIGHT
set the class of hit highlighter links in the results
- PICO_CLASS_SPAN_HIGHLIGHT
set the class of spans containing the hit hightlighter links in the results
- PICO_CLASS_SPAN_HELP
set the class of spans containing the help text, seen from the help link
- PICO_CLASS_TABLE_HELP
set the class of table of help examples, seen from the help link
- PICO_CLASS_SPAN_QUERYMSG
set the class of messages from query rules, for details see the Query Rules FAQ
|
