How to override xhtml theme css?


Tags: css,struts2,themes

Problem :

I want to override some style provided in struts/xhtml/style.css. One of them is label style. In struts/xhtml/style.css the label class is defined like this on line 23:

.label {
    font-style: italic;
}

In my style file, i redefined label style using the following class:

.label {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    text-align: left;
    color: #333;
    font-size:12px;
    width:150px;
    font-style:normal;
}

But my label is always in italic, when i use debug tools i see it's take xhtml property and does not override the property. Here is my complete css file :

/* Reset des properties */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /*font: inherit;*/
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*Definition des properties pour le projet OCC*/
/*tags html*/
body{
    margin: auto;
    padding:auto;
    align:center;
    width:995px;
    font-family:Arial,"Times New Roman", Times, serif;
    font-size:12px;
}

h1{}
h2{}
p{
margin-top:20px;
margin-bottom:20px;
}
li a {
font-weight:bold;
margin: 50px 0 ;
padding:5px;
}
/*div*/

#content{
    margin: 20px 10px 20px 10px;
    text-align:justify;
    border:1px solid #000;
}
#header{
    border:1px solid #000;
    margin:20px 0 0 0;
    overflow:hidden;
}


#headerButton{
    background-color:#6993C9;
    color:#ffffff;
    font-weight:bold;
    padding: 5px 15px;
    height:2px;
    width:auto;
    padding: 7px 10px 34px 10px;
}

#headerButton a:link:first-child{
    color:#ffffff;
    margin: 0  0 0 10px;
}
#headerButton a:link{
    color:#ffffff;
    margin: 0 10px 0 0;
    text-decoration:none;
    font-size:11px;
}
#headerButton a:hover:first-child{
    color:#e6e6e6;
    margin: 0  0 0 10px;
}

#headerButton a:hover{
    color:#e6e6e6;
    margin: 0 10px 0 0;
    text-decoration:none;
}
#imageOrange24{
margin:0 5px -10px 0;
padding: 0 0 0 0;

}

#formWrapper{
margin:50px auto 50px auto;
padding:50px 50px 50px 50px;
width:300px;
}



#formWrapper  tr{
margin: 0 0 10px 0;
}
#wwFormTable tr{
margin: 0 0 10px 0;
}

#menu{
    float:left;
    width:125px;
    height:200px;
    margin: 20px 10px 20px 10px;
    border:1px solid #000;
}

#adminMessageBox{

    float:left;
    border: 2px blue solid;
    width:400px;
    height:200px;
    margin: 20px 10px 20px 10px;
    border:1px solid #000;

}
#waitingActionBox{
    float:right;
    border: 2px blue solid;
    width:400px;
    height:200px;
    margin: 20px 10px 20px 10px;
    border:1px solid #000;

}

/*div englobant la liste des brochures*/
#listeBrochures{

}

#search{
margin:0 0 20px 10px;
}
#dateCreation{

    margin: 0 0 0 5px;
}
/*classes*/
.fontGeneralTitle{
    float:left;
    display:block;
    font-size:24px;
    font-weight:bold;
    color:#6993C9;
    padding: 20px 0 0 0;
    margin: 0 0 0 30px;
}
.formLogin {
    font-family: Arial,Verdana, Helvetica, sans-serif;
    border: 1px solid #ccc;
    width: 200px;
    margin: auto;
    margin-top: 100px;
    text-align: center;
    -moz-border-radius: 70px 10px;
    padding: 10px;
}
.inputs {
    display: block;
    margin: auto;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    color: #333;
}

.label {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    text-align: left;
    color: #333;
    font-size:12px;
    width:150px;
    font-style:normal;
}

.boutonLogin {
    margin-top: 15px;
    background-color:#f79646;
    color:#ffffff;
     -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    behavior: url(/css/rounded/border-radius.htc);
    border-radius: 5px;
}

.tdLabel{

}


.boxTitle{
    width:100%;
    font-weight:bold;
    color:blue;
    text-align:center;
    margin:10px 0;
    text-decoration:underline;
}

.auteur{
    float:right;
    color:black;
    font-weight:bold;
    margin-right:10px;
}
.center{
    text-align:center;
}

.alignleft{
    float:left;
    margin:20px 0 50px 10px;
}
.alignright{
    margin:20px 100px 0 0;
}

.bold{
    font-weigth:bold;
    line-height:1;
}
.clear{
    float:clear;
}
.floatLeft{
    float:left;
}
.floatRight{
    float:right;
}

Here is my generated html form :

<div id="formWrapper"> 

        <form id="LoginAction" name="LoginAction" action="/OCC/LoginAction.action" method="post">
<table class="wwFormTable">
            <tr>
    <td class="tdLabel"><label for="LoginAction_login" class="label">Identifiant: /label></td>
    <td
><input type="text" name="login" size="20" value="" id="LoginAction_login" class="inputs" title="Entrer votre identifiant"/></td>
</tr>

            <tr>
    <td class="tdLabel"><label for="LoginAction_password" class="label">Mot de passe:</label></td>
    <td
><input type="password" name="password" size="20" id="LoginAction_password" class="inputs" title="Entrer votre mot de passe"/></td>
</tr>

            <tr>
    <td colspan="2"><div align="right"><input type="submit" id="LoginAction_0" value="Valider" class="boutonLogin" title="Cliquer pour se connecter"/>
</div></td>
</tr>

        </table></form>

Thanks for helping



Solution :

Have you tried?:

.label {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    text-align: left;
    color: #333;
    font-size:12px;
    width:150px;
    font-style:normal !important;
}

The !important annotation should override the style.


    CSS Howto..

    How to get rid of the border bottom from my navigation

    CSS (or jQuery): How to set horizontal scrollbar in the middle position?

    How to make text slide by only using css/html

    How to add CSS to CKEDITOR?

    How to define absolute positioned element's anchor point?

    how to add a CSS class inside a JavaScript setup code?

    CSS - How can I center my navigation bar?

    How to highlight syntax inside
    tag?

    How to get block to change width if text is longer then the width in a multilevel listless drop down navigation menu

    Codeigniter--add “active” css class to link, how to?

    How to display scroll bar onto a html table

    How do I apply CSS to the table generated into another window?

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    Issue with CSS background image (Image not Showing)

    How to make a function set css width with a JavaScript variable?

    How do I add a link to my CSS background?

    How to place a div at top center position of a page using css…?

    Is this how CSS LESS and SimpLESS work? [closed]

    Panel in Horizontal List item showing behind Button

    How to remove rounded from to select query in jquery?

    how to set the outer
    adapt to the browser,and the div in it adapt to the outer one?

    how to prevent link padding during hover from extending paragraph padding

    CSS: How to align vertically a “label” and “input” inside a “div”?

    How to improve the performance of this CSS animation?

    Show or hide button text responsively in jQuery Mobile

    How to provide some space between two lines of same text in css

    css: how to target p a img

    How to compile scss to css with node-sass

    How to set up css hierarchies