CODEWITHSUNDEEP
cssprimengquill
joeCarpenter
joeCarpenter

Reputation: 1535

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

Upvotes: 1

Views: 3022

Answers (2)

rachit3dev
rachit3dev

Reputation: 81

Just put inside a div with background color, and for editing area color use Style backround color property. below code for bootstrap and angular

    <div class="bg-light">
      <quill-editor [styles]="{height: '500px', backgroundColor: 'white'}">
      </quill-editor>
    </div>

Upvotes: 0

Ben Browitt
Ben Browitt

Reputation: 1882

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%);
}

Upvotes: 2

Related Questions