Stylesheet

The stylesheet object and methods for adding stylesheets.

Properties

Properties of {{ stylesheet }} objects
Name	Type	Description
`object_type`	string	Will always be stylesheet
`is_valid`	boolean	True if this references a published stylesheet
`guid`	string	The unique identifier for this stylesheet
`value`	string	Contains the same value as guid
`name`	{{ text }}	The name of the stylesheet which, when combined together with the path, uniquely identifies the stylesheet on this site
`path`	string	The path, excluding filename, of this stylesheet used for organizational and reference purposes
`stylesheet_type`	{{ select }}	Stylesheet language. May either be "css", "less", or "scss"
`compiled`	boolean	If true, indicates that this is a top-level stylesheet that should be compiled
`parse_liquid`	boolean	If true, indicates that this stylesheet contains Liquid Markup that should be rendered before the stylesheet is processed and output
`url`	string	The full URL for this stylesheet in the CDN
`style_sheet_text`	{{ code }}	The source code for this stylesheet
`style_sheet_text_compiled`	string	The full processed and compiled stylesheet text if this is a compiled stylesheet
`field_id`	string	The identifier for this field
`label`	string	The label for this field
`output`	string	Adds the stylesheet to the document head, similar to calling {% add_stylesheet %} with it

Contains multiple stylesheets.

Properties

Properties of {{ stylesheets }} objects
Name	Type	Description
`object_type`	string	Will always be stylesheets
`is_valid`	boolean	True if this contains at least one published stylesheet
`output`	string	The default output that the stylesheets will produce when it is output directly to the template - using the "output_in_list" property of each stylesheet in the items list
`prepended`	list	List containing any prepended stylesheets.
`fetched`	list	List containing all of the stylesheets that were fetched from the database (as opposed to prepended or appended).
`appended`	list	List containing any appended stylesheets.
`appended_unique`	list	List containing any appended stylesheets excluding any stylesheets that are in either the list of prepended or fetched stylesheets.
`items`	list	List containing all of the combined stylesheets from the prepended, fetched, and appended lists. If unique is true, this list will not contain any duplicates. If max_size is set, this list will not contain more than the number of stylesheets specified.
`size`	integer	The total number of stylesheets in the items list, including prepended, fetched, and appended lists, and respecting the unique and max_size properties.
`max_size`	integer	If set, this is the maximum number of items that will be returned in the items list and the maximum number of items that will be included when this stylesheets object is enumerated as a list. When not set, this value will be 0.
`unique`	boolean	When true, the items list will not contain any duplicates. Only the first instance of each stylesheet will be included.
`limit`	integer	The maximum number of items that were allowed to be in the list of fetched stylesheets. May be 0 in some cases (such as when when there are no fetched stylesheets.
`start`	integer	The 1-based index of the first item in the list of fetched stylesheets.
`page`	integer	The 1-based index of the paginated results returned in the list of fetched stylesheets, which is calculated from the start and limit parameters. Useful for paginated results.
`total_count`	integer	The 1-based index of the first item in the list of fetched stylesheets
`total_pages`	integer	If any items were fetched from the database, total_pages will contain the number of paginated result pages in the database for the provided arguments. This may also be calculated using the total_count and limit properties.

{% stylesheet %}

{% stylesheet output_to_template? [[var, set, or assign]? variable]? output_to_template? = value %}

Parameters

output_to_template optionalflag

If included the {% stylesheet %} will be output directly to the template.

var, set, or assign optionalkeyword

Optional. Specify either "var", "set" or "assign" to change which scope this {% stylesheet %} is stored on. "var" is the default behavior.

variable_name optionalvariable

Specify a variable name in order to save this stylesheet to a variable. If not specified, it will be output to the template instead.

value requiredexpression

Should evaluate to an object of type stylesheet, or the name or guid of one. May use liquid filters.

Fetches a single {{ stylesheet }}.

{% stylesheets %}

{% stylesheets output_to_template? [[var, set, or assign]? variable]? output_to_template? = arguments %}

Parameters

output_to_template optionalflag

If included the {% stylesheets %} will be output directly to the template.

var, set, or assign optionalkeyword

Optional. Specify either "var", "set" or "assign" to change which scope this {% stylesheets %} is stored on. "var" is the default behavior.

variable optionalvariable

arguments requiredcollection

Key:value pairs. May use the variable arguments syntax.

Options

prepend optionallist

May be a single stylesheet, a list of stylesheets, or the name or guid of one stylesheet, to be included at the beginning of the stylesheets list.

append optionallist

May be a single stylesheet, a list of stylesheets, or the name or guid of one stylesheet, to be included at the end of the stylesheets list.

exclude optionallist

May be a single stylesheet, a list of stylesheets, or the name or guid of one stylesheet that should NOT be included in the fetched results. Has no effect on prepended or appended stylesheets.

exclude_prepended optionalboolean

True to specifically exclude all prepended stylesheets from the fetched results. If "unique:true" is specified this is the default behavior, although you may also specify "exclude_prepended:false" to allow any prepended items to be fetched along with other results anyway.

exclude_appended optionalboolean

True to specifically exclude all appended stylesheets from the fetched results. This is false by default - even if "unique:true" is specified - so that results are returned in the proper order.

unique optionalboolean

True to remove duplicates from each of the resulting lists (prepended, fetched, appended, and items), although there may be duplicates between the prepended, fetched, and appended lists. The "items" list will include objects in the order in which they appear - with prepended items first, then fetched items, then appended items.

max_size optionalinteger

The maximum number of items to be included in the "items" list. If there are any prepended or appended items, this will automatically lower the "limit" to only fetch as many stylesheets as needed. Note that this may also impact both the "page" and "total_pages" values in the resulting stylesheets. In order to use pagination with a list loaded using "max_size" use "start" instead of "page" and "limit".

stylesheet_type optionalvalue

Only include stylesheets of the given type

compiled optionalvalue

Only include stylesheets that either are or are not compiled

is_legacy optionalvalue

only include stylesheets that are marked as using a legacy compiler

path optionalvalue

May include multiple paths. Only include stylesheets with one of the given paths (excluding child paths)

date_created_start optionalvalue

Only include stylesheets with date_created greater than or equal to date_created_start. Remember that date_created will typically be the date that the stylesheet was first published.

date_created_end optionalvalue

Only include stylesheets with date_created less than or equal to date_created_end. Remember that date_created will typically be the date that the stylesheet was first published.

start optionalinteger

Set the 1-based index of the first stylesheet to fetch.

page optionalinteger

Used to automatically calculate the first stylesheet to fetch based on both the "limit" and the 1-based "page" value. Defaults to 1, but is ignored if "start" is set.

limit optionalinteger

The maximum number of stylesheets to fetch. Defaults to 10. Note that if "max_size" is defined, then "limit" may be automatically lowered even if specified separately.

sort_by optionalstring

Specify which property to sort the results by. Has no effect on prepended or appended stylesheets. Options include:

date_created: the date each stylesheet was first published. Unpublishing and republishing one resets date_created to the current date.
random: results will be returned in a random order, which prevents the page from being fast-cached. Setting cache_random:true overrides this behavior and allows the page to be fast-cached anyway.
name
title
url
browser_title

sort_direction optionalstring

asc or desc.

cache_random optionalboolean

True to allow the results to be cached when sort_by is "random".

Fetches a list of {{ stylesheets }}.

{% add_stylesheet %}

Add a stylesheet asset to the head of the current page via a <link> tag

{% add_stylesheet value attributes %}

Parameters

value requiredobject

attributes optionaldictionary

Key:value pairs with unique keys. May use the variable arguments syntax. Additional attributes to include on the link tag. Attributes must have string values. "link" and "rel" are not allowed as they will always be set by this method.

Options

position optionalvalue

Where to output the stylesheet in the current page. May either be "head", "body", or "in_place". If "head", the stylesheet will be output inside the HTML head, if "body", the stylesheet will be output at the end of the 'body' tag. If "in_place", the stylesheet will be output immediately to the template. The default is "head", which typically results in the best browser performance.

Example How to use the add_stylesheet methodAdd linked or inline stylesheets to a page with add_stylesheet; use path, third-party URL with attributes, or inline named/in-place blocks.

Add linked stylesheet from a path

{% add_stylesheet "/bootstrap/bootstrap.scss" %}

Adds the stylesheet from the specified path to the page. This is the simplest way to add a stylesheet to a page and may be used from any template.

Add third-party stylesheet with additional custom attributes

{% add_stylesheet "/https://cdn.thirdpartyservice.com/path/to/stylesheet" crossorigin:'anonymous' integrity:'sha384-...' %}

Adds the third-party stylesheet to the head of the page with the specified crossorigin and integrity attributes.

Add inline stylesheet

{%- add_stylesheet inline xxkr_footer_frompage -%}
//Use your imagination here!
#footer {
  background-color: '{{entity.footer_background_color}}';
  color: '{{entity.footer_text_color}}';
}
{%- end_stylesheet -%}

Adds the inline stylesheet to the body of the page. Because the stylesheet is named (xxkr_once), the stylesheet will only be added once and can be used in one or more partial templates which may be included multiple times in a page. Each stylesheet to be included should have a unique name.Adds the inline stylesheet to the page. Because the stylesheet is named (xxkr_footer_frompage), the stylesheet will only be added once and can be used in one or more partial templates which may be included multiple times in a page. Each stylesheet to be included should have a unique name.

Add inline stylesheet in place

{%- for item in (1..3) -%}
	{%- id itemid = prefix:'item_' -%}
	<div id="{{itemid}}">{{item}}</div>
	{%- add_stylesheet inline = position:'in_place' -%}#{{itemid}} { background-color: '{{ cycle xxkr_itemcolor: '#CCC', 'rgba(242, 122, 55, 0.7)', 'black' }}'; }
{%- end_stylesheet -%}
{%- endfor -%}

Adds the inline stylesheet immediately to the page, which will result in a separate style tag for each item. There are typically better ways to achieve the same result, but there are times when this may be the most practical solution.

{% add_stylesheet inline %}

Outputs an inline stylesheet in a <style> tag.

{% add_stylesheet inline [uniquename] [= attributes]? %}

Parameters

uniquename optionalstring

If included, only one style tag will be included for each uniquename. This makes it safe to add an inline stylesheet in one or more partial templates which may be included multiple times in a page.

attributes optionaldictionary

Key:value pairs with unique keys. May use the variable arguments syntax.

Options

position optionalvalue

Where to output the style tag in the current page. May either be "head", "body", or "in_place". If "head", the style tag will be output inside the HTML head, if "body", the style tag will be output at the end of the 'body' tag. If "in_place", the style/link tag will be output immediately to the template. The default is "head", which typically results in the best browser performance.

other optionalvalue

Additional attributes to include on the style tag (such as "media", "id", or "disabled"). Additional attributes must have string values

{% end_stylesheet %}

This method creates a new liquid context for storing and manipulating variables.

Example How to use the add_stylesheet methodAdd linked or inline stylesheets to a page with add_stylesheet; use path, third-party URL with attributes, or inline named/in-place blocks.

Add linked stylesheet from a path

{% add_stylesheet "/bootstrap/bootstrap.scss" %}

Adds the stylesheet from the specified path to the page. This is the simplest way to add a stylesheet to a page and may be used from any template.

Add third-party stylesheet with additional custom attributes

{% add_stylesheet "/https://cdn.thirdpartyservice.com/path/to/stylesheet" crossorigin:'anonymous' integrity:'sha384-...' %}

Adds the third-party stylesheet to the head of the page with the specified crossorigin and integrity attributes.

Add inline stylesheet

{%- add_stylesheet inline xxkr_footer_frompage -%}
//Use your imagination here!
#footer {
  background-color: '{{entity.footer_background_color}}';
  color: '{{entity.footer_text_color}}';
}
{%- end_stylesheet -%}

Add inline stylesheet in place

{%- for item in (1..3) -%}
	{%- id itemid = prefix:'item_' -%}
	<div id="{{itemid}}">{{item}}</div>
	{%- add_stylesheet inline = position:'in_place' -%}#{{itemid}} { background-color: '{{ cycle xxkr_itemcolor: '#CCC', 'rgba(242, 122, 55, 0.7)', 'black' }}'; }
{%- end_stylesheet -%}
{%- endfor -%}

{% include %}

Processes and outputs a partial template, javascript, or stylesheet. If the partial template is a compiled template, then any custom fields from the partial template will be available in the parent template as well.

{% include [template|javascript|stylesheet]? variable =? attributes? %}

Parameters

type optionalstring

Explicit type selector: template, javascript, or stylesheet. If not specified, the object to be included will be the same as the type of the current ojbect (in a template this will default to template, etc...).

variable requiredobject

May be the template, javascript, or stylesheet object to include, the unique identifier for the object to include, or the relative or absolte path to the template, javascript, or stylesheet

attributes optionaldictionary

Key:value pairs with unique keys. May use the variable arguments syntax. Variables to set on the created scope before the included object is processed

This method creates a new liquid context for storing and manipulating variables.

The path is significant when including objects. Every template, javascript, and stylesheet has a path, even if that is the "root path" (/). The location of the path to be included will always be based off of the path of the current object. So including 'header' from a template at the path '/pages' will attempt to process '/pages/header' while the same include from a template at the root path - which would attempt to process '/header'. You always have the option of using an "absolute path" when including templates by beginning your included template name with '/'. Eg: {% include '/header' %} or {% include '/partials/header' %}. Absolute paths ignore the path of the current template when determining what partial to include. You can also navigate up the directory structure using '../'. So including '../partials/header' from a template at the path '/agency/pages' will attempt to process '/agency/partials/header'.

Example Capturing markup and passing it to an included templateCapture a block of markup with the capture tag and pass it to an included template as a variable.

{%- capture blockContent -%}
	<div class="block-outer">
		<h3 class="block-title">
			{%- if article.default_page_url.is_valid -%}
				<a href="{{article.default_page_url.value}}">{{article.title}}</a>
			{%- else -%}
				{{-article.title-}}
			{%- endif -%}
		</h3>
		<div class="block-description">{{article.summary_html}}</div>
		<div class="block-footer">Posted {{article.post_date}}</div>
	</div>
{%- endcapture -%}
{%- include "_block_outer" content:blockContent -%}

Example Checkbox Include Partial TemplateInclude a partial template conditionally when a checkbox (or other) field is checked.

<p>Show Sidebar? <strong>{{ page.show_sidebar }}</strong></p>
{%- if page.show_sidebar.checked -%}
	{%- include "Sidebar" -%}
{%- endif -%}

Example Include a template whose name is in a variableDemonstrates multple ways to dynamically include a template. Note that in all of these examples, the template fields will NOT be compiled in the page definition.

Dynamically Include a Template from a Variable

{%- var dynamicTemplate = "/partials/footer-main.liquid" -%}
{%- include dynamicTemplate -%}

Dynamically Include Template from a Select List

{%- if page.page_layout.is_valid -%}
	<div class="sidebar-{{ page.page_layout.value }}">
		{%- var includeTemplate = "/theme/sidebar/" | append:page.page_layout.value -%}
		{%- include includeTemplate -%}
	</div>
{%- endif -%}

Assuming that page_layout is a select field or similar, this code dynamically creates the name of the template to include based on the selected value.

Dynamically Include Multiple Templates from a TemplateList Field

{%- if page.sidebar_sections.count > 0 -%}
	{%- for section in page.sidebar_sections.selected -%}
		{%- include section -%}
	{%- endfor -%}
{%- endif -%}

Assuming that sidebar_sections is a templatelist field or similar, this code dynamically includes each of the selected templates.

Check if a dynamic template exists before including it

{%- template var dynamicTemplate = "/theme/sidebar/" | append: page.sidebar_section.value | append: ".liquid" -%}
{%- if dynamicTemplate.is_valid -%}
	{%- include dynamicTemplate -%}
{%- endif -%}

Assuming that sidebar_sections is a templatelist field or similar, this code dynamically includes each of the selected templates.

Example How to use the {% include %} method

Basic use case

{% include "/_header.liquid" %}

Includes the partial template from the specified path. This is the simplest way to include a partial template.

Include partial by string with attributes

{% include "/sections/_banner.liquid" section_class:'banner-section mb-5' show_title:true show_description:false %}

Includes the partial template from the specified path. The new scope created by the include method will have the specified attributes available as variables.

Expanded example with relative and absolute paths

{%- search searchCollection "keyword" limit:10 page:search-page -%}
{%- for result in searchCollection -%}
	{%- include "./search-result.liquid" item:result -%}
{%- endfor -%}
{%- include "/shared/_pagination.liquid" collection:searchCollection style:"links" max_links:5 -%}

Includes the partial template from the specified path. The relative path is relative to the current template, and the absolute path is relative to the root of the website.

Example Inline javascript from templateOutput inline JavaScript from template variables (e.g. for config or data) with proper escaping.

<script>{% include javascript "/javascript/inlined/blog" %}</script>
OR
{%- javascript js = "/javascript/inlined/blog" -%}
{%- if js is_valid -%}
<script>{% include js %}</script>
{%- endif -%}

Example Include sidebar template unless a query param is falseInclude a sidebar template only when a query parameter is not false, using unless.

{%- unless request.query_params contains "show_sidebar=false" -%}
	{%- if request.query_params has_key "show_sidebar" -%}
		{%- include "_custom_sidebar" type:request.query_params.show_sidebar -%}
	{%- else -%}
		{%- include "_default_sidebar" type:request.query_params.show_sidebar -%}
	{%- endif -%}
{%- endunless -%}