Styling Frontaccounting Built-in date picker

Styling Frontaccounting Built-in date picker. Yes, the default date picker is good to set year and month options simultaneously. But the ugly thing is, it looks outdated and feel it like an older web software. so i thought to customize it with Font-awesome and Bootstrap. So i tried with my own way of styling, Anyhow, the looks is not much better. But feels better for the older one.

Justdownload the fontawesome and bring it into the FA under your themes directory, than include the fontawesome.css into the default.css. There it will be hooked, when your theme is activated. So, now you need to write the following CSS into the default.css file.

#CC { 
	position:absolute;
	background-color:#FFF;
	margin:0; padding:0;
	display:none;
	width: 280px;
	z-index: 100;
	border-radius:10px 10px 2px 2px;
	-webkit-box-shadow:
		0 2px 6px rgba(0,0,0,0.5),
		inset 0 1px rgba(255,255,255,0.3),
		inset 0 10px rgba(255,255,255,0.2),
		inset 0 10px 20px rgba(255,255,255,0.25),
		inset 0 -15px 30px rgba(0,0,0,0.3);
	-moz-box-shadow:
		0 2px 6px rgba(0,0,0,0.5),
		inset 0 1px rgba(255,255,255,0.3),
		inset 0 10px rgba(255,255,255,0.2),
		inset 0 10px 20px rgba(255,255,255,0.25),
		inset 0 -15px 30px rgba(0,0,0,0.3);
	box-shadow:
		0 2px 6px rgba(0,0,0,0.5),
		inset 0 1px rgba(255,255,255,0.3),
		inset 0 10px rgba(255,255,255,0.2),
		inset 0 10px 20px rgba(255,255,255,0.25),
		inset 0 -15px 30px rgba(0,0,0,0.3);
	background:rgba(0,0,0,0.25);
}
#CC table { 
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 8pt;
	
	width: 100%;
}
#CC th {
	font-weight: normal;
	text-align: center;
}
#CC th a {
	font-weight: normal;
	text-decoration: none;
	color: #FFF;
	padding: 1px;
}
#CC td a{
	text-align: center;
	line-height: 30px;
	padding: 0 ;
	margin: 0;
}
#CC .header {
	background-color: #60687b;
}
#CC .weekday {
	background-color: #eee;
	color: #000;
}
#CC .weekend {
	background-color: #FFC;
	color: #000;
}
#CC .weekno {
	background-color: #82E4E4;
	color: #555;
}
#CC .current {
	border: 1px solid #339;
	background-color: #3CBFE0;
	color: #FFF;
}
#CC .weekday, #CC .weekend, #CC .current {
	display: block;
	text-decoration: none;
	border: 1px solid #FFF;
	width: 2em;
}
#CC .weekday:hover, #CC .weekend:hover, #CC .current:hover {
	color: #FFF;
	background-color: #60687b;
	border: 1px solid #999;
}
#CC .previous {
	text-align: left;
}
#CC .previous, #CC .next  { 
	position:relative;
}
#CC .previous a:before {
    content: "\f048";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 12px;
    padding-right: 0.5em;
	padding-left: 8px;
    position: absolute;   
    left: 0;
}
#CC .next a:before {
    content: "\f051";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #fff;
    font-size: 12px;
    padding-right: 4px;
	float: right;
;  
    
}
#CC .previous a, #CC .next a {
	font-size:1px;}
#CC .previous a:before: hover {
	 color: #fff;
}
#CC .next {
	text-align: right;
}
#CC .previous, #CC .next {
	padding: 1px 3px 1px 3px;
	font-size: 1.4em;
}
#CC .previous a, #CC .next a {
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
}
#CC .title {
	text-align: center;
	font-weight: bold; 
	color: #FFF;
}
#CC .empty {
	background-color: #ddd;
	border: 1px solid #FFF;
}

Now, save your default.css and activate the theme, which you included the Fontawesome and Above Css, than check again.