Mini Cal Customization

Hey OS Solutions,

I am wondering if there is a built in way to customize the event calendar? Or do I need to change via CSS? If so, can someone link me the direct file path, because I am having troubles finding it.


Thanks,
Andy

Hi Andy

Please give us more details about your questions so that we can guide you:

1. Send me the link to the page

2. Let us know how you want to change it

Then we will guide you

Tuan

Okay, the site is www.superiorsafetysolutions.com

& I am looking to be able to change the styling of the calendar. On the page I linked the mini cal is about midway down. I would like to change basic properties like background, fonts, spacing, etc.

I search through the zipped files to find the appropriate CSS line of code, but I had trouble finding it. Considering it was not the same place as my Chrome Dev Tools sent me.

Andy

Hello.
This is css style file you can work on. Please open it and edit from here.
www.superiorsafetysolutions.com/componen...assets/css/style.css
from line 120.
Change color, font... you want.
Thanks.

Could you also help with a bug I am encountering.

If you browser my site at www.superiorsafetysolutions.com & click on "Book a Course" in the top navigation. It distorts my site & makes everything bold. Any suggestions on why?

Andy

Hello.
Please go to this link: www.superiorsafetysolutions.com/template.../orange/template.css
on line 940. add this css. text-shadow: none!important;
on line 982. replace with this css: background-color: #222!important; color: #FFF!important;
Thanks.

Okay, can you tell me the exact selector to apply these rules to? I believe the format of my CSS document is spaced and the lines aren't correct.

I tried these selectors:

@media screen and (min-width: 991px) {
.navbar-default .navbar-nav > li > a {
padding: 0 20px;
line-height: 55px;
text-shadow: none !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #222 !important;
color: #fff !important;
}

This did not fix my issue, as I still have the distortion taking place after going to the calendar view of my events.

Any suggestions?