Styling Frontaccounting Built-in date picker - Kvcodes
X

Congrats, You are Subscribed to Receive Updates.

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.

screenshot_datepicker

 

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.

 

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts