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

Using Bootstrap in ClubRunner to build great websites

Discussion in 'Website Customization' started by Zach on Jul 5, 2017.

  1. Zach

    By:ZachSep 4, 2020
    Moderator
    ClubRunner Team

    Joined:
    Jun 5, 2017
    Messages:
    421
    Likes Received:
    66
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Hi Richard,

    First things first, just as a reminder that custom coding support is not included as part of our standard scope of support. I would still like to help get you (and others) pointed in the right direction.

    I believe that writing your own CSS rules in a file and including that in ClubRunner, long term, is more maintainable than applying individual style tags to your html. If you wanted to update the entire site to change that formatting, you would now need to manually edit each place you added those inline styles. If you had written your own custom classes into a css file, you could add your classes when writing your html, and then if you would only need to update your CSS file to get the same impact across the site.

    Regardless of which method you decide to go with, we still need to identify what rules need to be changed. Most browsers have integrated tools to help you inspect and review the html you see on the page. Using Microsoft Edge here at our office, I can right click on something I want to take a look at, and then inspect it. You may need to enable these tools in some way, I would suggest checking with your browsers documentation for further assistance on that front.

    So on the page, I am going to find the area I want to see how to change, right click around the content I want to inspect to get the context menu open.

    upload_2020-9-4_9-53-7.png

    Once the menu is open, we can click on inspect

    upload_2020-9-4_9-54-33.png

    With the developer tools now open, we can see the raw code of the page. On the left we have the html document that constructs the page, and we've selected a specific element. On the right, it shows us what CSS is impacting the specific element we have selected. Now that we know what rules are impacting the element, we can adjust them through the developer tools to see if its the right thing to change. Once you know it is, you can circle back to your inline style to update it, or add your new rules to your CSS file.
     
  2. Richard Stephen

    By:Richard StephenSep 5, 2020
    New Community Member

    Joined:
    Feb 25, 2019
    Messages:
    8
    Likes Received:
    4
    Gender:
    Male
    Location:
    Telecom. Engineering
    Hi Zach,

    Thanks for the response and the understanding
    Yes - I have been using the developer mode, but it was't working hence the query.
    Since then - murphy's law and it does work ! I'm not sure what I was doing wrong. Perhaps I should have just had a sleep and then tried again.. :)

    Understood about the benefit of site-wide css.
    However, on a number websites I help out with and the district and zone websites, there are a variety of people at different levels of skill (and interest in customisation).
    So for the few instances where I do this for a specific request, I try to put it in visible html code they can see and learn from.
    Thanks a lot !
    cheers
    Richard
     
    Zach likes this.
Top