Question

Use of Custom CSS in widgets - Affecting all content even when the widget is not there?

  • 15 February 2023
  • 2 replies
  • 101 views

Userlevel 2
  • Participating Frequently
  • 12 replies

Hello, 

I am trying to use a CSS code to modify a video widget in a specific dashboard layout. I used the CSS class names provided by TI. In sandbox it worked and I got the look i wanted, but once I moved the code in production I noticed that it was affecting all the videos, and I was not even used in a widget.

My understandig of how we can use CSS to modify a widget is that you can create it in Design>Theme> Custom Code leave it there, and then use the classes you need in the widgets you want.

I tried to use my own CSS classes (because I thought that maybe the ones provided by TI were used in TI code already) but they would not work.

Am I missing something? is there anyone that had the same or similar issues with Custom Code and can suggest a solution or best practice?

Thank you!

Irene 


2 replies

Userlevel 1

so easiest way to do this is create your own unique class name
“my_unique_name” , and add this at the bottom of the Video widget under CSS classes.

Then you can either add the code to the Design>Theme> Custom Code as a new class gloabaly,

.my_unique_name {
your style goes here

}

or you can add it to the individual page where you added the widget in that pages custom code
<style>

.my_unique_name {
your style goes here

}

</style>

Userlevel 2

Hello Craig,

thank you for the suggestion! I tried it out and it did not work for me. The only thing that works are the TI classes.

I have to say that my expertise with CSS and coding in general is not very extensive, so I might be doing something wrong.

But I will keep your code above and try to find out what I am doing wrong :)

Thanks again,

Irene

Reply