Widget styling, colours mostly.

This topic contains 6 replies, has 3 voices, and was last updated by  Jarrett Rathert 3 years, 12 months ago.

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
Viewing 7 posts - 1 through 7 (of 7 total)

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

Open Support Ticket