How to set the text color of a pe:timer?

Question

I use the primefaces extension for the timer. I display severals timers in a data list components and those data list components are displayed in a cell of a data table.

I change the color of each cell with style parameter, with value from bean value. For each cell the background color changed and so is for the timers cells but the text color is not changed.

<p:dataTable id="item_#{synopticLocationBean.id}" var="synopticIdBean" value="#{synopticLocationBean.synopticIdBeans}"
                                resizableColumns="false"
                                rendered="true"
                                rowIndexVar="rowIndex">

    <p:column headerText="ID" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
        <h:outputText value="#{synopticIdBean.number}" />
    </p:column>

    <p:column headerText="Nom" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
        <h:outputText value="#{synopticIdBean.name}"/>
    </p:column>

    <p:column headerText="Chrono" rendered="#{dashboardView.manageChronometers}" style="background-color: #{synopticIdBean.backgroundColor}; color: #{synopticIdBean.foregroundColor};">
        <p:dataList value="#{synopticIdBean.synopticCounterBeans}" var="synopticCounterBean" type="definition" class="data-zone">
            <pe:timer id="timer_#{synopticLocationBean.id}" 
                    forward="true" 
                    timeout="10000"
                    formatFunction="return displayElapsedTimeForChrono_save('#{synopticCounterBean.name}',
                                                                            '#{synopticCounterBean.startTime}',
                                                                            '#{synopticCounterBean.pauseTime}',
                                                                            '#{synopticCounterBean.endTime}',
                                                                            '#{synopticCounterBean.counterValue}');"/>
        </p:dataList>
    </p:column>
</p:dataTable>

When I set the style parameter on the timer component I get the following error : Error Parsing /pages/dashboardgeneric/dashboardWip.xhtml: Error Traced[line: 846] Attribute "style" was already specified for element "pe:timer".

Answer 1

I find a solution, I have added a style in the component pe:timer like that :

<p:dataList value="#{synopticIdBean.synopticCounterBeans}" var="synopticCounterBean" type="definition" class="data-zone">
    <pe:timer id="timer_#{synopticLocationBean.id}" 
        forward="true" 
        timeout="10000"
        formatFunction="return displayElapsedTimeForChrono_save('{synopticCounterBean.name}',
    '#{synopticCounterBean.startTime}',
    '#{synopticCounterBean.pauseTime}',
    '#{synopticCounterBean.endTime}',                                                                            '#{synopticCounterBean.counterValue}');"
    style="color : #{synopticMainLocationIdBean.foregroundColor};"/>
            </p:dataList>

The background color inherited from the datalist and the foreground color take the value declared from the datalist.