Forums

[resolved] How do I change the colors of dhtmlxscheduler (3 posts)

  1. substitute
    Member
    Posted 2 years ago #

    Hi
    I've asked them and they said it was pretty simple to change the colors in a .css file.

    The thing is the files look like hell to me and I can't figure what sections I am dealing with. The colors are really awful and make the whole thing impossible to read. The fonts colors is what annoys me most, and the background color of the event: greenish yellow over light yellow, who could read that?
    I've done some investigation, trying to figure out which color was what...but it took so long...

    So who could tell me which colors it is I need to change in order to modify all fonts colors, background color of event, and font size of event.

    That's the code, how it comes.
    Thanks

    /*$Rev$*/
    .dhx_cal_container{background-color:#C2D5FC;font-family:Tahoma;font-size:8pt;position:relative;}.dhx_cal_container div{-moz-user-select:none;-moz-user-select:-moz-none;}.dhx_cal_navline{height:20px;position:absolute;z-index:3;width:750px;color:#2F3A48;}.dhx_cal_navline div{position:absolute;top:2px;white-space:nowrap;}.dhx_cal_navline .dhx_cal_date{font-weight:600;left:210px;}.dhx_cal_button .dhx_left_bg{width:1px;overflow:hidden;height:17px;z-index:20;top:0;}.dhx_cal_prev_button{background-image:url(imgs/buttons.png);background-position:0 0;width:29px;height:17px;left:50px;cursor:pointer;}.dhx_cal_next_button{background-image:url(imgs/buttons.png);background-position:-30px 0;width:29px;height:17px;left:80px;cursor:pointer;}.dhx_cal_today_button{background-image:url(imgs/buttons.png);background-position:-60px 0;width:75px;height:17px;left:112px;cursor:pointer;text-align:center;text-decoration:underline;}.dhx_cal_tab{background-image:url(imgs/white_tab.png);width:61px;height:19px;text-align:center;text-decoration:underline;padding-top:3px;cursor:pointer;}.dhx_cal_tab.active{background-image:url(imgs/blue_tab.png);text-decoration:none;height:20px;padding-top:2px;cursor:default;font-weight:bold;}.dhx_cal_header{position:absolute;left:10px;top:23px;width:750px;border-top:1px dotted #8894A3;border-right:1px dotted #8894A3;z-index:2;overflow:hidden;color:#2F3A48;}.dhx_cal_data{border-top:1px dotted #8894A3;position:absolute;top:44px;width:600px;overflow-y:auto;overflow-x:hidden;}.dhx_scale_bar{position:absolute;text-align:center;background-color:#C2D5FC;padding-top:3px;border-left:1px dotted #586A7E;}.dhx_scale_holder{position:absolute;border-right:1px dotted #586A7E;background-image:url(imgs/databg.png);}.dhx_scale_holder_now{position:absolute;border-right:1px dotted #586A7E;background-image:url(imgs/databg_now.png);}.dhx_scale_hour{height:41px;width:50px;border-bottom:1px dotted #8894A3;background-color:#C2D5FC;text-align:center;line-height:40px;color:#586A7E;overflow:hidden;}.dhx_month_head{background-color:#EBEFF4;color:#2F3A48;border-right:1px dotted #586A7E;height:18px;padding-right:5px;padding-top:3px;text-align:right;}.dhx_month_body{border-right:1px dotted #586A7E;border-bottom:1px dotted #586A7E;background-color:#FFF;}.dhx_now .dhx_month_body{background-color:#E2EDFF;}.dhx_after .dhx_month_body,.dhx_before .dhx_month_body{background-color:#ECECEC;}.dhx_after .dhx_month_head,.dhx_before .dhx_month_head{background-color:#E2E3E6;color:#94A6BB;}.dhx_now .dhx_month_head{background-color:#D1DEF4;font-weight:bold;}.dhx_cal_drag{position:absolute;z-index:9999;background-color:#FFE763;border:1px solid #B7A543;opacity:.5;filter:alpha(opacity=50);}.dhx_loading{position:absolute;width:128px;height:15px;background-image:url(imgs/loading.gif);z-index:9999;}.dhx_multi_day_icon,.dhx_multi_day{position:absolute;background-color:#E1E6FF;background-repeat:no-repeat;border-bottom:1px dotted #8894A3;border-left:1px dotted #8894A3;}.dhx_multi_day_icon{background-image:url(imgs/clock_big.gif);}.dhx_multi_day_icon_small{background-image:url(imgs/clock_small.gif);}.dhx_multi_day_icon,.dhx_multi_day_icon_small{background-position:center center;position:absolute;background-color:#E1E6FF;background-repeat:no-repeat;border-bottom:1px dotted #8894A3;border-left:1px dotted #8894A3;}.dhx_cal_event div{background-color:#FFE763;border:1px solid #B7A543;color:#887A2E;overflow:hidden;width:100%;font-family:Tahoma;font-size:8pt;}.dhx_move_denied .dhx_cal_event .dhx_header,.dhx_move_denied .dhx_cal_event .dhx_title{cursor:default;}.dhx_cal_event .dhx_header{height:1px;margin-left:1px;border-width:1px 1px 0 1px;cursor:pointer;}.dhx_cal_event .dhx_title{height:12px;border-width:0 1px 1px 1px;border-bottom-style:dotted;font-size:7pt;font-weight:bold;text-align:center;background-image:url(bg_close.png);background-position:right;background-repeat:no-repeat;cursor:pointer;}.dhx_cal_event .dhx_body{border-width:0 1px 1px 1px;padding:5px;}.dhx_resize_denied .dhx_cal_event .dhx_footer{cursor:default;}.dhx_cal_event .dhx_footer{height:1px;margin-left:2px;border-width:0 1px 1px 1px;cursor:s-resize;}.dhx_cal_event_line{background-color:#FFE763;border:1px solid #B7A543;font-family:Tahoma;font-size:8pt;height:13px;padding-left:10px;color:#887A2E;cursor:pointer;overflow:hidden;}.dhx_cal_event_clear{font-family:Tahoma;font-size:8pt;height:13px;padding-left:2px;color:#887A2E;white-space:nowrap;overflow:hidden;cursor:pointer;}.dhx_in_move{background-color:#FFFF80;}div.dhx_cal_editor{background-color:#FFE763;border:1px solid #B7A543;border-top-style:dotted;z-index:999;position:absolute;overflow:hidden;}textarea.dhx_cal_editor{width:100%;height:100%;border:0 solid black;margin:none;padding:none;overflow:auto;}div.dhx_menu_head{background-image:url(imgs/controls.gif);background-position:0 -43px;width:10px;height:10px;margin-left:5px;margin-top:1px;border:none;cursor:default;}div.dhx_menu_icon{background-image:url(imgs/controls.gif);width:20px;height:20px;margin-left:-5px;margin-top:0;border:none;cursor:pointer;}div.icon_details{background-position:0 0;}div.icon_edit{background-position:-22px 0;}div.icon_save{background-position:-84px -1px;}div.icon_cancel{background-position:-62px 0;}div.icon_delete{background-position:-42px 0;}.dhx_cal_light{height:400px;light:300px;background-color:#FFE763;font-family:Tahoma;font-size:8pt;border:1px solid #B7A64B;color:#887A2E;position:absolute;z-index:10001;width:580px;height:300px;}.dhx_mark{position:relative;top:3px;background-image:url('./imgs/controls.gif');background-position:0 -43px;padding-left:10px;}.dhx_ie6 .dhx_mark{background-position:6px -41px;}.dhx_cal_light select{font-family:Tahoma;font-size:8pt;color:#887A2E;padding:2px;}.dhx_cal_ltitle{padding:2px 0 2px 5px;overflow:hidden;}.dhx_cal_ltitle span{white-space:nowrap;}.dhx_cal_lsection{background-color:#DBCF8C;color:#FFF4B5;font-size:18pt;font-weight:bold;padding:5px 0 3px 10px;}.dhx_cal_ltext{padding:2px 0 2px 10px;height:130px;height=140px;}.dhx_cal_ltext textarea{background-color:transparent;overflow:auto;border:none;color:#887A2E;height:100%;width:100%;}.dhx_time{font-weight:bold;}.dhx_cal_light .dhx_title{padding-left:10px;}.dhx_cal_larea{border:1px solid #DCC43E;background-color:#FFF4B5;overflow:hidden;margin-left:3px;width:572px;height:1px;}.dhx_btn_set{padding:5px 10px 0 10px;float:left;}.dhx_btn_set div{float:left;height:21px;line-height:21px;vertical-align:middle;cursor:pointer;}.dhx_save_btn{background-image:url('./imgs/controls.gif');background-position:-84px 0;width:21px;}.dhx_cancel_btn{background-image:url('./imgs/controls.gif');background-position:-63px 0;width:20px;}.dhx_delete_btn{background-image:url('./imgs/controls.gif');background-position:-42px 0;width:20px;}.dhx_cal_cover{width:100%;height:100%;position:absolute;z-index:10000;top:0;left:0;background-color:black;opacity:.1;filter:alpha(opacity=10);}.dhx_custom_button{padding:0 3px 0 3px;color:#887A2E;font-family:Tahoma;font-size:8pt;background-color:#FFE763;font-weight:normal;margin-right:5px;margin-top:5px;cursor:pointer;}.dhx_custom_button div{cursor:pointer;float:left;height:21px;line-height:21px;vertical-align:middle;}
    .dhx_cal_ltext{
    text-align:left;
    }
    .dhx_cal_light select{
    width:auto;
    }

    .dhx_custom_button {
    width:120px !important;
    }

    .dhx_cal_ltext{
    text-align:left;
    }
    .dhx_form_repeat{
    text-align:left;
    width:100%;
    }

    .dhx_cal_lsection {
    text-align:left;
    }
    .dhx_month_head{
    font-size:8pt;
    }
    .dhx_expand_icon {
    position:absolute; top:0px; right:2px;
    background-image:url(./imgs/colapce-expand-icon.gif);
    width:18px; height:18px;
    cursor:pointer;
    background-position:0px 18px;
    z-index:16;
    }

    div.dhx_cal_container table tr td {
    border-width:0 !important;
    padding:0 !important;
    }

    .dhx_cal_container table {
    border-collapse:separate !important;
    margin:0 0 !important;
    }

    .dhx_cal_container{
    z-index:999;
    }

    div.dhx_cal_event_clear, div.dhx_cal_event{
    line-height:100%;
    }

    .dhx_cal_ltext textarea {
    border-width:0;
    padding:0;
    background:transparent none repeat scroll 0 0;
    }

    .dhx_cal_light{
    text-align:left;
    }

  2. stanislav_volski
    Member
    Posted 2 years ago #

    There is an online tool, which can be used for custom css generation
    http://dhtmlx.com/docs/products/dhtmlxScheduler/skinBuilder/index.shtml

  3. substitute
    Member
    Posted 2 years ago #

    It is NOW it was NOT when I asked the question since that's an update from the latest version!

Topic Closed

This topic has been closed to new replies.

About this Topic