Question

Photo of Herb Parsons

0

CSS & LESS & Files - OH MY!

2

I apologize ahead of time for this totally noob question, but here goes.

I'm not new to .CSS, but I AM pretty rusty. I know virtually nothing about .LESS, and very little (so far) about Rock.

I can use tools to modify the CSS files to get the look I want, but as little as I know about .LESS, I'm pretty sure that the first time I compile my theme, I'm going to overwrite them all. At the same time, I find "the variable hunt" in .LESS to be totally confusing. With that in mind, I have a couple questions.

  1. I copied the STARK theme over to create my own (Pursuit). What is the "best practice" method of changing the styles? I see lots of "overrides" files, am I safe in assuming that's where I really want to make my over-riding changes?
  2. Can anyone recommend a good tutorial on Bootstrap and Less (I think understanding the concepts would go a long way in figuring this out).
  • Photo of Ben Murphy

    0

    Hi Herb! Here's the documentation on Rock Theme and the Less Compiler. The TLDR part is that you should be messing with any of the css file directly and instead use the built in CSS Overrides in the Theme Styler.

    https://community.rockrms.com/documentation/bookcontent/14/264#lessismore

    This is also a handy reference as Rock has Bootstrap 3 with sprinklings of 4 and 5 classes in it: https://community.rockrms.com/styling

    Please join the live conversation in the #cms channel at Rock Community Chat

  • Photo of Jackson Uy

    0

    Hi Herb,

    If you are making few changes to the default Stark Theme, then you can drop all your changes to the _css-override.less file. You can also access it via the Themes under CMS Configuration by editing your newly created theme (Pursuit).

    If you want to easily track your changes, you may modify the theme.less and add your own partial less files. But don't touch the default imports in theme.less unless you want to override all of Rock's default styling, I don't recommend it though since depending on which block you use in your pages, those block styling are in the default styles.

    You may find LESS documentation in their webpage and Google will be your friend :D Rock is still using an older version of  LESS compiler so watchout for some functions that might not work. Basically, the power of using LESS is able to use variable rather than hard coding the value in your css. For example:

    @menu-link-color: #ffcccc;

    So, in your menu link css, instead of doing

    .menu-link {
      color: #fff;
    }

    You can do:

    .menu-link {
      color: @menu-link-color;
    }

    For Bootstrap, Rock is using v3.4.

    If you want to get help quickly, hop in to the Rock Community Chat and you can ping me if you want.