Docs



Bootstrap Buttons Installation


There are two ways of installing Bootstrap Buttons. Manually using FTP or automatically through the concrete5 marketplace.

Automatic installation through the concrete5 marketplace is the recommended way to install any concrete5 add-on or theme.

This offers 1 click installs and upgrades.

This method also helps keep you up to date. When a site is connected to the concrete5 community, a message is displayed in the concrete5 dashboard letting you know when an update for an add-on or theme is available.


Automatic Install

1) Start by connecting your site to the concrete5 community. In your concrete5 dashboard, in the intelligent search on the top right, type the word "connect". This will bring up the page "connect to the community" Visit this page.

2) On concrete5.org visit  My Account > Projects

3) View the project that was automatically created when you connected your site to the concrete5 community.

4) Attach the license for Bootstrap Buttons to your project.

5) In your concrete5 dashboard visit  Dashboard > Install

6) Install Bootstrap Buttons


Manual Install

1) On concrete5.org visit  My Account > Transactions > Licenses

2) Click "download archive" on the right side of Bootstrap Buttons

3) Unzip the archive on your desktop

4) Upload the package to your /packages directory in the root of concrete5

5) In your concrete5 dashboard visit  Dashboard > Install

6) Click install Bootstrap Buttons







Add button to page


1) Put your page in edit mode

2) Click on the editable area that you would like to add a Bootstrap Button to and select "add block"

3) Scroll down to the bottom and select "Bootstrap Button"

 
4)

  • Select if the image will be plain, display a built in icon or an image.
  • Add button text or leave the filed empty to display a page name if linked to a page
  • Select a color
  • Enable or disable flat styling
  • Select a button size
  • Select a button shape
  • Select the buttons position (left,right,center)

  • Add a link on the button to an internal page, an external page, or a file.
  • Select the icon or image position if using one
  • Select the buttons target

_self  (Opens the linked document in the same frame as it was clicked) (this is default)
_blank  (Opens the linked document in a new window or tab)
_parent  (Opens the linked document in the parent frame)
_top  (Opens the linked document in the full body of the window)
framename  (Opens the linked document in a named frame)

  • Add margin (spacing) to the button if necessary (top,bottom,left and right)


5) If you selected an icon button now visit the icon tab



6)

  • Select the icons color
  • Click load image icons
  • Click show/hide icons
  • Select an icon by clicking on the one you would like to use



7) Click add




Add button with modal

Modal Example


1) Visit the modal tab

2) Enable the modal by setting to "true"

3) Add content to the tinymce editor

4) Click "add"

5) Once the button is added to the page, while still in edit mode, click on the button. From the popup select "custom template"

There are two custom templates available to choose from

Bootstrap Modal Popover ( for bootstrap based themes, does not load bootstrap JS)
Modal popover ( for non-bootstrap based themes, loads bootstrap JS)

Select the appropriate template then click save.



6) Exit edit mode, publish edits.




Add button with popover


1) Visit the popover tab


2) Set enable popover to "true"

3) Select the popover position (right,left,top,bottom)

4) Select popover trigger ( click or hover)

5) Add a title to the popover. (If left blank will use the button name)

6) Add content to the tinymce editor

7) Click save

8) Once the button is added to the page, while still in edit mode, click on the button. From the popup select "custom template"

There are two custom templates available to choose from

Bootstrap Modal Popover ( for bootstrap based themes, does not load bootstrap JS)
Modal popover ( for non-bootstrap based themes, loads bootstrap JS)

Select the appropriate template then click save.




Customize colors


1) Visit the customize colors tab


2) Set customize button and text color to true

3) Select a background color

4) Select a background color on hover

6) Select a text color

7) Select a text color on hover

8) Add spacing to the inside of the button by adding margin if necessary

9) Add a font size

10) Click save

11) Exit edit mode, publish edits






© 1998-2014 HostCo Inc. All Rights Reserved

powered by concrete5