Html, CSS, Bootstrap, Less, Lava…It’s all Greek to me!

  • By DJ Grick 3 Years Ago

I have a feeling there are a lot of RockRMS users like me. You aren’t a programmer…but you are better with technology then others on your church leadership team so Rock has landed on your desk. At my church I was hired as the youth pastor. That’s what I went to school for and my biggest calling and passion but over time I started getting involved in more and more of the media and technology. Now I oversee every aspect of media and technology in our church. I have a great team of volunteers but there is way more to do then I can ask them to oversee.

I was the one who championed Rock to our leadership and moved us off our old ChMS and over to Rock but in the process I had to learn a lot. Up until now all I knew about these different code languages was from tweaking my Myspace page in the early 2000’s. HTML has come a long way since then and I quickly found myself back at square one. I still have a whole lot to learn. But I want to help some others who are new to Rock get up to speed so they can build a great tools for their church.

As I read the Designing and Building Websites Using Rock manual I felt like I was missing some basic knowledge of how web design worked. I tried using the WYSIWYG (what you see is what you get) editor on the HTML block but could never get my blocks to look like I envisioned. I knew if I could just wrap my mind around some basics it would open a whole new world to me. So I set out to learn the information I felt everyone assumed I already had.

I read the Bootstrap information over and over again, looked at everything I could on Lava, watched the videos available on the Rock site and tried figuring out what .Less was but since I knew nothing about CSS  (Cascading Style Sheets) and very little about HTML learning was going slow.

Eventually I came across Code Academy. If you are new to HTML you have to take the time to go thought their HTML and CSS course. It’s free and literally after 20 minutes I turned to my wife and said “It finally clicked". I was finally about to start understanding the “why" behind the “what". Code Academy has a great process of teaching you step by step how to design great elements in your site and checks your work as you go. As you figure out how to use tables, list groups, classes, borders, margin, and padding it will really help you with laying out pages the way you have them in your head. Until you understand HTML and CSS you will never be able to access the power built into Bootstrap, Less, and Lava.

I do have to admit during the Code Academy’s the HTML and CSS course I was still struggling to figure out how to apply what I learned to RockRMS. I had it in my head that I would need to write a ton of CSS into my theme to style each element the way I wanted it until I realized I could write CSS styles into individual block. Give it a try create a new page and add an HTML block to any page and post the following Code:

            <style>

                            .showing-you-something {

                                            /*

                                            Color: White;

                                            Background-Color: black;

                                            text-align: center;

                                            border-radius: 8px;

                                            }

                            .showing-you-something:hover {

                                            Color: black;

                                            Background-color: grey;

                                            border-radius: 40px;

                                            }

                                            */

            </style>



            <div class="showing-you-something">

                            <H1> This block is boring</h1>

                            <p> spice it up by removing the /* on line 4 and */ on line 8.</p>

            </div>

Note: You may wonder why I said to create a new page. I learned the hard way how easy it is to break pages (a topic for later) but as long as it’s an a page you plan to delete anyway you should be fine.

Did you do what the block text told you to do? Once you remove the CSS comments (/* CSS */) the block changes it’s look. Okay so I lied about it being spiced up but you can start to see how powerful styling is. Feel free to change colors (Line 6, 7, 12, and 13) or text alignment (Line 8), or even border-radius (Line 9 and 14) to see what you can make it do.

I could show you more now…but let’s save it for my next post. What I want you to know is you can start really small and build great elements into your site.

Another resource that has saved me hours has been W3School. I linked to it twice above. It’s my quick reference guide when I need just a little bit of help remembering syntax or to find the perfect color.

I hope this helps you get started. In my next post we will plagiarize the YouVersion block on Newspring.cc/bible (unless I get an e-mail from them asking me not to). I hope to post in about a week which give you plenty of time to finish taking Code Academy’s course. Maybe you can get a jump start on it and build the block yourself without that post.


@djgrick
Morgnatown Community Church
Morgantown Pa

DJ is a husband, father of 3, and youth pastor. He also oversees all media and technology at Morgantown Community Church.