dhtmlxGantt(甘特图插件) 之简单的页面样式调整

dhtmlxgantt 样式调整

最近需求中，要求我对之前开发的甘特图中的一些字体颜色进行调整;因为甘特图css名称过多，所以调起来不是很快，虽然有F12的帮助，所以在此记录下一些名称，希望以后在碰到的时候可以不用太麻烦。

左侧表格

如图所示，要对该字体进行调整的话，不用去dhtmlxgantt.css去改，至于为什么我就不多说了，在自己的页面中重写css覆盖就可以了。

.gantt_grid_head_cell{
		  font-size:14px;
}

这个是第一行，各列头的字体样式。

 .gantt_tree_content, .gantt_tree_icon {
		   font-family: "微软雅黑";
		   height: 100%;
		   display: inline-block;
 } 

这个是对表格中数据以及图片进行调整的样式。

右侧条

这个是经过调整之后的样子，是不是很丑，但是请别介意，这个完全就是大家看的，是测试版本，方便看。

	.gantt_demo {
			border: 2px solid red;
			color: red;
			background: red;
		}

这个是条周边的线的样式以及颜色（红色的）；注意 还需要在JS中加入以下代码才行：

gantt.templates.task_class = function (start, end, item) {
		return item.$level == 0 ? "gantt_demo" : ""
};

.gantt_task_line{
		   background-color: #ffffff;
}

这个是整个条的颜色修改。颜色为白色的。

你以为这就结束了，你错了，

看拖动之后可以显示进度，这个也需要改的，要不然，就会按照dhtmlxgantt.css中的颜色执行了。

.gantt_task_progress{
		 background-color: #000000;
}

这个就是进度条的样式，颜色。