How do I change the colors of all of these?

[BeaniCraft]

---

(Note: I did find this thread about the "Select", "Actions", and all of the other dropdown menus, but it did this with the colors when hovering over it:)

(For reference, I want it to be a solid color, like hovering over a button.)

---

Any help would be appreciated!

[Scott]

BeaniCraft -

These items you'll need to make changes to the Style Sheet.

Go to Admin > Themes > Advanced Styles & CSS, Style Sheet tab.
Scroll to the very bottom and on a new line add this:

div#colorPicker-container {
   background: #ffffff;
   color: #ffffff;
}
input.short {
   background-color: #ffffff;
   color: #ffffff;
}
.smiley-menu, .embed-menu {background-color:#ffffff;}
.user-search-input {background-color: #ffffff;}


Replace the #ffffff with the color of your choice for each.

This is not everything, but let's start here.

[BeaniCraft]

Sorry for the late reply Scott , but this is a very good start already!
I do have a few things to ask though,

---

1. How can I change the text color?
2. How can I change the border color to black?
3. And how can I change the favorite color box to not be transparent? (Plugin link)

[Scott]

BeaniCraft -

Not sure which text color you're referring to, but put in these changes and we'll see what's left to do:

Go to Admin > Themes > Advanced Styles & CSS, Style Sheet tab.

Scroll to the very bottom and on a new line add this:
.smiley-menu>li>a {color: #ffffff;}Change #ffffff to the color of your choice.


Now find where you added
.smiley-menu, .embed-menu {background-color:#ffffff;}And replace it with:
.smiley-menu, .embed-menu {background-color:#ffffff; border-color:#ffffff}Again, change #fffff to the desired color.


Next find this at the bottom:
div#colorPicker-container {

  background: #212121;

  color: #ffffff;

}And replace it with this:
div#colorPicker-container {

  background: #212121;

  color: #ffffff;
  border-color: black;

}

The Color Palette plugin does not have any classes assigned that I can see to target.

[BeaniCraft]

So Scott, that fixed the smiley, color, and embed menus! (I just disabled that favorite color plugin for now.)
But I found some more stuff that needs changed in the bbcode dropdowns.

---

1. How can I change both of these highlight colors? (For the color bbcode menu, I want a solid color)
2. And how can I change both the text color, and this inner border color?

I know that I'm asking a lot all at once already, but I think that this stuff should be changed as well.

[Scott]

BeaniCraft -

For the color picker close button, add this to the bottom of your Style Sheet:

div#colorPicker-close:hover {
   background: #ffffff;
}Change #ffffff to your desired color.


For the Insert User Link box change this (on Line 1610):
.user-search-input {background-color: #3c3c3c;}To this:
.user-search-input {background-color: #3c3c3c; color:#ffffff; border:0px;}

[BeaniCraft]

Okay, so all of the bbcode buttons are done now Scott!
Now all that's left to change are the 2 (other) things in the 1st post up at the top.

[Scott]

BeaniCraft -

I think this is what you are looking for. Add this code to the bottom of your Style Sheet:

.ui-selectMenu-box {
   color: #8f8f8f;
   background-color: #212121;
}

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

[BeaniCraft]

So things weren't working the way I thought, so I just decided to make a diagram not really a "diagram", I... what do I even call this...?

---

---

I'm so sorry about dragging this along for so long Scott , I thought that this would be simple...

[Scott]

BeaniCraft -

Sorry for the delay, I believe I have it all how you want. I add the code directly to your CSS. Please review and let me know.

[BeaniCraft]

[Scott ]

Okay, so that fixed a good majority of the problems, but some things are still a bit broken, as shown below.

---

---

(These dropdown buttons are my nemesis now)

[Scott]

BeaniCraft - got you closer to your goal. (Have a look.)

The arrows are eluding me at the moment, so looks like someone with more skill in this area may need to jump in moving forward.

[BeaniCraft]

[Scott]

Sept 18, 2024 11:45:07 GMT -8 Scott said:

BeaniCraft - got you closer to your goal. (Have a look.)

The arrows are eluding me at the moment, so looks like someone with more skill in this area may need to jump in moving forward.

Do you know of anyone that I could ask about it? I haven't been here long enough to know anybody who I could ask.

(Also, that fixed the embed menu!)

[Scott]

Just be a little patient BeaniCraft and someone should chime in. The boards in this category (Forum Customization) are peer help boards.

[Chris]

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.