Question

Photo of DJ Grick

0

Help with website formatting

1

Where can I learn more about how to format a site with Rock? I have looked all over the bootstrap site trying to figure out how to add an add a panel that has an image at the top that changes colors as you hover over the panel. I see this being used  on RockRms.com and also on Prayer.belairpres.org/page/5480. 

  • Photo of Jeremy Turgeon

    1

    Hi DJ,

    This needs to be added into your website's specific Theme.css and/or Bootstrap.css file for it to work.  Not being any kind of web design expert myself I simply found the values by using Google Chrome's "Inspect Element" feature when right clicking on the icon I wanted to replicate.  There's no documentation for how to do this as it's just a general web design principle and not anything unique to RockRMS.

    The process I used was to inspect the element, copy the div classes related to that feature into a test Rock page of our own and then go through the rockrms.com CSS to find the elements that did what I wanted.  Then I pasted them into our CSS and checked the test page to see if it worked.  You might want to create a copy of the Stark theme and test it there first.

    Here's the code used to generate the Prayer Wall you mentioned:

    <div class="contentbox contentbox-crown">
    <div class="contentbox-banner">
        <div class="outline">
        <i class="fa fa-fw fa-comment-o"></i></div>
        </div>
        <div class="contentbox-body centered">
            <h3>Prayer Wall</h3>

    Hope that helps!

    • DJ Grick

      DJ Grick

      Thanks Jeremy,


      I was able before asking this to come up with the same (or very similar) code for formatting, but have no clue what change I need to do in the .css files to allow it to work. That's what was more over my head. Thanks for the help.