Date Picker CSS

Hello,

I'm changing my website and using another template. In template 1, the date picker looks fine. However, in template 2 (the new template) the fonts don't fit the box. Image 1 is from template 1. Image 2 is from the new template. I'm figuring the css in the new template is what is causing this. I tried copying the css from datepicker_dashboard.css to a custom but to no avail. What is the best way to get the css for this date picker to work with template 2?

From template 1: [attachment=0]template1.jpg[/attachment]

From template 2: [attachment=1]template2.jpg[/attachment]

Thanks for your help.

Chris

Ok,

I've added the following code to my custom css file:

div.datepicker_dashboard .title {
  font-size: 100%;
  padding: 0px;
}

Here's what I get:

[attachment=0]datepicker.jpg[/attachment]

I'm still learning css but I can't figure out what to change. I've used the developer tools to look at various aspects of the date picker but I'm afraid I'm missing something.

Chris.

Hi Chris,

Please post a link to the form so I can take a quick look.

Bob

Hello GreyHead. Thanks for the reply.

Here is a link to the normal date picker using the old template:
http://itswebsite.jesusmylord.org/index.php/transfer-equipment/cc_edit_data?cid=1018

Here is a link using the new template with the distorted date picker:
http://itswebsite.jesusmylord.org/index.php/surplus-equipment/cc_edit_data?cid=1151

Hi Chris,

There is some template CSS that you need to over-ride. For the day names it seems to be this (the /* *./ comments are mine):

[class^="title"] .title,[class*=" title"] .title {
    margin: 0;
    /* padding:8px 15px; */
    /* border-radius:0; */
    /* border:1px solid transparent; */
}

And for the Year number I think it is this

h2,.title {
    font-size:22.4px;
    line-height:31.2px;
}

Note that your custom CSS is partially over-writing this; and I can’t be specific about the location of this CSS as you have a CSS compressor enabled. That's fine but makes debugging harder.

In each case you need to add CSS with a more specific selector; usually the .gbs3 class or the form id #chronoform_surplus_equip will do this for you.

Bob