How to Add CSS Classes to Silk UI Components?

Hi all,

Can I add my own class to a Silk UI component?  For example, I want might want to:

  • Add the class "Clickable" to the CardSimple component, so that .CardSimple.Clickable works.
  • Add the class "Unread" to the TileNumber component, so that .TileNumber.Unread works.
  • Add the class "Subsection" to the Section component, so that .Section.Subsection works.

The key here is that I don't want all cards, tiles, sections, etc. to have the class, but I want to be able to set the class based on other factors.

The way I could see doing it is to open Silk UI and copy the component from it, then make a copy in my application.  Then I could give it a parameter for the class name I want to pass in.  I hope there is a better way to do it that would allow updates to Silk UI to be picked up, though.  Any suggestions?

Thanks!

Hi Scott,

A way around copying the components would be to use javascript to inject your classes onto the desired elements. While its not a great solution, it might be better so that you can keep up with the silk ui updates and not worry about the copied elements falling out of date.

Just a thought.

Justin

Justin Babel wrote:

Hi Scott,

A way around copying the components would be to use javascript to inject your classes onto the desired elements. While its not a great solution, it might be better so that you can keep up with the silk ui updates and not worry about the copied elements falling out of date.

Just a thought.

Justin

I hadn't considered that - thanks!  I'll look into it and update to say how it went.

     Scott


Hi! i have a query regarding CSS application in silk UI

There's this screen where I have a requirement of side menu bar. This side menu bar should always be visible when the screen is rendered in phone view or tablet view. Now, this functionality should be applicable across all the screens in my application. The landing page after Login has this feature i.e. the side menu bar is displayed as per requirement.But, when I navigate to the next screen, even if i change the view to phone or tablet, side menu bar does not appear as per requirement,it is displayed as desktop view. I have already written .phone and .tablet classes and consolidated in centralized style sheet. But the problem, persists. It is working for the very first screen and for the next screens, It is not working .

Gaurav Pandey wrote:

Hi! i have a query regarding CSS application in silk UI

There's this screen where I have a requirement of side menu bar. This side menu bar should always be visible when the screen is rendered in phone view or tablet view. Now, this functionality should be applicable across all the screens in my application. The landing page after Login has this feature i.e. the side menu bar is displayed as per requirement.But, when I navigate to the next screen, even if i change the view to phone or tablet, side menu bar does not appear as per requirement,it is displayed as desktop view. I have already written .phone and .tablet classes and consolidated in centralized style sheet. But the problem, persists. It is working for the very first screen and for the next screens, It is not working .

Hey,


Are there more than one flow and all the flows are consuming the same centralized CSS?


Regards,

Pankaj


Pankaj pant wrote:

Gaurav Pandey wrote:

Hi! i have a query regarding CSS application in silk UI

There's this screen where I have a requirement of side menu bar. This side menu bar should always be visible when the screen is rendered in phone view or tablet view. Now, this functionality should be applicable across all the screens in my application. The landing page after Login has this feature i.e. the side menu bar is displayed as per requirement.But, when I navigate to the next screen, even if i change the view to phone or tablet, side menu bar does not appear as per requirement,it is displayed as desktop view. I have already written .phone and .tablet classes and consolidated in centralized style sheet. But the problem, persists. It is working for the very first screen and for the next screens, It is not working .

Hey,


Are there more than one flow and all the flows are consuming the same centralized CSS?


Regards,

Pankaj



We have more than one flow and all the flows are consuming the same centralized Css.

Also the phone class is applied in first screen only after that the phone class is not appended to main container, that's why the CSS for phone is not working.

For 1st screen, phone class is appended to div:

For 2nd screen, it is showing for desktop but I had chosen mobile view:


Gaurav Pandey wrote:

Pankaj pant wrote:

Gaurav Pandey wrote:

Hi! i have a query regarding CSS application in silk UI

There's this screen where I have a requirement of side menu bar. This side menu bar should always be visible when the screen is rendered in phone view or tablet view. Now, this functionality should be applicable across all the screens in my application. The landing page after Login has this feature i.e. the side menu bar is displayed as per requirement.But, when I navigate to the next screen, even if i change the view to phone or tablet, side menu bar does not appear as per requirement,it is displayed as desktop view. I have already written .phone and .tablet classes and consolidated in centralized style sheet. But the problem, persists. It is working for the very first screen and for the next screens, It is not working .

Hey,


Are there more than one flow and all the flows are consuming the same centralized CSS?


Regards,

Pankaj



We have more than one flow and all the flows are consuming the same centralized Css.

Also the phone class is applied in first screen only after that the phone class is not appended to main container, that's why the CSS for phone is not working.

For 1st screen, phone class is appended to div:

For 2nd screen, it is showing for desktop but I had chosen mobile view:


Did you check the same thing in the real device sometimes emulator shows the wrong output?

if not please check and let me know.



Regards,

Pankaj


Pankaj pant wrote:

Gaurav Pandey wrote:

Pankaj pant wrote:

Gaurav Pandey wrote:

Hi! i have a query regarding CSS application in silk UI

There's this screen where I have a requirement of side menu bar. This side menu bar should always be visible when the screen is rendered in phone view or tablet view. Now, this functionality should be applicable across all the screens in my application. The landing page after Login has this feature i.e. the side menu bar is displayed as per requirement.But, when I navigate to the next screen, even if i change the view to phone or tablet, side menu bar does not appear as per requirement,it is displayed as desktop view. I have already written .phone and .tablet classes and consolidated in centralized style sheet. But the problem, persists. It is working for the very first screen and for the next screens, It is not working .

Hey,


Are there more than one flow and all the flows are consuming the same centralized CSS?


Regards,

Pankaj



We have more than one flow and all the flows are consuming the same centralized Css.

Also the phone class is applied in first screen only after that the phone class is not appended to main container, that's why the CSS for phone is not working.

For 1st screen, phone class is appended to div:

For 2nd screen, it is showing for desktop but I had chosen mobile view:


Did you check the same thing in the real device sometimes emulator shows the wrong output?

if not please check and let me know.



Regards,

Pankaj



Ok. I will try and check.