Service Portal - Widget specific CSS styles are not being applied in Service Portal?

[Mehak1]

Hi, 

We are implementing the Service Portal. While implementing we are facing some issues. 

Below are the concerns: 

1. We are using the below HTML and CSS code in our service portal widget and the issue is that the styles are not getting applied. 

HTML:

<div class="card card-1 border-0 mb-4">

   <div class="card-header">

      <h3 class="card-title mb-0"><strong>Navigation</strong></h3>

   </div>

</div>

 CSS:

/*-----------------------

card 1

-------------------------*/

.card-1 {

    box-shadow: 0 3px 6px 0 rgb(0, 0, 0, 0.16) !important;

    border: 1px solid red;

}

.card-1 .card-title {

                font-size: 1.125rem !important;

}

.card-1 .card-header {

                padding-top: 1rem;

                padding-bottom: 1rem;

                background-color: transparent;

                border-bottom-color: #EAEAEA;

} 

Can anyone guide me why the above style for card-1 is not being applied to our widget in service portal?  

Below is the screenshot, where you can see that the "card-1" styles are not being applied to our widget

2. Also, can you please guide which version of Bootstrap is supported in Service Portal?

Thanks & Regards,

Mehak Arora

[Ujjawal Vishnoi · Accepted solution]

Hi Mehak,

You are mixing rgb with rgba.

RGB is a 3-channel format containing data for Red, Green, and Blue. RGBA is a 4-channel format containing data for Red, Green, Blue, and Alpha.

So change 

box-shadow: 0 3px 6px 0 rgb(0, 0, 0, 0.16) !important;

to 

box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !important;

And If no other CSS is defined, all elements use Bootstrap version 3.3.6 defaults.

Hope it helps.

Regards,

Ujjawal

[Ujjawal Vishnoi]

Glad it worked for you.