1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

How do I create a button in a widget or story?

Discussion in 'Website Customization' started by David H. on Jul 20, 2017.

  1. David H.

    By:David H.-  Jul 20, 2017
    Moderator
    ClubRunner Team

    Joined:
    Jun 10, 2017
    Messages:
    115
    Likes Received:
    19
    Gender:
    Male
    Location:
    Oakville, ON
    If you are using our new "Next Generation" themes you could add code into a widget or story to create a button.
    To learn about our Next Generation themes please read the article called:
    Next-Generation Website Themes Guide

    The buttons look like these:
    image1.png
    The color depends on the theme color you are using. To learn how to add a button, please follow the steps below:

    1. While editing a story or widget please click on the "Source" button on the tool bar.
    2. In the code, try to find the content were you would like the button to be located. Put your cursor behind the content.
    3. Copy and paste the following code including the "<" and ">".

    Primary Button (Solid Color):

    HTML:
    <a class="btn btn-lg btn-primary" href="http://www.google.com" style="width: 200px;">Go To Google</a>

    Secondary Button (White):

    HTML:
    <a class="btn btn-lg btn-info" href="http://www.google.com" style="width: 200px;">Go To Google</a>

    4. After you paste the code please change "http://www.google.com" to the URL or address that you want it linked.
    5. Rename the button by changing "Go To Google" to what you want.
    6. Once done click "Source" to go back to normal.

    To learn more about these buttons, please click on the following link:
    http://getbootstrap.com/css/#buttons-options

    To learn how to create columns using bootstrap, please click on the following link:
    https://www.clubrunnercommunity.com/threads/using-bootstrap-in-clubrunner-to-build-great-websites.5/
     
    Anita Graham and Ted Faigle like this.
  2. Omar S.

    By:Omar S.-  Sep 9, 2020
    Moderator
    ClubRunner Team

    Joined:
    Oct 22, 2019
    Messages:
    46
    Likes Received:
    1
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Recently, we had noted that the above code for the HTML coded buttons was missing some closing tags for the button code. The code for these buttons has since been updated, and when copied into the 'Source' of a Custom Widget or Story, the code should display the two buttons styles with text and links.

    Please note, this option with creating HTML code buttons is for more advanced users with knowledge on creating and maintaining HTML code.

    Another option when creating a Button, would be to use the 'Single Button' or 'Article with Right/Left Image' 'Preformatted Widgets' when designing a custom page or working on the Club home page.

    To access this button in the live website designer, please follow these steps:

    1. Login to the Club's member area
    2. In the top blue bar, click 'New Website (Beta)'
    3. In the grey bar below, click 'Home Page Designer'
    4. In the home page designer, click the 'Preformatted Widgets' grouping to open the group
    5. Drag-and-drop the 'Single Button' or 'Article with Right/Left' image onto the page
    6. Hover-over the widget and click the button to display the 'Button Details', such as label text, link type and URL address
    7. Click the orange 'Save' button to save the changes to the button
    8. When ready, 'Publish' the page or home page using the orange 'Publish' button in the top right of the page.

    With this, the button should be available on the home page or custom page and redirect users to the link created in the button details.
     
Top