How to override global.css Property...

[arslantabassum]

I have this in Global.css file... Line number 6442

ul.step li {

    float: left;

    width: 20%;

    text-align: left;

    border: 1px solid;

    border-top-color: #cacaca;

    border-bottom-color: #9a9a9a;

    border-right-color: #b7b7b7;

    border-left-width: 0px; }

------------------------------------------
I want to override it when installing my Module, with second line like Just change 20% to 19%.. How to do that...????

ul.step li {

    float: left;

    width: 19%;

    text-align: left;

    border: 1px solid;

    border-top-color: #cacaca;

    border-bottom-color: #9a9a9a;

    border-right-color: #b7b7b7;

    border-left-width: 0px; }

Or How to override whole global.css file, But i need to change just 20% to 19% .....

All suggestions are appriciated........

Edited May 7, 2014 by arslantabassum (see edit history)

[vekia]

create module css stylsheet file, include it to the header section

and create there styles that you want.

for each style add !important modifier.

[arslantabassum]

create module css stylsheet file, include it to the header section

and create there styles that you want.

for each style add !important modifier.

i have module.css file and it's included in header section...

Now what's next???

will it be override the global.css property...  if i write in module.css file like this....

 

ul.step li {

    float: left;

    width: 19%;

    text-align: left;

    border: 1px solid;

    border-top-color: #cacaca;

    border-bottom-color: #9a9a9a;

    border-right-color: #b7b7b7;

    border-left-width: 0px; }

[vekia]

browser will use first defintion, so it will be definition provided in global.css file

you can change that with code like:

ul.step li {
    float: left!important;
    width: 19%!important;
    text-align: left!important;
    border: 1px solid!important;
    border-top-color: #cacaca!important;
    border-bottom-color: #9a9a9a!important;
    border-right-color: #b7b7b7!important;
    border-left-width: 0px!important; }

[arslantabassum]

 

browser will use first defintion, so it will be definition provided in global.css file

you can change that with code like:

ul.step li {
    float: left!important;
    width: 19%!important;
    text-align: left!important;
    border: 1px solid!important;
    border-top-color: #cacaca!important;
    border-bottom-color: #9a9a9a!important;
    border-right-color: #b7b7b7!important;
    border-left-width: 0px!important; }

mymodule.css file is added in header section. i can check it by viewing resource

I added this code in mymodule.css file as you mentioned.

 

ul.step li {

float: left!important;

width: 19%!important;

text-align: left!important;

border: 1px solid!important;

border-top-color: #cacaca!important;

border-bottom-color: #9a9a9a!important;

border-right-color: #b7b7b7!important;

border-left-width: 0px!important; }

 

But Not working... Please elaborate .......

 

[ZinC]

Shouldn't there be spacing like this: width: 19% !important; ?

[arslantabassum]

Shouldn't there be spacing like this: width: 19% !important; ?

Sorry , not working....

[vekia]

noo, spacing is not the problem

 

any chance to see it live somewhere? if so, please share url

in cases like that it's necessary to inspect website and its styles

[arslantabassum]

noo, spacing is not the problem

 

any chance to see it live somewhere? if so, please share url

in cases like that it's necessary to inspect website and its styles

working live.....   

i have change the original.css file.... with hardcording......   

Please... share the complete procedure of overriding original.css property..... Again in detail...

I Must try.............. thanks.......