Bootstrap theme for unroole is a fully functional multipurpose website, with standard pages (homepage, blog, events, contact us, single blog post and event) and a kitchensink page where all widgets and their various configurations are showcased. Kitchensink page will be very useful when you’re building your own custom pages as you can simply copy and paste particular widgets structure you would like to use and modify.
bootstrap
|- css
| |- Main.css
|
|- frameworks
| |- bootstrap
| | |- bootstrap
| | |- css
| | | |- bootstrap.min.css
| | |
| | |- fonts
| | | |- glyphicon-halflings-regular.eot
| | | |- glyphicon-halflings-regular.svg
| | | |- glyphicon-halflings-regular.ttf
| | | |- glyphicon-halflings-regular.woff
| | | |- glyphicon-halflings-regular.woff2
| | |
| | |- js
| | |- bootstrap.min.js
| |
| |- Font Awesome 4.4.0
| |- Font Awesome 4.4.0
| |- css
| | |- font-awesome.css
| | |- font-awesome.min.css
| |
| |- fonts
| |- fontawesome-webfont.eot
| |- fontawesome-webfont.svg
| |- fontawesome-webfont.ttf
| |- fontawesome-webfont.woff
| |- fontawesome-webfont.woff2
| |- FontAwesome.otf
|
|- js
| |- jquery.min.js
|
|- templates
| |- layouts
| | |- Default.json
| |
| |- pages
| | |- Blog Result.json
| | |- Blog.json
| | |- Contact Us.json
| | |- Event Result.json
| | |- Events.json
| | |- Home.json
| | |- Kitchen Sink.json
| | |- Team.json
| |
| |- widgets
| |- Article Collection.json
| |- Article Collection.liquid
| |- Article Result.json
| |- Article Result.liquid
| |- Article.json
| |- Article.liquid
| |- Biography.json
| |- Biography.liquid
| |- Body.json
| |- Body.liquid
| |- Biography.json
| |- Biography.liquid
| |- Breadcrumbs.json
| |- Breadcrumbs.liquid
| |- Button.json
| |- Button.liquid
| |- Component - Column.json
| |- Component - Column.liquid
| |- Component - Form Field.json
| |- Component - Form Field.liquid
| |- Component - Form Wrapper.json
| |- Component - Form Wrapper.liquid
| |- Component - Map Marker.json
| |- Component - Map Marker.liquid
| |- Component - Map Wrapper.json
| |- Component - Map Wrapper.liquid
| |- Component - Pricing Column.json
| |- Component - Pricing Column.liquid
| |- Component - Section.json
| |- Component - Section.liquid
| |- Component - Services Item.json
| |- Component - Services Item.liquid
| |- Component - Social Media Links.json
| |- Component - Social Media Links.liquid
| |- Event Collection.json
| |- Event Collection.liquid
| |- Event Result.json
| |- Event Result.liquid
| |- Event Result.json
| |- Event single.json
| |- Event single.liquid
| |- Font Awesome Icon (v.4.4.0).json
| |- Font Awesome Icon (v.4.4.0).liquid
| |- Footer.json
| |- Footer.liquid
| |- Gallery.json
| |- Gallery.liquid
| |- Glyphicon.json
| |- Glyphicon.liquid
| |- Google Maps Api.json
| |- Google Maps Api.liquid
| |- Hero Section.json
| |- Hero Section.liquid
| |- HTML Layout Header.json
| |- HTML Layout Header.liquid
| |- HTML Page Header.json
| |- HTML Page Header.liquid
| |- Image.json
| |- Image.liquid
| |- Lead Text.json
| |- Lead Text.liquid
| |- Navigation.json
| |- Navigation.liquid
| |- Quote Section.json
| |- Quote Section.liquid
| |- Slideshow.json
| |- Slideshow.liquid
| |- Vertical Spacer.json
| |- Vertical Spacer.json
|
|- properties.xml
Below is the list of all widgets included in the theme and their configuration options
Displays collection of articles based on the category and/or type. Should be placed on pages that display article collections (ie. blog, news). Configuration options:
- Width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Show Metadata: controls display of published date, author name and category of articles in the collection list.
Options:
- yes
- no
- Show Featured Image: controls display of featured images of articles in the collection list.
Options:
- yes
- no
- Pagination: controls display and type of pagination as per Bootstrap default types.
Options:
- none: pagination will not be outputed
- simple: outputs Bootstraps simple pagiantion with only previous and next page links
- numbered: outputs Bootstraps numbered pagination links
- Truncation Length In Chars: How many characters of each article to display before read more link. Default value is 300
- HTML Attributes: custom attributes that will be aplied to the container section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Article collection: default options for article collection
Options:
- category: select categories of articles to include
- type: select types of articles to include
- per page: number of articles to display per page
- results page: page which will be used to display single article when read more link is clicked
- filter articles by tags: coma-separated list of tags to filter the articles by
Displays article from a collection on a single page. Should be placed on a results page that will display single articles when read more links are clicked within the article collection. Configuration options:
- Width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Show Author: controls display of author name
Options:
- yes
- no
- Show Featured Image: controls display of articles featured image at the top of the article
Options:
- yes
- no
- Show Category: controls display of articles category
Options:
- yes
- no
- Published_Date: controls display and format of articles published date.
Options:
- Do Not Show: published date will not be displayed
- Apr 22, 2014
- Tue Apr 22 11:16:09 2014
- 2014-04-22
- Show Related Articles: controls display of related articles collection below the article. Related articles are generated based on the category of the article displayed
Options:
- yes
- no
- HTML Attributes: custom attributes that will be aplied to the container section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
Selects and displays single article content. Configuration options:
- Width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Show Author: controls display of author name
Options:
- yes
- no
- Show Featured Image: controls display of articles featured image at the top of the article
Options:
- yes
- no
- Show Category: controls display of articles category
Options:
- yes
- no
- Published Date: controls display and format of articles published date.
Options:
- Do Not Show: published date will not be displayed
- Apr 22, 2014
- Tue Apr 22 11:16:09 2014
- 2014-04-22
- Show Related Articles: controls display of related articles collection below the article. Related articles are generated based on the category of the article displayed
Options:
- yes
- no
- HTML Attributes: custom attributes that will be aplied to the container section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Article: select article to display based on title
Options:
- article: article title
- results page: page which will be used to display single article when read more link is clicked
Displays a single biography article. Should be placed inside Component Section widget. Configuration options:
- Width: width of the article section. Corresponds to column numbers in Bootstrap.
Options:
- 1/1 : full width. Renders
.col-md-12
class - 1/2 : half width. Renders
.col-md-6
class - 1/3 : one third width. Renders
.col-md-4
class - 1/4: one fourth width. Renders
.col-md-3
class
- 1/1 : full width. Renders
- Show Image: controls display of featured image of an article.
Options:
- yes
- no
- Image Shape: controls display shape of featured image
Options:
- default: no styling will be aplide
- rounded: image will have rounded corners. Renders
.img-rounded
class on image - circle : image will be rendered as a circle. Renders
.img-circle
class in image
- Icon size: size of the social media icons. These are based on FontAwesome sizes
Options:
- 1x : default font size
- 33% : large size. Renders
.fa-lg
class on the icon - 2x : double the default size. Renders
.fa-2x
class on the icon - 3x: three times the original size. Renders
.fa-3x
class on the icon - 4x: four times the original size. Renders
.fa-4x
class on the icon - 5x: five times the original size. Renders
.fa-5x
- Facebook URL: renders the url to the Facebook profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Twitter URL: renders the url to the Twitter profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- LinkedIn URL: renders the url to the LinkedIn profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Pinterest URL: renders the url to the Pinterest profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Behance URL: renders the url to the Behance profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Dribble URL: renders the url to the Dribble profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- GitHub URL: renders the url to the GitHub profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Website URL: renders the url to the Website behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Email: renders the email portion of the href atribute behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- HTML Attributes: custom attributes that will be aplied to the biography section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Article: select article to display based on title
Options:
- article: article title
- results page: will not be rendered
Renders the body
tag and allows you to add custom attributes to it. Should be placed in layouts. This is a structured widget, which means that other widgets can be placed inside.
Configuration options:
- HTML Attributes: custom attributes that will be aplied to the biography section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
Displays breadcrumbs based on the selected navigation. Configurable options:
- Navigation: name of the navigation to be used for breadcrumb links
Displays Bootstrap styled buttons. This is a structured widget, which means that other widgets can be placed inside. Most commonly you would place Font Awesome Icon widget Configurable options:
- Button Type: controls which tag should be used to render the button.
Options:
- default (a) :
a
tag - button:
button
tag - input:
input
tag
- default (a) :
- Color: Applies bootstraps default color classes
Options:
- default: renders
.btn-default
class - primary: renders
.btn-primary
class - success: renders
.btn-success
class - info: renders
.btn-info
class - warning: renders
.btn-warning
class - danger: renders
.btn-danger
class - link: renders
.btn-link
class
- default: renders
- Size: Applies bootstraps default sizing classes
Options:
- default : no size class will be applied
- large : renders
.btn-lg
class - small : renders
.btn-sm
class - extra small : renders
.btn-xs
class
- Button width: Controlls the width of the button
- auto: width will be depending on the label length
- full: width will be full width of parent container. Renders
.btn-block
class on the button
- Disable: Adds
disabled
attribute to the button: Options:- no
- yes
- Link to page: Select one of the pages published on your website
- Link Override URL: add external url. If added, value of Link to page will be ignored
- Button Label: text label of the button
- HTML Attributes: custom attributes that will be aplied to the button section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Article: select article to display based on title
Options:
- article: article title
- results page: will not be rendered
Renders single Bootstrap column. Should be placed inside the Componend Section widget. This is a structured widget, which means that other widgets can be placed inside. Configurable options:
- Grid Colums on Devices Above 1200px: number for
.col-lg-
class - Grid Colums on Devices Above 992px: number for
.col-md-
class - Grid Colums on Devices Above 768px: number for
.col-sm-
class - Grid Colums on Devices Below 768px: number for
.col-xs-
class - HTML Attributes: custom attributes that will be aplied to the column div.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Article: select article to display based on title
Options:
- article: article title
- results page: will not be rendered
Renders single input field. Should be placed inside Component - Form Wrapper widget. Configurable options:
- Input Type: select type of input you would like to create.
Options:
- text
- checkbox
- radio
- textarea
- password
- number
- url
- datetime
- datetime-local
- date
- month
- time
- week
- search
- tel
- color
- Show Label: shows or hides label of the field
Options:
- yes
- no
- Inline radio or checkbox: if input type is radio or checkbox, you can set to display them inline or not
Options:
- yes: renders
-inline
after class name - no: renders default class name
- yes: renders
- Input Classes: space-separated class names that will be added to the
input
tag - Input Id:
id
that will be added to theinput
tag - Textarea Rows: number of rows for the textarea field
- Radio Group Name: if radio is selected as type, specify the name for the group of more than one radio input
- Checkbox Radio Value: if radio or checkbox are selected as type, add value of the
value
attribute - Label text: String to be used as label. If Show label is set to
no
, label will have.sr-only
class added - Input Placeholder: text that will be used as a value for the
placeholder
attribute - HTML Attributes: custom attributes that will be aplied to
.form-group
div. Options:- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
Wrapps several Component - Form Field widgets into one form. Configurable options:
- Form Orientation: outputs bootstrap classes for form orientation
Options:
- default: no class will be added
- inline:
.form-inline
class will be added to theform
tag - horizontal:
.form-horizontal
class will be added to theform
tag
- Action: form processing url. Will be rendered inside
action
attribute - Method: form processing methid. Will be rendered inside
method
attribute - Form title: Title of the form
- HTML Attributes: custom attributes that will be aplied to form div.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
Renders Google Maps marker on a map. Should be used inside Component - Map Wrapper widget. IMPORTANT NOTICE: in order to load Google Maps API you must add Google Maps API widget inside your layout, to load the API on each page or on a single page to load it only on that page. Configurable options:
- Location Latitude: latitude of the location
- Location Longitude: longitude of the location
- Location Name: Name of the location that will be displayed on marker hover and as a title of the info window when marker is clicked
- Location Description: Description of the location that will be displayed in the infowindow body when marker is clicked
Renders a Google map and markers that are placed inside the widget. IMPORTANT NOTICE: in order to load Google Maps API you must add Google Maps API widget inside your layout, to load the API on each page or on a single page to load it only on that page. Configurable options:
- Zoom level: zoom level of the map. Correspods with the Google Maps API values
- Disable Default Google Maps Controls: controls display of Google Maps controls
Options:
- yes
- no
- Zoom on scroll: controlls whether zoom level of the map can be changed with the mouse scroll.
Options:
- yes
- no
Displays a single column of the Pricing table. Should be placed inside Component - Section widget. Configurable options:
- Width: width of the article section. Corresponds to column numbers in Bootstrap.
Options:
- 1/1 : full width. Renders
.col-md-12
class - 1/2 : half width. Renders
.col-md-6
class - 1/3 : one third width. Renders
.col-md-4
class - 1/4: one fourth width. Renders
.col-md-3
class
- 1/1 : full width. Renders
- Featured plan: applies
.bg-primary
class on the column header inverting the colors and making the plan stand out. Options:- regular : default
- featured : applies
.bg-primary
class
- Text Alignment: sets the alignemnt of all the text
Options:
- left
- right
- center
- justify
- Button Color: Applies bootstraps default color classes
Options:
- default: renders
.btn-default
class - primary: renders
.btn-primary
class - success: renders
.btn-success
class - info: renders
.btn-info
class - warning: renders
.btn-warning
class - danger: renders
.btn-danger
class - link: renders
.btn-link
class
- default: renders
- Button Size: Applies bootstraps default sizing classes
Options:
- default : no size class will be applied
- large : renders
.btn-lg
class - small : renders
.btn-sm
class - extra small : renders
.btn-xs
class
- Button width: Controlls the width of the button
- auto: width will be depending on the label length
- full: width will be full width of parent container. Renders
.btn-block
class on the button
- Link to page: Creates link behind the button. Select one of the pages published on your website
- Link Override URL: add external url. If added, value of Link to page will be ignored
- Button Label: text label of the button
- HTML Attributes: custom attributes that will be aplied to the pricing column section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Plan Name: name of the plan
- Price: price of the plan
- Unit: Price unit name
- Features: list of features of the plan. Will be rendred in the column body
Renders a wrapping element that has .container
and .row
elements. This is a structured widget which means that other widgets can be placed inside. Usually these will be Component - Column widgets.
Configurable options:
- Tag: html tag that will be rendered.
Options:
- section
- div
- main
- Width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- HTML Attributes: custom attributes that will be aplied to the container
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
Services Item widget is designed to showcase blocks of content with an icon on top. Configurable options:
- Width: width of the Services Item section. Corresponds to column numbers in Bootstrap.
Options:
- 1/1 : full width. Renders
.col-md-12
class - 1/2 : half width. Renders
.col-md-6
class - 1/3 : one third width. Renders
.col-md-4
class - 1/4: one fourth width. Renders
.col-md-3
class
- 1/1 : full width. Renders
- Text Alignment: sets the alignemnt of all the text
Options:
- left
- right
- center
- justify
- Icon: select which Font Awesome icon to use at the top
- Icon size: size of the icon. These are based on FontAwesome sizes
Options:
- 1x : default font size
- 33% : large size. Renders
.fa-lg
class on the icon - 2x : double the default size. Renders
.fa-2x
class on the icon - 3x: three times the original size. Renders
.fa-3x
class on the icon - 4x: four times the original size. Renders
.fa-4x
class on the icon - 5x: five times the original size. Renders
.fa-5x
- Icon animation: applies Font Awesome animation classes to the icon
Options:
- none
- spin
- pulse
- Icon Rotation: applies Font Awesome rotation classes to the icon
Options:
- none
- 90 degrees
- 180 degrees
- 270 degrees
- flip horizontal
- flip vertical
- Display Read More Button: controls display of read more button
Options:
- yes
- no
- Button Color: Applies bootstraps default color classes. If Display Read More Button is set to no, this configuration will be ignored.
Options:
- default: renders
.btn-default
class - primary: renders
.btn-primary
class - success: renders
.btn-success
class - info: renders
.btn-info
class - warning: renders
.btn-warning
class - danger: renders
.btn-danger
class - link: renders
.btn-link
class
- default: renders
- Button Size: Applies bootstraps default sizing classes. If Display Read More Button is set to no, this configuration will be ignored.
Options:
- default : no size class will be applied
- large : renders
.btn-lg
class - small : renders
.btn-sm
class - extra small : renders
.btn-xs
class
- Button width: Controlls the width of the button. If Display Read More Button is set to no, this configuration will be ignored.
- auto: width will be depending on the label length
- full: width will be full width of parent container. Renders
.btn-block
class on the button
- Link to page: Creates link behind the button. Select one of the pages published on your website. If Display Read More Button is set to no, this configuration will be ignored.
- Link Override URL: add external url. If added, value of Link to page will be ignored. If Display Read More Button is set to no, this configuration will be ignored.
- Button Label: text label of the button. If Display Read More Button is set to no, this configuration will be ignored.
- HTML Attributes: custom attributes that will be aplied to the pricing column section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Article: select article to display based on title
Displays row of social media links and corresponding icons Configurable options:
- Icon size: size of the social media icons. These are based on FontAwesome sizes
Options:
- 1x : default font size
- 33% : large size. Renders
.fa-lg
class on the icon - 2x : double the default size. Renders
.fa-2x
class on the icon - 3x: three times the original size. Renders
.fa-3x
class on the icon - 4x: four times the original size. Renders
.fa-4x
class on the icon - 5x: five times the original size. Renders
.fa-5x
- Facebook URL: renders the url to the Facebook profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Twitter URL: renders the url to the Twitter profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- LinkedIn URL: renders the url to the LinkedIn profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Pinterest URL: renders the url to the Pinterest profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Behance URL: renders the url to the Behance profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Dribble URL: renders the url to the Dribble profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- GitHub URL: renders the url to the GitHub profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Website URL: renders the url to the Website behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Email: renders the email portion of the href atribute behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
Displays collection of events based on the category and/or location. Should be placed on pages that display events collections. Configuration options:
- Width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Show Metadata: controls display of published date, author name and category of articles in the collection list.
Options:
- yes
- no
- Show Featured Image: controls display of featured images of articles in the collection list.
Options:
- yes
- no
- Pagination: controls display and type of pagination as per Bootstrap default types.
Options:
- none: pagination will not be outputed
- simple: outputs Bootstraps simple pagiantion with only previous and next page links
- numbered: outputs Bootstraps numbered pagination links
- Truncation Length In Chars: How many characters of each article to display before read more link. Default value is 300
- HTML Attributes: custom attributes that will be aplied to the container section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Event collection: default options for event collection
Options:
- category: select categories of articles to include
- location: select types of articles to include
- per page: number of articles to display per page
- results page: page which will be used to display single article when read more link is clicked
Displays event from a collection on a single page. Should be placed on a results page that will display single events when read more links are clicked within the event collection. Besides the event content this widget also renders Google Map with marker placed at the location of the event. When clicked, marker will display infowindow with locations name and description. IMPORTANT NOTICE: in order to load Google Maps API you must add Google Maps API widget inside your layout, to load the API on each page or on a single page to load it only on that page. Configuration options:
- Width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Show Author: controls display of author name
Options:
- yes
- no
- Show Featured Image: controls display of articles featured image at the top of the article
Options:
- yes
- no
- Show Category: controls display of articles category
Options:
- yes
- no
- Date and Time format: controls format of events start and end date and time
Options:
- dd/mm/yy HH:MM am/pm
- dd/mm/yy HH:MM
- Tmm/dd/yy HH:MM am/pm
- mm/dd/yy HH:MM
- Related Events: controls display of related events collection below the event. Related events are generated based on the category or location of the article displayed
Options:
- none
- By Category
- By Location
- HTML Attributes: custom attributes that will be aplied to the container section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Zoom level: zoom level of the map. Correspods with the Google Maps API values
- Disable Default Google Maps Controls: controls display of Google Maps controls
Options:
- yes
- no
- Zoom on scroll: controlls whether zoom level of the map can be changed with the mouse scroll.
Options:
- yes
- no
Selects and displays a single event content and renders the Google Map with marker pointing to events location. IMPORTANT NOTICE: in order to load Google Maps API you must add Google Maps API widget inside your layout, to load the API on each page or on a single page to load it only on that page. Configuration options:
- Width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Show Featured Image: controls display of events featured image at the top of the event
Options:
- yes
- no
- Show Category: controls display of articles category
Options:
- yes
- no
- Date and Time format: controls format of events start and end date and time
Options:
- dd/mm/yy HH:MM am/pm
- dd/mm/yy HH:MM
- Tmm/dd/yy HH:MM am/pm
- mm/dd/yy HH:MM
- Related Events: controls display of related events collection below the event. Related events are generated based on the category or location of the article displayed
Options:
- none
- By Category
- By Location
- HTML Attributes: custom attributes that will be aplied to the container section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
- Event: select an event to display based on title
Options:
- event: event title
- results page: page which will be used to display single event when read more link is clicked
- Zoom level: zoom level of the map. Correspods with the Google Maps API values
- Disable Default Google Maps Controls: controls display of Google Maps controls
Options:
- yes
- no
- Zoom on scroll: controlls whether zoom level of the map can be changed with the mouse scroll.
Options:
- yes
- no
Displays single FontAwesome icon. Configurable options:
- Icon: select the icon by name
Displays footer bar with navigation and social media links. Configurable options:
- Navbar Color: Bootstraps default navigation color variations
Options:
- default: renders
.navbar-default
class - inverse: renders
.navbar-inverse
class
- default: renders
- Container width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Navbar Position: position of the navigation
- default: no class will be applied
- fixed to top: navigation will be fixed to top. Renders
.navbar-fixed-top
class - fixed to bottom : navigation will be fixed to bottom. Renders
.navbar-fixed-bottom
class
- Navigation Links Float: float of the navigation links
Options:
- left: links will float left. Renders
.navbar-left
class - right: links will float right. Renders
.navbar-right
class
- left: links will float left. Renders
- Icon size: size of the social media icons. These are based on FontAwesome sizes
Options:
- 1x : default font size
- 33% : large size. Renders
.fa-lg
class on the icon - 2x : double the default size. Renders
.fa-2x
class on the icon - 3x: three times the original size. Renders
.fa-3x
class on the icon - 4x: four times the original size. Renders
.fa-4x
class on the icon - 5x: five times the original size. Renders
.fa-5x
- Facebook URL: renders the url to the Facebook profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Twitter URL: renders the url to the Twitter profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- LinkedIn URL: renders the url to the LinkedIn profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Pinterest URL: renders the url to the Pinterest profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Behance URL: renders the url to the Behance profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Dribble URL: renders the url to the Dribble profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- GitHub URL: renders the url to the GitHub profile behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Website URL: renders the url to the Website behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Email: renders the email portion of the href atribute behind the corresponding FontAwesome icon. Icon and link will not be rendered if the field is empty
- Copyright Text: text that will be rendered as a copyright text
Displays unroole galleries. Configurable options:
- Container width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Display Caption: controlls display of the caption for each image
Options:
- yes
- no
- *Grid Colums on Devices Above 1200px: number for
.col-lg-
class that will be applied to each image in the gallery - *Grid Colums on Devices Above 992px: number for
.col-md-
class that will be applied to each image in the gallery - *Grid Colums on Devices Above 768px: number for
.col-sm-
class that will be applied to each image in the gallery - *Grid Colums on Devices Below 768px: number for
.col-xs-
class that will be applied to each image in the gallery - *Gallery: select which unroole galery to display by gallery title
Displays single Glyphicon icon Configurable options:
- Icon Name: select the icon by name
Loads Google Maps API. Should be placed in Layout, to load the API on each page or on a single page to load it only on that page. Configurable options:
- Google Maps API Key: your Google Maps API key
Displays Bootstraps Jumpotron with additional elements. This is a structured widget which means that other widgets can be placed inside and they will be rendered below the button Configurable options:
- Choose a Background Image: select an image already uploaded to unroole assets as a background of the Hero Section
- Title Caption: text that will be outputted in the title
- Body Caption: text that will be outputted in the body
- Content position: text alignemnt of all content
Options:
- Center
- Left
- Right
- Text Color: color of the captions text
Options:
- Default : default theme text color
- White
- Button Color: Applies bootstraps default color classes
Options:
- default: renders
.btn-default
class - primary: renders
.btn-primary
class - link: renders
.btn-link
class
- default: renders
- Link to page: Creates link behind the button. Select one of the pages published on your website
- Link Override URL: add external url. If added, value of Link to page will be ignored
- Button Label: text label of the button
- HTML Attributes: custom attributes that will be aplied to the Hero section.
Options:
- tag: id of the section
- classes: classes of the section
- attributes: custom attributes, ie.
data-foo="bar"
Renders <head>
portion of the page. This widget will output page meta description, title and keywords in appropriate meta tags. Also it will output the code that is placed in HTML Page Header widget. This widget doesn't accept any configurations.
Used to output custom code to the <head>
tag of the page it was used in. This is a structured widget which means that it accepts child widgets. Usually you would place Code system widget with the code you would like to be appended to the <head>
tag of that page.
Dsiplays single image uploaded to assets Configurable options:
- Image Shape: controls display shape of featured image
Options:
- default: no styling will be aplide
- rounded: image will have rounded corners. Renders
.img-rounded
class on image - circle : image will be rendered as a circle. Renders
.img-circle
class in image
- Is a link: outputs
<a>
tag around image Options:- yes
- no
Displays text as Bootstraps lead paragrpah. Configurable options:
- Text Alignment: sets the alignemnt of all the text
Options:
- left
- right
- center
- justify
- Lead text: text to output
Displays one of the existing navigation as Bootstraps responsive navigation. Configurable options:
- Container width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Navbar Color: Bootstraps default navigation color variations
Options:
- default: renders
.navbar-default
class - inverse: renders
.navbar-inverse
class
- default: renders
- Navbar Position: position of the navigation
- default: no class will be applied
- fixed to top: navigation will be fixed to top. Renders
.navbar-fixed-top
class - fixed to bottom : navigation will be fixed to bottom. Renders
.navbar-fixed-bottom
class
- Navigation Links Float: float of the navigation links
Options:
- left: links will float left. Renders
.navbar-left
class - right: links will float right. Renders
.navbar-right
class
- left: links will float left. Renders
- Logo: choose an image uploaded to assets by image title or tag
Displays quote and author in a quote style. This is a structured widget, which means that other widgets can be placed inside. Their content will be rendered below the author name. Configurable options:
- Content Position: alignment of the content. Sets the alignemnt of all the text.
Options:
- left
- right
- center
- justify
- Show Quotation Marks: controls display of quotation marks. Options:
- Yes
- No
- Quote Caption: text that will be outputted body of the quote
- Author: text that will be outputted as author of the quote
Displays unroole gallery as Bootstrap Carousel. Configurable options:
- Width: width of the container. Correspodns with Bootstraps fluid and fixed containers.
Options:
- fluid: will output
.container-fluid
class - fixed: will output
.container
class
- fluid: will output
- Display Caption: controlls display of the caption for each image
Options:
- yes
- no
- Loop: Options:
- yes
- no
- Keyboard: allow keyboard controll of the carousel. Options:
- yes
- no
- HTML Identification: unique ID of the carousel
Adds empty vertical space. Configurable options:
- Spacer Height: height in px. Options:
- 10px
- 20px
- 30px
- 40px
- 50px
- 100px
- 200px
- Show Horizontal Rule: controlls display of horizontal line
- yes
- no