How do I change the colors of all of these?

[BeaniCraft]

[Chris]

Sept 18, 2024 17:59:15 GMT -8 Chris said:

Perhaps a summary of all the CSS added thus far would help since the forum link is unknown or unfriendly, and some things were done behind the scenes.
Also, are we referring to the spinner arrows (which increment/decrement the numbers like in the table WYSIWYG dialog) or the dropdown arrows on the jQuery-ui selectMenu elements (e.g., 'actions')?

If it is the former, then that would usually not be stylable via CSS since it is encapsulated within the control's shadow-root. Unless it explicitly exposes a parts list to the host element, that part would be hidden from CSS's reach. The browser could also expose the shadow element through proprietary means such as ::-webkit-inner-spin-button ^[1][2], but that would not be consistent across all browsers and platforms and allow only specific stylings through (i.e., background-color unsupported but can hide or set mouse cursor state on hover)

The jQuery-UI version included with Proboards (jQuery-UI version 1.8.13) does not have a spinner widget because that was not added until v1.9. This is likely why the native controls were used in this case. Therefore, they are not as customizable as the jQuery-ui selectMenus (e.g., 'actions') when compared to their native browser select menu counterpart.

So as of now, the things that have been changed are:

• The smiley menu.
• The embed menu.
• The color menu.
• The "X" button hover color in the color menu.
• The button hover color in the smiley menu.
• The button hover color in the embed menu.
• The border color in the tag user menu.
• The dropdown buttons. (e.g., The "Actions" button.) (Note: They are about half finished, see this for a bit more info as to what I'm trying to change.)
• All of the dropdown menus.
• And all of the dropdown menus hover colors.

What I was trying to change was both of those, but from the looks of it, I will just have to stick with the dropdown buttons and call it a day.
Also, would it be possible to change the border of those spinner widgets to be the same color of the text boxes?

Here's the raw CSS of all of the changes, just in case it helps.

SPOILER: Click to show

/* CUSTOM */
div#colorPicker-container {
  background: #212121;
  color: #ffffff;
  border-color: black;
}
input.short {
  background-color: #212121;
  color: #ffffff;
}
.smiley-menu, .embed-menu {background-color:#212121; border-color:#000000}
.user-search-input {background-color: #3c3c3c; color:#8f8f8f; border:0px;}
.smiley-menu>li>a {color: #ffffff;}
div#colorPicker-close:hover {
  background: #4b0000;
}
.ui-selectMenu-box {
  color: #8f8f8f;
  background-color: #212121;
}

ul.select_menu_list {background-color: #212121; border:0px;}
.select_menu_list li>a {color: #8f8f8f; background-color: #212121;}
.ui-selectMenu-box .arrow {background: #212121;}
.ui-selectMenu-box .arrow.down>span {border-top-color: #8f8f8f;}

/* Pagination Dropdowns added from cave*/
.control-bar .controls .status,
.control-bar .controls .ui-selectMenu-box,
.control-bar .ui-search .search-input,
.ui-selectMenu-box { background-color: @container_background_color_1; color: @container_text_color_1; }
.control-bar .controls .icon > span,
.control-bar .search-filters-button,
.ui-selectMenu-box .icon .arrow { background-color: @pagination_background_color; border-left: 1px solid @container_inner_border_color; }
.options_menu li > a,
.select_menu_list li > a,
.smiley-menu li > a,
.ui-menu-context li > a
{ color: #8f8f8f; }
.options_menu li:hover > a,
.select_menu_list li:hover > a,
.smiley-menu li:hover > a,
.ui-menu-context li:hover > a,
.embed-menu li:hover > a
{ color: @container_text_color_1; background-image: none; background-color: @container_highlight_color; border-color: @container_inner_border_color; }
.options_menu, .select_menu_list, .smiley-menu, .ui-menu-context,
.options_menu ul, .select_menu_list ul, .smiley-menu ul, .ui-menu-context ul
{ background-color: @container_background_color_1; border-color: @container_outer_border_color }
.options_menu li, .select_menu_list li,
.smiley-menu li, .ui-menu-context li
{ background-image: none; }
.ui-selectMenu-box:hover > .icon > .arrow { background-color: @pagination_background_color; }


/*added from cave*/
.control-bar .ui-pagination-custom { padding: 5px 5px 3px 10px; }
.ui-pagination-custom { display: inline-block; overflow: hidden; }
.ui-pagination-custom li { cursor: pointer; list-style: none; float: left; margin-right: 2px; }
.ui-pagination-custom li:last-child { margin-right: 0px; }
.ui-pagination-custom li > a, .ui-pagination-custom li > div { .rounded-corners(3px); font-weight: bold; text-decoration: none; background-color: @pagination_background_color; border: 1px solid darken(@container_inner_border_color, 20%); color: @pagination_text_color; display: inline-block; padding: 4px 5px;  }
.ui-pagination-custom li > a:hover, .ui-pagination-custom li > div:hover { border-style: solid; text-decoration: none; background-color: @pagination_hover_color; color: @pagination_text_color; border-color: mix(@pagination_text_color, @pagination_background_color, 70%); }

div.controls > a.button:hover {background-color: @container_highlight_color;}

[Chris]

The dropdown arrows on the selectMenus are traditionally given a background color and then switched to a background image upon hover:
#f2f2f2 ==> default.png

• Normal

  .ui-selectMenu-box .arrow {
   background: #f2f2f2;
   border-left: 1px solid #d2d2d2;
}

  
  

• Hover

  
.ui-selectMenu-box.ui-active .arrow, .ui-selectMenu-box:hover .arrow {
   background: #aeddf7 url('//storage.proboards.com/forum/images/gradients/default.png') 0 50% repeat-x;
   border-left: 1px solid #5693be;
}
  

I don't have any insight to the forum and theme you are looking at, and it is more than likely not the same, given that it appears to be a dark theme that likely comes with its own darker background images and color scheme.

The buttons traditionally have a similar setup but start with a base image and then move to a highlight image:
light.png ==> top-light-40-trans.png

• Normal

  .button, a.button, input[type="submit"], input[type="button"], button {
   background-color: #dadada;
   background-image: url('http://images.proboards.com/v5/gradients/light.png');
   background-repeat: repeat-x;
   background-position: center center;
   border: 1px solid #a7a7a7;
   border-radius: 5px;
}

  
  

• Hover

  
.button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover {
   background: #e7e7e7 url('http://images.proboards.com/v5/gradients/top-light-40-trans.png') center repeat-x;
   border: 1px solid #a7a7a7;
}
  

Switch to the button highlight method if you want the dropdown arrow to behave like the buttons.

Again, I do not have the specifics of that forum and theme, so a staff member would likely have to determine the images in play and then make the modifications for you.

---

The only CSS properties honored on those spinners can be viewed by enabling Shadow root in your browser inspector and then viewing the user agent properties that have been applied (these would be the only ones that would have any effect when overridden, provided they have no important qualifiers thus allowing them to be overridden). What webkit allows may be different than what gecko allows and so on and that might also depend on the operating system (what can be changed on win is not the same as can be changed on mac).

[BeaniCraft]

[Scott]
[Chris]

So I did a bit of digging in the CSS, and figured out that the code that you posted Chris , along with taking out and moving some stuff related to the dropdown arrows seemed to fix it!

Here's the CSS:
.ui-selectMenu-box .icon .arrow { background-color: @pagination_background_color; border-left: 1px solid @container_inner_border_color; }
.ui-selectMenu-box .arrow {
  background: #f2f2f2;
  border-left: 1px solid #000000;
}
.ui-selectMenu-box.ui-active .arrow, .ui-selectMenu-box:hover .arrow {
  background: #545454 url('none') center repeat-x;;
  border-left: 1px solid #000000;
}

Thanks for all of the help from both of you, Scott and Chris!

Edit: Not a necessary thing, but is it possible to change the text box portion of those spinner widgets to match the text boxes? (Text boxes, and CSS shown below.).user-search-input {background-color: #3c3c3c; color:#8f8f8f; border:0px;}