Service Portal fields color change

Bhavana20 · ‎05-21-2021

Hello Guys,

Can anyone help me to solve this please

In Portal when we are clicking on fields, it shows the "Blue" border and how to change it to other color we want.

I am not getting how to fix that. Please help me this is bit urjent.

Thanks and Regards,

Bhavana

Oleg · ‎05-25-2021

I changed Theme to "Stock" and added the following CSS rules directly in CSS variables:

.form-control:focus,
.sp-page-root .form-control:focus {
    border-color: #00B9B0;
    outline: none;
    -webkit-box-shadow: 0 0 5px #00b9b0;
    box-shadow: 0 0 5px #00b9b0;
}
.select2-container.select2-container-active {
    outline: 5px auto #00B9B0;
    border-color: #00B9B0;
    box-shadow: 0 0 5px #00B9B0;
    outline-offset: -2px;
}
.select2-container-active .select2-choice {
    border-color: #00B9B0;
}
.select2-results .select2-highlighted {
    background: #00B9B0;
    color: #fff;
}

As the result the colors have been changed like expected:

I think that one should add more CSS rules to change colors for all different controls, but the above example shows that the approach works. Isn't so?

View solution in original post

Bhavana20 · ‎05-23-2021

Thank you for your response,

I have tried adding this below in my theme ( clone of stock) and it works for the input fields

.form-control:focus {
outline:none;
border-color: #00B9B0;
-webkit-box-shadow: none;
box-shadow: none;
}

input:focus, textbox:focus {

}------> did not work for dropdown field and description field

Is there anything i am missing, Please help!!

Gaurav Shirsat · ‎05-23-2021

Hi Bhavana

Please Refer Below Thread

Change Clour

Please Mark Correct and Helpful

Thanks and Regards

Gaurav Shirsat

Bhavana20 · ‎05-23-2021

Hello Gaurav,

I want to change the background color of the field in the portal for all the dropdown list field.

Thanks and Regards,

Bhavana

Prasad Dhumal · ‎05-23-2021

Try below CSS

form-control:focus {
border-color: #00FF00;     //change color here
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);           //change color here
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);                      //change color here
}

Bhavana20 · ‎05-23-2021

Hello,

Thank you for your response, This doesnot work for me and the below css only works for the fields but not the dropdown fields as shown in the above screen shot.

.form-control:focus {
outline:none;
border-color: #00B9B0;
-webkit-box-shadow: none;
box-shadow: none;
}

Please help!!