question Re: Service Portal fields color change in Developer forum

Service Portal fields color change

Bhavana20 — Fri, 21 May 2021 12:49:15 GMT

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

Re: Service Portal fields color change

Bhavana20 — Fri, 21 May 2021 13:34:12 GMT

Hello @Harshvardhan , @Oleg ,

Can you Please help me, i am not getting which attribute to modify.

Thanks and Regards,

Bhavana

Re: Service Portal fields color change

Justin77 — Fri, 21 May 2021 13:42:47 GMT

What you're looking for is the CSS selector :focus

https://www.w3schools.com/cssref/sel_focus.asp

so I would add input:focus and textarea:focus selectors to your portal theme and set whatever properties you are looking for (you may need the !important tag). The blue you see is set as the outline property:

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Re: Service Portal fields color change

Bhavana20 — Fri, 21 May 2021 16:47:29 GMT

Thank you for your response, Our client do nott want that but just when we click on field it highlights in the blue color and i want to change it to Green color.

I am not getting how to do that.

Please help!!

Re: Service Portal fields color change

Justin77 — Fri, 21 May 2021 16:53:25 GMT

See https://docs.servicenow.com/bundle/quebec-servicenow-platform/page/build/service-portal/concept/portal-css.html I recommend using this in the Theme CSS.

Create two CSS selectors, input:focus and textbox:focus

Then set the property "outline" for whatever color you're looking for. Here's another example: https://www.w3schools.com/cssref/pr_outline.asp

Re: Service Portal fields color change

Bhavana20 — Sun, 23 May 2021 12:02:40 GMT

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!!

Re: Service Portal fields color change

Gaurav Shirsat — Sun, 23 May 2021 12:10:28 GMT

Hi Bhavana

Please Refer Below Thread

Change Clour

Please Mark Correct and Helpful

Thanks and Regards

Gaurav Shirsat

Re: Service Portal fields color change

Bhavana20 — Sun, 23 May 2021 13:35:47 GMT

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

Re: Service Portal fields color change

Prasad Dhumal — Sun, 23 May 2021 13:57:52 GMT

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
}

Re: Service Portal fields color change

Bhavana20 — Sun, 23 May 2021 14:18:28 GMT

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!!

Re: Service Portal fields color change

Oleg — Sun, 23 May 2021 16:03:18 GMT

You should set outline, border and box-shadow (one can additionally set -webkit-box-shadow) properties on some CSS selector(s), which uses :focus. The exact selectors depends on CSS applied on your current page. I suppose that the required CSS rule could be the following:

button:focus,
.btn:focus,
.form-control:focus,
a:focus,
input:focus,
select:focus,
.selectize-input.focus,
[role="button"]:focus,
[role="slider"]:focus,
[tabindex]:focus {
	outline: none;
	border: 1px solid #1f8476;
	-webkit-box-shadow: 0px 0px 5px #1f8476;
	box-shadow: 0px 0px 5px #1f8476;
}

where you should change #1f8476 to some other color.

To examine a specific case, which you have, you can use Developer Tools of your web browser. You need select element (input or select), which CSS rules you want to examine, open context menu and choose "Inspect". After that you can click on ":hov" to simulate pseudo-classes like :focus or :hover and check ":focus" for example. If you selected correct page element, then you will see focus effect and you can examine existing the CSS rule of the page, which set outline, box-shadow, border or other CSS properties. The same CSS selector (or other with higher specificity) you should use in your custom CSS rule:

The example on the picture uses [tabindex]:focus selector, for example.

Re: Service Portal fields color change

Bhavana20 — Mon, 24 May 2021 12:03:10 GMT

Hello,

I tried to apply the below css in the theme and i works but i dont want the box-shadow property and tried to make it none but it doesnot work

1) .select2-results .select2-highlighted: { ------------> for the dropdown choices background color
background : #00B9B0 !important;

}

2) .form-control:focus{ -----------> other input fields
outline:none;
border-color: #00B9B0;
-webkit-box-shadow: none; ---------> here it works no issues
box-shadow: none;
}

3) .select2-container.select2-container-active{ -------->This is for dropdown fields
outline:none;
border-color: #00B9B0 !important;
-webkit-box-shadow: 0 0 5px #00b9b0; ------->i tried to keep it none but it wont work;
box-shadow: 0 0 5px #00b9b0; ---------> i tried to keep it none but it wont work;
}

Please help me to remove the highlighted text above in 3) to not have box-shadow and webkit-box-shadow property, just the border-color to have the green like shown in 2)

Re: Service Portal fields color change

Oleg — Mon, 24 May 2021 19:12:23 GMT

Hi!

The CSS rules, which you tried to set looks very strange. I suppose that your problem is not which CSS rules you set, but where you set the rules.

Select2 results will be placed dynamically directly inside <body> of the page. It means that you can change default CSS rules only if you place/modify the rules on the Service Portal Thema. If you use for example, La Jolla Theme, then you will find the following CSS rules in sp-theme-stock-high-contrast.css:

.select2-results {
  .select2-highlighted {
    background: $brand-primary !important;
  }
}

.select2-container-active .select2-choice,
.select2-container-active .select2-choices {
  border-color: $input-border-focus !important;
}

you will find more select2 CSS rules in sp-theme-la-jolla.css additionally. You can modify the CSS rules directly in the files of create your own Style Sheet und CSS Include and place it after default CSS includes used by your Theme. If your Service Portal Thema uses CSS variable $input-border-focus, then you can modify the value first of all.

It the above advices will not solve your problem then you should post more details about the Theme, which you use and the page of Service Portal, where you try to apply custom CSS rules. It I would be able to reproduce your problem I would be able help you.

Re: Service Portal fields color change

Bhavana20 — Tue, 25 May 2021 08:36:23 GMT

Thank you for your response,

I am not using the La jolla theme, i am using the stock theme.

and added the css rule in the theme of my portal.

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

.select2-container.select2-container-active{
outline:none;
border-color: #00B9B0 !important;
-webkit-box-shadow: 0 0 5px #00b9b0;
box-shadow: 0 0 5px #00b9b0;
}

when i tried to keep the "-webkit-box-shadow: none;
box-shadow: none; " it takes the default parent css rule.

when i click on the field it should not add the box-shadow, that means it should be none,

Please select the stock theme.

Re: Service Portal fields color change

Oleg — Tue, 25 May 2021 09:55:29 GMT

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?

Re: Service Portal fields color change

Bhavana20 — Tue, 25 May 2021 10:21:00 GMT

Thank you so much, it works i just made box-shadow : none

.form-control:focus,
.sp-page-root .form-control:focus {
border-color: #00B9B0;
outline: none;
-webkit-box-shadow: none; ---------> made none
box-shadow: none;
}
.select2-container.select2-container-active {
outline: 5px auto #00B9B0;
border-color: #00B9B0;
box-shadow: none;
outline-offset: -2px;
}

Thanks a lot!!

Re: Service Portal fields color change

Bhavana20 — Tue, 01 Jun 2021 13:55:39 GMT

hello,

when viewing the fields from the IE, it shows like this

samething when viewed from the Chrome

Please help me why this is happening like this.

Thank you!!

Re: Service Portal fields color change

Oleg — Tue, 01 Jun 2021 14:42:19 GMT

Hi!

I can't reproduce the problem: my test will be displayed in IE in the same way like in Chrome.

What I can recommend you to try is modifying of CSS rules to increase specificity (see here). For example, you can try to use

div.select2-container.select2-container-active {
    outline: 5px auto #00B9B0;
    border-color: #00B9B0;
    box-shadow: 0 0 5px #00B9B0;
    outline-offset: -2px;
}
div.select2-container-active .select2-choice {
    border-color: #00B9B0;
}
ul.select2-results .select2-highlighted {
    background: #00B9B0;
    color: #fff;
}

instead of previously posted

.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;
}

I hope it helps. If it will not help you should use Developer Tools of IE to examine which CSS rules overwrites the CSS rules, which set your colors.