Page 1 of 1

Primefaces extensions 4.0?

Posted: 12 Mar 2016, 23:11
by bjorntj
I am trying to use pe:timePicker together with the Titan theme but that does not really work. Should this work or do I need to do some workaround to get the correct style on the timePicker component?
I have tried both inline mode and popup mode but they have no background and popup mode is very small and inline is a bit bigger but neither shows up as they should...


Regards,

BTJ

Re: Primefaces extensions 4.0?

Posted: 13 Mar 2016, 22:36
by mert.sincan
Layouts support only primefaces components. But, I overrode pe:timePicker for you. Please try;

Code: Select all

.ui-timepicker-table .ui-widget-header {
                border:solid 1px #5b616b !important; 
                font-size: 16px;
                border-radius: 0px;
                -webkit-border-radius: 0px;
                -moz-border-radius: 0px;
                color: #fff;
                background-color: #0071bc;
                padding: 2px;
            }
            
            .ui-timepicker-table table.ui-timepicker {
                padding-top: 2px;
            }
            
            .ui-timepicker-table {
                background-color: #fbfcfd !important;
                border: 1px solid #5b616b;
                padding: 2px !important;
                box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3) !important;
            }
            
            .ui-timepicker-table table {
                border-collapse: inherit !important;
                font-size: 16px;
            }
            
            .ui-timepicker-table table a{
                color: #72828b;
            }
            .ui-timepicker-table td {
                padding: 0px;
            }
            
            .ui-timepicker-table tbody tr td.ui-timepicker-hours td.ui-timepicker-hour-cell a.ui-state-active,
            .ui-timepicker-table tbody tr td.ui-timepicker-minutes td.ui-timepicker-minute-cell a.ui-state-active {
                color: #fff !important;
                font-size: 16px;
                background-color: rgba(0, 0, 0, 0.7);
                border: 1px solid rgba(0, 0, 0, 0.7);
            }
            
            .ui-timepicker-table tbody tr td.ui-timepicker-hours td.ui-timepicker-hour-cell a:hover,
            .ui-timepicker-table tbody tr td.ui-timepicker-minutes td.ui-timepicker-minute-cell a:hover {
                color: #FFF; 
                -webkit-transition: all 0.5s ease; 
                -moz-transition: all 0.5s ease; 
                -ms-transition: all 0.5s ease; 
                -o-transition: all 0.5s ease; 
                background-color: rgba(0, 0, 0, 0.7);
                border: solid 1px rgba(0, 0, 0, 0.7);
            }
            
            .ui-timepicker-table tbody tr td.ui-timepicker-hours td.ui-timepicker-hour-cell a,
            .ui-timepicker-table tbody tr td.ui-timepicker-minutes td.ui-timepicker-minute-cell a{
                border: 1px solid transparent;
                cursor: default;
                -webkit-transition: all 0.5s ease; 
                -moz-transition: all 0.5s ease; 
                -ms-transition: all 0.5s ease; 
                -o-transition: all 0.5s ease;
                padding: 0.5em;
                color: #000;
            }
            .ui-timepicker-table .ui-timepicker-hours,.ui-timepicker-table .ui-timepicker-minutes {
                padding: 0.2em;
            }
</style>


I think you can change my code by yourself. Also, you should view this issue; http://forum.primefaces.org/viewtopic.php?f=23&t=42283

My Screenshot;
Image

Re: Primefaces extensions 4.0?

Posted: 13 Mar 2016, 22:48
by bjorntj
I managed to get something working but your solution looks so much better, thx! :)

BTJ

Re: Primefaces extensions 4.0?

Posted: 14 Mar 2016, 17:36
by mert.sincan
Glad to hear, thanks for the update ;)