0
Welcome Guest! Login
0 items Join Now

How to create new box? module classes

    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36748
    • Thanks: 3226
    • Custom work done

    How to create new box? module classes

    Posted 8 years 11 months ago
    • This guide will help you in creating new box styles besides the default box1 - box4.
      So we're going to create some new boxes, box5 - box8. I just used these names for convenience, you can use any valid class name you wish.

      In your
      rt_templateName-custom.css <-{Click CSS Guide below}
      This image is hidden for guests.
      Please log in or register to see it.
      file add this CSS:
      .box5 {
        color: #ffffff;
        background: #F2550F;
      }
      .box5.title1 .module-title {
        background-color: #e76b62;
        color: #7b1913;
      }
      .box5 a:not([class^="readon"]) {
        color: #7b1913;
      }
      .box5 a:not([class^="readon"]):hover {
        color: inherit;
      }
      .box5 .readon {
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 3px;
        color: inherit;
        background-color: transparent;
        border: 2px solid;
      }
      .box6 {
        color: #ffffff;
        background: #D38506;
      }
      .box6.title2 .module-title {
        background-color: #fecb76;
        color: #c57b01;
      }
      .box6 a:not([class^="readon"]) {
        color: #c57b01;
      }
      .box6 a:not([class^="readon"]):hover {
        color: inherit;
      }
      .box6 .readon2 {
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 3px;
        color: inherit;
        background-color: transparent;
        border: 2px solid;
      }
      .box7 {
        color: #ffffff;
        background: #38D5C5;
      }
      .box7.title3 .module-title {
        background-color: #6dbce3;
        color: #185c7e;
      }
      .box7 a:not([class^="readon"]) {
        color: #185c7e;
      }
      .box7 a:not([class^="readon"]):hover {
        color: inherit;
      }
      .box7 .readon3 {
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        border: 1px solid transparent;
        border-radius: 3px;
        color: inherit;
        background-color: transparent;
        border: 2px solid;
      }
      .box8 {
        color: #ffffff;
        background: #113D68;
      }
      .box8.title4 .module-title {
        background-color: #222b34;
        color: #5f7992;
      }
      .box8 a:not([class^="readon"]) {
        color: #5f7992;
      }
      .box8 a:not([class^="readon"]):hover {
        color: inherit;
      }

      Adjust the colour value(s) to suit. Also you can use any combination of "box?.title?" as long as the "title?" exists in your template LESS files, usually found in [JOOMLA-ROOT]\templates\rt_templateName\less\template.less
      .

      Or just remove the "title?" from "box?.title?" so as to have just the "box?" styling.

      Using a module class suffix "box5" to "box8" produces NEW box variations that look like this:

      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 4 years 7 months ago by DanG.

Time to create page: 0.064 seconds