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
Primefaces extensions 4.0?
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Layouts support only primefaces components. But, I overrode pe:timePicker for you. Please try;
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;
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;
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks for the update
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 0 guests