[CPS-devel] Problems with CSS

[Jean-Marc Orliaguet]

M.-A. DARCHE wrote:
> Santi Camps a écrit :
>   
>> Hi all,
>>
>> I've found a rare case using CPSSkins and defining my own CSS style
>> for certain form elements, like input or button objects.    The fact
>> is that a style="font-size:20px" definition in a button or an input
>> object takes no effect when using inside CPSSkins, but works fine in
>> the same page when it is out of CPS.   The same occurs trying to use a
>> class definition
>>
>> This seems that there is some CSS definition inserted by CPSSkins that
>> disables the font-size on buttons or input elements.
>>
>> Also, any of the font size styles defined inside CPSSkins is able to
>> increase the size on this elements, AFAIK.
>>
>> Anybody knows a workaround to this ?
>>
>>     
>
> CPSSkins uses for font styling the "!important" modifier which increase
> the priority of its CSS style definition.
>
> It's annoying that CPSSkins does this, for accessibility reasons too,
> but it seems needed. I haven't had time to look into it for now.
>
> A solution for your problem would thus be to use the "!important"
> modifier for your CSS style definitions too, for example :
> font: bold 70% 'Lucida Grande', Arial, Helvetica, sans-serif !important;
>
> And more generally try to have more precise CSS selector, for example :
> div div div p {
>   font: bold 70% 'Lucida Grande', Arial, Helvetica, sans-serif !important;
> }
>
>
> Cheers,
>
>   

Hi,
there is usually a reason when !important is used:
http://svn.nuxeo.org/trac/pub/changeset/45736

in that case I remember too that RSS buttons looked rather weird otherwise.

the "!important" used in CPSSkins styles are there for WYSIWYG reasons, 
how user-friendly would it be to choose a blue color for a font in the 
editor, and see that in the theme the font color is red? that is the 
type of things that happens because there are static css files that 
apply style properties to just about every element on the page.

in comparison there are no "!important" in nuxeo5, but as a result some 
colors cannot be changed in the theme editor (link colors for instance 
are always blue). The solution is to clean up styles and avoid generic 
assignments such as:

  a {color: ...}.

/JM