Tutorial Styling Skeleton template with LESS CSS

Discussion in 'Subrion CMS Templates' started by Gleb S., Sep 23, 2013.

  1. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hello everyone!

    Today I'm gonna show you how to style/edit Skeleton* template with LESS CSS (lesscss.org).
    At first this approach seems to be weird and obscure, but when you get used to it, editing your template will become a breeze!

    Step 1. Preparation

    First of all we need to set up our environment for easy development. Here is what we need:
    1. The latest version of Subrion CMS available here - we highly recommend to use the latest versions only as they are more stable, secure, and bug free.
      Also please download latest Skeleton template pack (attached to this thread).
    2. Local webserver. This step is highly recommended but not necessary.
      1. If you familiar with this, go ahead and install Subrion v3 on your local server. Later on you will do all manipulations inside your root/templates/skeleton folder. Further steps will cover working in local folder.
      2. If not, you will need Skeleton template folder only (assuming you have installed your Subrion copy on your webserver).
    3. Preprocessor** — this is what turns LESS CSS into simple CSS with some kind of magic. My preferable one is Prepros. You can get it here. Don't forget to install it.
      ** You can use any other preprocessor which fits your needs. Here is a list of GUI-based: https://github.com/less/less.js/wiki/GUI-compilers-that-use-LESS.js

    Step 2. Folder structure and compiling paths

    Now we need to set up our folder structure and compiling paths to correctly compile our files.
    1. Uncompress previously downloaded Subrion package somewhere on your local drive. You can extract only skeleton folder.
    2. Open up Prepros and drag&drop LESS folder into Prepros window like in the image below:
      less-1.jpg
    3. Setting up paths: Click on your project folder in Prepros window. You will see something like this:
      less-2.jpg
    4. Now click on bootstrap.css link under bootstrap.less file (that one with arrow on the left):
      less-3.jpg
    5. Dialog window will popup. Here we need to go to our CSS folder and choose iabootstrap.css file. Click SAVE and when asked 'Do you want to replace it?', click YES: less-4.jpg less-5.jpg
    6. Now click on bootstrap.less file. Submenu will appear. Here we set to Autocompile and to Compress CSS. This means that our CSS file will be minified for faster page loading.
      less-6.jpg

    Step 3. Let the magic begin!

    At this step we can start to edit our LESS files. In most cases we need to edit only ia-variables.less (or variables.less file in v3.0.0). So open up this file and find @linkColor variable. Replace it with for example #e67e22 color. Save your file.
    And voila! Now you will see Successful compilation message in right bottom corner of your screen:
    less-7.jpg

    You can change any variable in this file and see your changes. Now don't forget to upload your changes to your webserver.

    That is it for now. I will try to create video tutorial later this week. Stay tuned!

    * Skeleton - new default template for Subrion v 3.x.x

    Attached Files:

    Last edited: Sep 24, 2013
  2. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    reserved.
  3. smartpc

    smartpc New Member

    Hi Gleb nice to meet you,

    Ok same thing happened again, I used a new copy of skeleton directory and I am getting 2 errors when it prepos (brilliant tool) goes to auto compile

    I am just changing link color

    variable @baseDarkColor is undefined

    C:Desktop\skeleton\less\ia-variables.less line 23

    variable @navMainCollapseWidth is undefined
    C:Desktop\skeleton\less\responsive-navbar.less line 197

    I cant upload .less file
    Last edited: Sep 24, 2013
  4. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi smartpc!

    I have figured out the problem... Please download attached file. This is skeleton pack. Overwrite your existing one.

    In version 3.0.0 there is no such variables. We are really sorry for this. We have fixed it in version 3.0.1 which will be released in a couple of days.

    Attached Files:

    Last edited: Sep 24, 2013
  5. smartpc

    smartpc New Member

    no problem, thanks.. Worked first time...
    Last edited: Sep 24, 2013
  6. Vasily_B.

    Vasily_B. Project Manager

    Hi David,

    Could you please confirm if you have this issue in the latest 3.0.1 version? Thanks!
    It seems there are some strange issues with the downloads as some of our customers download the previous version instead of the current one.

    Could you please re-download this and inform if the issue was fixed in the latest version? Thanks!
  7. smartpc

    smartpc New Member

    Sorry, missed that, just tried I have core 3.01 downloaded and installed templates Skeleton/ Navi / Segin Versions 3.02 all seem to be compiling and look fine.
    Last edited: Oct 5, 2013
  8. Vasily_B.

    Vasily_B. Project Manager

    Thanks for the report.
  9. bikini_browser

    bikini_browser New Member

    Hello...

    I have a few questions about this routine... I was able to download and install the latest PrePros version (And I even bought the professional "paid for" Version). I am using Version 3.1.2 of the Subrion CMS Software. I am using the latest Simpla Template.

    My questions are as follows...

    Do we need to use the folder under Templates labeled/named "Simpla" versus the folder named Skeleton for the routine mentioned above? Or even if we have Simpla, do we still do this routine for the Skeleton Version/Folder?

    And: Should we download all the latest files from our existing production site in order to change just the colors or do we work off of a brand new copy of the software, and upload the new copy of the .less files to the site when finished...

    And: As stated. I using Version 3.1.2. Do I edit the "ia-variables.less" file or the "variables.less" file?

    And: Which variable to I change to change the Simpla green or teal color to a sharp red color like: "#AB0E0C" (without the quotes) where ever the green or teal color is showing up. I just want to totally replace the green/teal with sharp RED everywhere in that template.

    I have left messages requesting that you do this for me, but nobody has done it or even respected me enough to reply. Very disappointing. I have been waiting more than a week and I still don't have any results.

    Dale
  10. bikini_browser

    bikini_browser New Member

    Well don't that beat all...!!! I was able to do it myself. I edited both files you mentioned and it worked. But I still don't know which file I was supposed to change, thats why I just changed both of them.

    Now their are only few pending items regarding this color issue...

    How do I change the color when hovering over the menu item on the black menu bar, in Simpla? Meaning; Currently, when you hover over the menu item, it changes to a shade lighter than black color. I would like it change the hover color to a brilliant shade of sharp red but when you click on the link, I want it to return to the new linkcolor variable, (rich Red color) that I changed a few moments ago.

    We are almost where I want to be, so please help me get all the way there...

    Dale
  11. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hello Dale!

    Simpla and Skeleton are two different templates, so you need to edit files of active template. This file: root/templates/simpla/less/ia-variables.less

    To change colors of custom nav menu (that one with black background), you need to open this file: root/templates/simpla/less/ia-base.less.
    Near line 105 you will see LESS code that styles this nav menu.
    the code should be:
    Code (Text):
      .nav-custom {
        margin: 0 0 0 -10px;
        font-size: 10px;
        text-transform: uppercase;
       
        > li {

          > a {
            padding: 2px 10px;
            color: #fff;

            &:hover {
              background: YOURCOLOR;
            }
          }

          &.active > a,
          &.active > a:hover,
          &.active > a:focus {
            background: @linkColor;
          }
        }
      }
  12. bikini_browser

    bikini_browser New Member

    Ok, after struggling with my new local xampp installation and trying to get the local copy to upload to the live server that finally worked.

    Now, with such leaps and bounds of forward movement, allow me to keep the ball rolling and ask you the following...

    • ...how do you change the colors of the hover text on the bottom and top menu's as seen in the attached files? I want to have the options of changing the font colors as well as changing the hover(ing) colors.
    • Additionally, how do I change the black background color of the black menu bar that runs across near the top of the page?
    • And how to I change the color of all the letters with all the fonts universally across the entire website?
    Remember, this is all using the Simpla Template...

    And did you notice our HTML5, logo on our site? It was fun getting that to w

    change_hover_top_menu.jpg

    #2 -----> change_hover_bottom_menu.jpg


    And did you notice our HTML5, logo on our site? It was fun getting that to work correctly. You can do this using the free tools at http://html5maker.com. After specifying the dimensions
    on the workspace, you can add images, text and logos and it can all be animated using HTML5 and it’s all free! (One image per email address for the free version).

    I anxiously look forward to your reply...

    Dale
  13. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi Dale, when I made my first steps in CSS/HTML I found these great tutorials and they really helped me to understand the idea of web coding:
    http://learn.shayhowe.com/advanced-html-css/
    http://www.lesscss.org (LESS docs)
    http://getbootstrap.com/2.3.2/ (our templates based on this framework)
    You can review them when you have time. I'm sure you can easily understand all the stuff as you have a strong IT background. And I'm sure in a week you will be able to make your own customized templates.

    As of Simpla template:
    You need to open ia-base.less and find line 69. Change Hover color here.

    This is also in ia-base.less on line 23.

    Everything can be changed in this file: ia-variables.less and in variables.less files - links, fonts, colors and etc.
    We are using LESS variables so if you need to change base color (links, bgs) - just change @linkColor variable.

    Thanks.
    SnapDirectory likes this.
  14. olairmarcos

    olairmarcos Member

    :eek: Uauuu! Fantastic, is a great idea. In less than 30 seconds I changed the colors of the template Skeleton and in less than 1 minute I created a new color for the template Navi. Congratulations for the great work.
    Observation:
    In Navi template, to select another color, in responsive mode (small screen), the submenu remains roseus color.
    The problem may be in this line in the file responsive.css

    @media(max-width:1020px){.nav-toggle{display:block}.nav-bar-collapse{clear:both;overflow:hidden;height:0}.nav-bar-collapse .form-inline{float:none;margin:20px;padding:0}.nav-bar-collapse .form-inline input{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}.nav-mainmenu{padding-bottom:20px}.nav-mainmenu li{float:none}.nav-mainmenu li .caret,.nav-mainmenu li a:after{display:none}.nav-mainmenu li a:hover{background:#f27195}.nav-mainmenu .dropdown-menu{position:static;top:auto;left:auto;float:none;display:block;max-width:none;margin:0;padding:0;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-mainmenu .dropdown-menu>.active>a,.nav-mainmenu .dropdown-menu>.active>a:hover,.nav-mainmenu .dropdown-menu>.active>a:focus{background-image:none}.nav-mainmenu .dropdown-submenu>a,.nav-mainmenu .dropdown-submenu>a:hover,.nav-mainmenu .dropdown-submenu>a:focus{background-image:none;background-color:transparent;color:#333}.nav-mainmenu .dropdown-submenu>a:hover{background-color:#f27195;color:#fff}}

    Maybe need to change one line in the file .less to correctly compile the color of the submenu in responsive mode (small screen)

    Good job.
  15. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hello @olairmarcos !

    Thanks for your feedback!
    Please use attached file and recompile all less files.

    or just remove these lines in your responsive-navbar.less file:
    lines 234-239:
    Code (Text):
          a {

            &:hover {
              background: @linkColor;
            }
          }
    lines 263-274:
    Code (Text):
        .dropdown-submenu > a,
        .dropdown-submenu > a:hover,
        .dropdown-submenu > a:focus {
          background-image: none;
          background-color: transparent;
          color: @textColor;
        }

        .dropdown-submenu > a:hover {
          background-color: @linkColor;
          color: #fff;
        }
    Thanks again!

    Attached Files:

  16. Pylo

    Pylo New Member

    Can some one plz tell me what I'm doing wrong here.
    I follow above instructions but upon setting up paths as shown in step 2 picture 3
    I can not see any *css files only *less.

    I used prepros.cfg inside less folder when importing project into prepros.

    prepros.jpg



    Cheers
  17. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi @Pylo !

    Your main file is base.less. It should point to css/iabootstrap.css. When this file selected (base.less) - press Process file button.

    Thanks!
  18. Pylo

    Pylo New Member

    Thank for your reply.
    I followed your instructions, but what next?
    Where do I edit and make the changes, should I open base.less in a text editor or something?

    Thanks...
  19. Gleb_S.

    Gleb_S. Subrion Designer Staff Member

    Hi @Pylo !

    Quick overview of template styles files:
    1. base.less - the main file that includes all the styles via @import. This file should be processed by compilator into css/iabootstrap.css
    2. vars.less - file that holds Subrion variables and some bootstrap3 overrides.
    3. global.less - here you can find layout and some global styling stuff.
    4. theme.less - styles for buttons, alerts and etc...
    5. header.less, footer.less, navbar.less - main styles for layout.

    Thanks!
    ricmetal and Andrew_G. like this.
  20. Pylo

    Pylo New Member

    Thank you very much for this info.

    :)

Share This Page