RocketTheme - TOPIC: How to create new box? module classes

Welcome Guest! Login

0 items Join Now

DanG
Preeminent Rocketeer
Posts: 36750
Thanks: 3229
Custom work done

How to create new box? module classes

Posted 13 years 10 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: 9 years 6 months ago by DanG.

#670670

Time to create page: 0.068 seconds