Kpi Title Value Not Changing Through custom Css

[#1]

Hi Expert's,

I Facing Issue While Changing Color of KPI title Css value Using Custom Css Remaining All are Effecting Except Kpi Value .

Css:

.good

{font-weight: bold !important;

font-size: 46px !important;

line-height: 200px !important;

color: rgb(200, 198, 138) !important;}

If I Use Standard Css Class only i.e .scn-pack-KpiView-Value It's Effecting But with Custom Css It's not allowing Changes Could you please Help  me Why it's not Effecting and how to Achieve with Custom Css.

Best Regard's,

Sathish.

[Former Member]

Hello Sathish,

Are you using Custom SDK component KPI Tile?

Thanks,

Anand

[SATHISH_BTP]

Hi Anand,

Yes I am using Custom SDK Kpi Title View Component.

[Former Member]

Hi Sathish Babu,

This won't work, because your custom class applicable to the entire component not limited to the kpitile value. where as the native class you have mentioned is specifically pointing to that VALUE label element.

So you should have try something like this

.good #__label12{

font-weight: bold !important;

font-size: 46px !important;

line-height: 200px !important;

color: rgb(200, 198, 138) !important;

}

the #__label12 points to the value label.

Thanks,

Nithyanandam

[SATHISH_BTP]

Hi Venu,

I am Writing individual Css Classes For Both Header's and Value For checking Whether Custom Css Working Or not For all it's working Except Kpi Value Css Only I am Unable to over write Could you please Help on this.

Regard's,

Sathish.

[Former Member]

Hi Sathish,

What you mean by Individual CSS class?? Can you show us what you have tried in a brief way. The code that i provide you would work well once you replaced the label id with the label id you have got for the value.

Thanks,

Nithyanandam

[SATHISH_BTP]

Hi Venu,

For KPI Value I have Written Following css Class and checked It's Not Effecting Kindly check Screen shot ,In the Screen shot I have Marked Css Class in right side it Condensing Standard Css Only not Custom Css.

.good.scn-pack-KpiView-Value{

  font-weight: bold !important;

  font-size: 46px !important;

  line-height: 46px !important;

  color: red !important;

}

For Header I have Written following Css Class And it's effecting Above Screen shot For Reference.

.good{

  font-weight: bold !important;

  font-size: 46px !important;

  line-height: 30px !important;

  color: red !important;

}

For Header Custom css Effecting but for Value It's not Happening Could you Please help on this.

Regard's,

Sathish.

[Former Member]

Hi Sathish,

The value custom css class is not appending to the DOM. It seems to be clearly a component bug.

you can try this as a generic approach

.scn-pack-KpiView-Value{

font-weight: bold !important;

font-size: 46px !important;

line-height: 200px !important;

color: rgb(200, 198, 138) !important;

}

if you want to be specific, you can add the component id like this

#KPIVIEW_1_control .scn-pack-KpiView-Value{

font-weight: bold !important;

font-size: 46px !important;

line-height: 200px !important;

color: rgb(200, 198, 138) !important;

}

it will affect only the kpi with the same id.

Thanks,

Nithyanandam

[Karol-K]

Hi Nithyanandam,

this thread seems to be longer than required.

1. you assign too many classes to the component.

keep : good

remove the other (scn-pack-KpiView-Value)

2. in CSS, specify the css as Sethu adds - there must be <space> between good and the other class! Explaination:

.good.scn-pack-KpiView-Value (no space) means both classes must be in same DOM object

.good .good.scn-pack-KpiView-Value (no space) means both classes must be in same DOM object (with space) means parent dom object must have good (does not matter which parent) and the concrete object must have scn-pack-KpiView-Value assigned.

.good .scn-pack-KpiView-Value {

  font-weight: bold !important;

  font-size: 46px !important;

  line-height: 200px !important;

  color: rgb(200, 198, 138) !important;

}

the effect:

(your setting for line-height is disturbing the layout, you should adjust).

does this work?

Karol

[Former Member]

Hi Karol,

I do feel the same.

The KPI value CSS class does not appending to the component.That is cause of the issue.

The .good class he provide for value in KPI is not appending in the component. It seems to be a  bug.

He can use whatever the CSS approach to help himself , i already provided few possible cases. Your suggestion also would work, which is straight-forward

Thanks,

Nithyanandam

[Karol-K]

Hi Nithyanandam, Sathish,

the answer above was actually to Sathish, I pressed wrong reply button...

the solution from will also probably work.

My example is working, attached here (you need to remove the txt extension and rename to "SCN_KPI_VIEW-20160511165149.zip" - then you can import in DS as this is the exported app)

The "good" class is of course applied, but on the component level, not on the value. This is where all classes from the properties are applied.

ant this is why the correct definition is

.good .scn-pack-KpiView-Value {

...

}

karol

SCN_KPI_VIEW-20160511165149.zip.txt.zip

[SATHISH_BTP]

Hi Karol,

As per You Points I have Tried The Technique You have explained

Css:  Given space

.good .scn-pack-KpiView-Value {

font-weight: bold !important;

font-size: 46px !important;

line-height: 40px !important;

color: green!important;}

But Out Put Not Overwriting With Custom CSS

I have tried to import Your Exported App But I am Getting Following error

Best Regard's,

Sathish.