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,

Goto to standard class which you will get at the time of layout creation and find this class .scn-pack-KpiView-Value and change the value.

Let me know if it helps..

Regards,

Arjun N

[SATHISH_BTP]

Hi Arjun,

By using Standard Class it's working as per my requirement it's not suitable for me i.e I am Showing Current year value in kpi value and previous year value in footer if current Value Greater than Previous year value the value should show in green color other wise need to show in Red Color by using Standard css it's Not Possible.

Regard's,

Sathish.

[Former Member]

Let's give a try by adding class like this

Use this for your label

.good_1{

  font-weight: bold !important;

  font-size: 46px !important;

  line-height: 46px !important;

  color: red !important;

}

instead of

.good.scn-pack-KpiView-Value{

  font-weight: bold !important;

  font-size: 46px !important;

  line-height: 46px !important;

  color: red !important;

}

The problem with the DS is you cannot modify a SVG components. Please let me know if it works.

We can do one more final thing if this is not working ..?

Regards,

Arjun N

[Former Member]

If the above approach is not working try with this..

1. Go to the perfect label child (Div element) at runtime as you have mentioned in your screenshot.

2. Click on '+' icon so that one class will create for specific label div element.

3. Write your color code ( color: red !important;) inside that class.

If it is changing your KPI color then copy that class and paste it in you css file.

Find the screen shot for your reference.

Regards,

Arjun N

[Former Member]

HI Sathish,

Please try with the below piece of code and let us know.

.good .scn-pack-KpiView-Value {

font-weight: bold !important;

font-size: 46px !important;

line-height: 200px !important;

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

Rgds,

Sethu.

[SATHISH_BTP]

Hi Sethu Ram,

As per Your Inputs I have Checked,But No Use It's not Overwriting Custom Css Screen Shot attached Below.

.good.scn-pack-KpiView-Value{

  font-weight: bold !important;

  font-size: 46px !important;

  line-height: 46px !important;

  color: red !important;

}

[Former Member]

Hi Sathish,

Please let me know have you tried with mentioning Good class in the Class name for the KPI value.

Rgds,

Sethu.

[SATHISH_BTP]

Hi Sethuram,

How I need to Mention Good as Css Class name for KPI Value.

Regard's,

Sathish.

[Former Member]

Yes. Do mention only Good as the CSS class and let me know on the results.

Rgds,

Sethu.

[SATHISH_BTP]

Hi Sethu,

Initially I have Checked Like that Only But It's Not Effecting .

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.