Topic: Widget styling, colours mostly. |

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Author

Posts
April 20, 2020 at 4:40 am #8003

Jarrett Rathert
Free User

Post count: 4

I’m wanting to change the white BG on the widget, and the dropdown menu to reflect the background of my website, if possible.

also mention, there is two down arrows in the drop down menu. wondering how I can rectify this as well. thanks!

website occuring on Absolute Overland

April 20, 2020 at 4:57 am #8004
Jarrett Rathert
Free User

Post count: 4
edit: ok so I figured out using inspector with chrome which fields needed changing, added custom CSS
```
.card {background-color: #f2f2f2 !important;}

.form-control {background-color: #f2f2f2 !important;}

.dropdown-menu {background-color: #f2f2f2 !important;}
```
still have a little weirdly shaped white area I can’t seem to pinpoint however. screenshot below demonstrates.

and of course the double arrow issue.
April 20, 2020 at 6:08 pm #8028

Alex Rollin
Moderator

Post count: 27815

This reply has been marked as private.

April 20, 2020 at 7:30 pm #8029

Jarrett Rathert
Free User

Post count: 4

I will add, the circled area only shows up on desktop browsers, it does not show up on mobile.

The double arrows do show up on desktop and mobile, though.

April 20, 2020 at 7:37 pm #8031
Kor
Moderator

Post count: 16516
Hi Jarrett,

Thanks for your post. Try using this custom CSS code below and see if it fixes it. Insert into WP > Appearance > Customize > Additional CSS.
```
.bootstrap-select.btn-group .btn .caret {
    display:none;
}

.bsui .dropdown-menu:before {
     display:none;
}
```
April 20, 2020 at 8:55 pm #8036

Jarrett Rathert
Free User

Post count: 4

That seemed to have worked, got rid of the weird artifact and the double arrow.

The remaining arrow is right on the border, can I add some padding in somewhere? Stuck on mobile for a while so I can’t inspect elements to experiment.

April 20, 2020 at 11:49 pm #8041
Jarrett Rathert
Free User

Post count: 4
update. fixed the arrow padding with
```
.bootstrap-select .btn {
	padding-right: 20px;
}
```
thanks for the help guys!
Author

Posts