If you'd like to modify a template to fit your needs, the Instant Answer framework offers preset options called Variants. Variants are passed as the variants property of templates, in your Instant Answer display options.
Variants correspond to pre-determined css classes (or combinations of classes) from the DDG style guide that work particularly well in each context.
We strongly recommend using variants since they make it easy to quickly customize the appearance in a standardized way. However, if variants do not meet your needs, you may consider directly specifying classes.
If the default tile dimensions are not perfect for your Instant Answer result, you can use tile variants to modify the containers of your item template.
base_itemtemplatebasic_image_itemtemplateproducts_itemtemplate
narrow- narrower tile width, normal height ("alarm clock apps", "pa representatives")wide- increased width, normal heightxwide- super wide, normal height ("flight aa102")video- shorter height, increased widthposter- tall and thin, like a movie poster ("the dark knight movie", "currently in theaters")
The following four values for tile variant act as presets for tileTitle and tileSnippet variant. These are combinations that our design team has found to work particularly well together.
basic1- equivalent to settingtileTitle: '2line'andtileSnippet: 'small'("rubygems cucumber")basic2- equivalent to settingtileTitle: '3line-small'andtileSnippet: 'large'basic3- equivalent to settingtileTitle: '3line-large'andtileSnippet: 'small'basic4- equivalent to settingtileTitle: '1line-large'andtileSnippet: 'large'("github zeroclickinfo")
templates: {
...
variants: {
tile: 'poster'
}
}This variant allows you to modify the detail template of your Instant Answer. Currently there is only one detail variant outside the default styling.
- All tile containers (which wrap
itemtemplates)
light- gives the detail area a lighter (white) background, ideally when displaying images with white backgrounds ("electronics coupons")
templates: {
...
variants: {
detail: 'light'
}
}This variant changes the size of the title element, if it exists in the chosen template.
text_itemtemplate
1line1line-large2line- ("perl jobs in san francisco")3line3line-small- ("reddit baking")3line-large
Another way to set a tileTitle variant is to use tile preset options. These are combinations of tileTitle and tileSnippet values that our design team has found to work particularly well together.
templates: {
...
variants: {
tileTitle: '1line'
}
}This variant changes the size of the title element, specifically for the basic_icon_detail template.
basic_icon_detailtemplate
large
templates: {
...
variants: {
iconTitle: 'large'
}
}This variant changes the amount of lines available in the subtitle element, for the text_item template.
text_itemtemplatebasic_icon_detailtemplate
2line
templates: {
...
variants: {
tileSubtitle: '2line'
}
}This variant changes the amount of space used for the description or content sub-template, if it exists in the chosen template.
text_itemtemplate
smalllarge("global mobile data usage", "rubygems cucumber")
Another way to set a tileSnippet variant is to use tile preset options. These are combinations of tileTitle and tileSnippet values that our design team has found to work particularly well together.
templates: {
...
variants: {
tileSnippet: 'small'
}
}This variant changes the amount of space allowed for the footer sub-template, if it exists in the chosen template.
text_itemtemplatemedia_itemtemplate
2line("reddit baking")3line("people in space")4line("live shows in london")
templates: {
...
variants: {
tileFooter: '2line'
}
}This variant sets the css float direction of the star rating element, if it exists in the template. As you can see in the examples, it only affects the float behavior of the stars themselves - not any accompanying elements.
basic_image_item
starsLeft("amazon ninja costume")starsRight("recipes quinoa")
templates: {
...
variants: {
tileRating: 'starsLeft'
}
}For templates containing an icon element, this variant sets its size.
basic_icon_detailtemplate
small("alternative to emacs")mediumlarge
templates: {
...
variants: {
iconImage: 'small'
}
}For templates containing an icon badge (an inline colored container with text), this variant sets its size.
basic_icon_detailtemplate
smallmedium("UV Index", US searches only)large
templates: {
...
variants: {
iconBadge: 'small'
}
}When variants don't suffice, you can directly choose classes based on the DDG style guide through the elClass property of templates, in your Instant Answer display options. This feature is mainly used for specifying text size and color.
Classes can be directly specified to the same elements as Variants; the locations are identical. If you are specifying both variants and elClass, both will be applied together.
Because elClass properties apply to the same properties as variants, its properties are applicable to the respective templates. For example, if you are directly specifying a class for tileFooter, the applicable templates are text_item and media_item.
The values that can be used in the elClass are found in the Text and Colors section of the DuckDuckGo Style Guide. Currently, you can pass the following types of classes:
- Precision font sizes (classes which begin with
.tx--, such as.tx--25) - Text colors (classes which begin with
.tx-clr--, such as.tx-clr--dk)
elClass is parallel to variants in syntax, and both options can be specified under templates simultaneously. The properties are the same as those documented as Variants.
templates: {
...
elClass: {
tileSubtitle: 'tx--25',
tileFooter: 'tx--11',
...
}
}To create a rounded icon, the Chinese Zodiac Goodie uses both elClass and variants together.
This is a Goodie, and these properties were set in Perl, on the server:
templates => {
group => "icon",
elClass => {
iconImage => "bg-clr--blue-light circle"
},
variants => {
iconImage => 'large'
}
}You can learn more about setting Goodie display options in Perl.
- Tor Node: "tor node 198.96.155.3" (code)