Classroutine Styling - Forum | JoomShaper
Solved SP Page Builder

Classroutine Styling

Asked by C@G Oncypruscom Ltd 4 years ago Last activity 4 years ago

Dear Team Hi,

I am using Yoga template with Classroutine addon in it.
I need each day of week to have their own color (or text, or background).
Otherwords Monday cloumn=color1, Tuesday column=color2, wedsnday column=color3, etc.
I can not to find what and where I have to create, what class to add.

Thank you, Michelle

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
4 years ago

Hi

Do you want it like this?

https://prnt.sc/M2u9sBNY061u

Then you have to use this custom CSS

#sppb-addon-1491976355541 .sppb-addon-class-routines .table-bordered > thead > tr > th:nth-child(1){
  background-color:#109dc2;
}

.sppb-addon-class-routines .table-bordered tbody tr > td:nth-child(1){
  background-color:#58c5e2;
}
#sppb-addon-1491976355541 .sppb-addon-class-routines .table-bordered > thead > tr > th:nth-child(2){
  background-color:#7918f2;
}

.sppb-addon-class-routines .table-bordered tbody tr > td:nth-child(2){
  background-color:#764aff;
}
#sppb-addon-1491976355541 .sppb-addon-class-routines .table-bordered > thead > tr > th:nth-child(3){
  background-color:#dc3545;
}

.sppb-addon-class-routines .table-bordered tbody tr > td:nth-child(3){
  background-color:#ff5757;
}
#sppb-addon-1491976355541 .sppb-addon-class-routines .table-bordered > thead > tr > th:nth-child(4){
  background-color:#198754;
}

.sppb-addon-class-routines .table-bordered tbody tr > td:nth-child(4){
  background-color:#23cf5f;
}
#sppb-addon-1491976355541 .sppb-addon-class-routines .table-bordered > thead > tr > th:nth-child(5){
  background-color:#f1c512;
}

.sppb-addon-class-routines .table-bordered tbody tr > td:nth-child(5){
  background-color:#ffd012;
}
#sppb-addon-1491976355541 .sppb-addon-class-routines .table-bordered > thead > tr > th:nth-child(6){
  background-color:#c26110;
}

.sppb-addon-class-routines .table-bordered tbody tr > td:nth-child(6){
  background-color: #c57212;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

4 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
4 years ago

Hi

Thanks for contacting us. You can do it via custom CSS. Could you please give me a screenshot of that portion?

-Regards.

C@G Oncypruscom Ltd Asked this
4 years ago

Dear Hi,

Thank you!!! This is exactly what I needed.
Regards, Michelle

Log in to reply.