Hello,
I have added the Calendar DatePicker from the Qualtrics Library to my survey, but the all the header text, including nav buttons, is white (see photo). How can I change the color to black?
I have tried two things so far:
1) I have tried to edit the HTML view on the question itself, see below (note the multiple places I try to put color: 'black'
What is the target first date of the study?
">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/assets/skins/sam/calendar.css">
">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js">
">https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/calendar/calendar-min.js">
2) In the Custom CSS in Look and Feel - Style, I put in the following code. Editing the first section color to #333 will change the days of the previous months to black, but nothing happens for the second section (see two screenshots below to see the color change):
.yui-skin-sam .yui-calendar td.calcell.oom {
background-color:#cccccc;
color:#333!important;
cursor:default;
}
.yui-skin-sam .yui-calendar td.calcell.previous {
color:#333!important;
}
For both codes, when viewing and editing in the JavaScript Console Inspector, the colors do change for all headers, but not when I edit the actual code in the builder/look and feel. Thoughts? Thanks in advance!
*Please note that I have no JavaScript experience, just got this far by piecing stuff together through other community discussions and my friend who knows some code.
How to change header colors on calendar datepicker?
+1
+46Hi nk1234
Just include the below in look and feel>style>custom css
.Skin .yui-skin-sam .yui-calendar .calweekdaycell {
color: #222;
}
.Skin .yui-skin-sam .yui-calendar .calheader {
color: #222;
}
.Skin .yui-skin-sam .yui-calendar td.calcell a {
color: #222;
}
Hope this helps!
+1Hi Deepak , thanks for your response!
For whatever reason, it took a moment to start working but that worked!!! I'm thrilled, thank you!
The last piece is turning the buttons black as well (calnavleft and calnavright). Can I try to mirror your code above to make those appear as well?
Thank you again!
EDIT: The full code (including code for the buttons) is below:
.Skin .yui-skin-sam .yui-calendar .calweekdaycell {
color: #222;
}
.Skin .yui-skin-sam .yui-calendar .calheader {
color: #222;
}
.Skin .yui-skin-sam .yui-calendar td.calcell a {
color: #222;
}
.Skin .yui-skin-sam .yui-calendar .calnavright:before {
color: #222;
}
.Skin .yui-skin-sam .yui-calendar .calnavleft:before {
color: #222;
}
+46nk1234
Try the below code for navigators:
.Skin .yui-skin-sam .yui-calendar .calheader a.calnavleft:before {
color: #222;
}
.Skin .yui-skin-sam .yui-calendar .calheader a.calnavright::before {
color: #222;
}
Hope this helps!
+4Hello
Thank you for posting this, It was also something I needed. Having said that, is there a way to modify the color on the date picker banner? See below. I would like to modify the gray color.
Thank you!
+46As mentioned above you can use following CSS:
.Skin .yui-skin-sam .yui-calendar .calheader {
background: #000;
}
Hope it helps!
+4Hi
One more question if you don’t mind. I noticed in one of your earlier responses the 2 semicolons in this part of the code and I was wondering if that was a typo, or if it was indeed meant to have 2 semicolons.
Thank you!
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.