Bootstrap theme for unroole

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.

Package Content

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

Widgets

Below is the list of all widgets included in the theme and their configuration options

1. Article collection

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
• 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

2. Article Result

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
• 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"

3. Article

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
• 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

4. Biography

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
• 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

5. Body

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"

6. Breadcrumbs

Displays breadcrumbs based on the selected navigation. Configurable options:

• Navigation: name of the navigation to be used for breadcrumb links

7. Button

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
• 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
• 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

8. Component - Column

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

9. Component Form Field

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
  • email
  • 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
• Input Classes: space-separated class names that will be added to the input tag
• Input Id: id that will be added to the input 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"

10. Component - Form Wrapper

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 the form tag
  • horizontal: .form-horizontal class will be added to the form 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"

11. Component - Map Marker

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

12. Component - Map Wrapper

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

13. Component - Pricing Column

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
• 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
• 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

14. Component - Section

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
• 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"

15. Component - Services Item

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
• 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
• 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

16. Component - Social Media Links

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

17. Event collection

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
• 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

18. Event Result

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
• 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

19. Event

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
• 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

20. FontAwesome Icon

Displays single FontAwesome icon. Configurable options:

• Icon: select the icon by name

21. Footer

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
• 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
• 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
• 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

22. Gallery

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
• 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

23. Glyphicon

Displays single Glyphicon icon Configurable options:

• Icon Name: select the icon by name

24. Google Maps API

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

25. Hero Section

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
• 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"

26. HTML Layout Header

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.

27. HTML Page Header

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.

28. Image

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

29. Lead Text

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

30. Navigation

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
• Navbar Color: Bootstraps default navigation color variations Options:
  • default: renders .navbar-default class
  • inverse: renders .navbar-inverse class
• 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
• Logo: choose an image uploaded to assets by image title or tag

31. Quote Section

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

32. Slideshow

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
• 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

33. Vertical Spacer

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