Page 1 of 1

Calendar Text Colour

Posted: 25 Mar 2016, 14:22
by vealparry
How do i change the Calendar Text Colour, the default colour looks very dim, i am unable to make any difference between active and disabled dates.

Re: Calendar Text Colour

Posted: 28 Mar 2016, 13:22
by aragorn
We added Less feature for Volt, Olympos, Rio, Modena, Adamantium, Atlas, Titan; (Less Detail: http://lesscss.org/ ) You can easily change font-size, all colors (background-color, color, border-color etc.), transition of components ...

If you want to change cell color, background-color, font size etc. of calendar in Volt, you can change this value theme-variables.less;

Code: Select all

/* Other components*/
...
@calendar-day-cell-link-color-hover: #FFFFFF;
@calendar-day-cell-link-color:rgba(41,80,107,0.8);
...
To change style of components -> theme-variables.less
To change style of Layout-> layout-variables.less

Exp;

Code: Select all

@calendar-day-cell-link-color: red;
Image

Re: Calendar Text Colour

Posted: 28 Mar 2016, 15:40
by vealparry
Thanks aragorn

I tried the same but it does not work. Here is the changes that i did

I edited the volt-theme-2.0.jar file and changed the entry
@calendar-day-cell-link-color:rgba(210, 243, 127, 0.9);

I also have the theme-variables.less in /resources/less/variables
@calendar-day-cell-link-color:rgba(210, 243, 127, 0.9);

I did a clean and build, redeployed my project,

In My web.xml

<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>volt</param-value>
</context-param>
<context-param>
<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
<param-value>/WEB-INF/primefaces-volt.taglib.xml</param-value>
</context-param>

primefaces-volt.taglib.xml has the default values

Do i have to change anything.

Re: Calendar Text Colour

Posted: 28 Mar 2016, 16:54
by aragorn
Do you have Volt Layout + Volt Theme ? I think you have only Volt Theme. Right?

Re: Calendar Text Colour

Posted: 28 Mar 2016, 17:55
by vealparry
I do have a volt layout its in a zip file so i could not attach to project. What should i do with the layout.zip file.

Re: Calendar Text Colour

Posted: 04 Apr 2016, 06:30
by vealparry
Ok, i figured it out, it needs to be changed in
resources/primefaces-volt/theme.css

.ui-datepicker-calendar tbody tr td a {
color: rgba(0, 0, 128, 0.9) !important;
background-color: transparent !important;
font-size: 14px;
}

Re: Calendar Text Colour

Posted: 04 Apr 2016, 08:36
by aragorn
Glad to hear! Thanks for the update;)

Customization Theme and Layout with Less;
https://www.dropbox.com/s/gnfiq39hfx37r ... s.avi?dl=0