Overwrite existing css class properties for a web block

Overwrite existing css class properties for a web block

  
HI All,

I have a css class in my application with height of some X pixels, now I want to overwrite the same class width property to some X+100 pixels for a particular web block. 
 For this I have a created a css with same name in the required web block and applied width property but it is not reflecting as expected. Can any one help me on this


Thanks,
Venkatesh Gude.
Hi Venkatesh,

It's hard to know what you did wrong without an example.

But in that case you will probably need to make the css rules more specific.
To make that you set a container in your block and all content inside it. Then set that container style (lets call it InsideBlock for example purposes).

Then your css rule will be:

.InsideBlock .YourOtherStyle {
    width: 200px;
}

Regards,
João Rosado
Hi Joao,

Here I am explaining you the scenario with example for better understanding

I am using a tabs_clientside rich widget. I have overwritten the width css property of ul.Tabs_Header in my local theme i.e abc theme. At this moment I dont have write permissions to my abc theme. So for now I want to overwrite again the width property of ul.Tabs_Header in web screen.
How can I achieve this?

Example:

ul.tabs_header (deafault css from outsystems):{
height: 31px;
}


In ABC Theme(read only theme) css of same class has changed as below

ul.tabs_header{
height : 25px;
}

Now I want to define css in my web screen as below

ul.tabs_header{
height : auto;
width : 1000px;
}


Here question in brief is how can I create same css class with different properties as shown above for web screen?

Thanks,
Venkatesh Gude.
Hi,

You need to make the rule more specific to force it to be applied.

This can be achieved by adding more selectors to the rule. For example, you can add add an extra element like "html" that will always exist.

html ul.tabs_header{
    height : auto;
    width : 1000px;
}


Regards,
João Rosado