Styling Dat.GUI (Layer Example)

Questions
1

Hey all,

I am trying to research how to style a Dat.GUI toggle menu, particularly the one in the layers menu:
https://threejs.org/examples/webgl_layers.html

I can’t find much documentation about Dat.GUI styling. I want to use PNG images in place of the toggle buttons, checkbox toggles and drop down tab. is there a known method to do this?

2

Hi!
dat.GUI is a separated control library and, IMHO, it’s out of the scope of this forum, but…
As any control, it contains many html-elements that you can style with css.

Using element inspector, you can see what style applied to what element:
GUI_checkbox_css

Originally, style for checkboxes is:

.dg .c input[type="checkbox"] {
    margin-top: 9px;
}

I’ve simply added some lines right in the inspector and got those red corners on checkboxes.

Maybe this reply will give you some ideas with styling of that control.

3

Thank you for the info.

I apologize for posting out of scope. Delete if needed.

4

No need to delete it :slight_smile:

5

Hey Prisoner,

I know this is out of scope, but I have been working on this all day. I can do most of the styling, but there are some elements which will not style. It will work in the browser, but when I add the CSS to my index file the change does not take effect. Do you know why this might be?

For example:
.dg.main .close-button {
background-color: #0000;
}

It works in the Chrome inspector, but when I add it to my index and run it, nothing changes.

6

Would be cool to provide a live code example :slight_smile:

All three options work as expected:

  .dg.main .close-button {
    /*background-color: magenta;*/
    /*background-color: #f0f;*/
    background-color: rgb(255, 0, 255);
  }

Shouldn’t it be #000 (three zeros instead of four)?