eagleEye eagleEye - 1 year ago 139
CSS Question

Getting current Quill Editor's toolbar background color

I'm implementing a primeNg/quill editor, and as part of the UX design I need to display a container in the screen with the same color background as the editor's toolbar. I'm looking at the snow.css file but can't seem to find it, any quill experts know where I can find this on snow.css or any other dependent css of Quill? Thank you!

enter image description here

Answer Source

The toolbar background color in the PrimeNG Quill demo is part of the PrimeNG theme and not part of Quill's snow.css.

You can use the developer toolbar in Firefox and Chrome to see the CSS rules:

.ui-widget-header {
    border: 1px solid #d9d9d9;
    color: #1b1d1f;
    background: #f6f7f9 0 0 repeat-x;
    background: -moz-linear-gradient(top, #f6f7f9 0%, #ebedf0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f7f9), color-stop(100%,#ebedf0));
    background: -webkit-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
    background: -o-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
    background: -ms-linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
    background: linear-gradient(top, #f6f7f9 0%,#ebedf0 100%);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download