Styling buttons about simple-keyboard HOT 5 CLOSED

On Fri, Jun 29, 2018 at 8:27 PM, Francisco Hodge ***@***.***> wrote: Hello @capndave <https://github.com/capndave>, Following up on my previous message, I've released a new option called "buttonTheme". You would pass it as such: buttonTheme: [ { class: "hg-red", buttons: "Q W E R T Y q w e r t y" }, { class: "hg-highlight", buttons: "Q q" } ] Then add the corresponding css: .hg-button.hg-standardBtn.hg-red { background: rgb(255, 0, 0, 0.8); color: white; } .hg-button.hg-standardBtn.hg-highlight { box-shadow: 0px 0px 40px 5px rgba(255, 255, 0, 0.5); z-index: 1; } And the output would look like this: [image: image] <https://user-images.githubusercontent.com/25509135/42120063-dcbdb206-7be2-11e8-900f-4264a2acde76.png> [image: Edit simple-keyboard customization demo - npm] <https://codesandbox.io/s/vj8jvz2q4l> I'll get the readme updated shortly :) Regards, Francisco Hodge — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AObnZRLZPN7NvmYvEA3Q5n02lgkemdu_ks5uBtQdgaJpZM4U9lRk> .

Awesome, thanks! I was dreading making a custom keyboard so your library is very useful. Did you just release it? *David Thompson * Master of Public Affairs Data and Visualization Consultant On Fri, Jun 29, 2018 at 8:27 PM, Francisco Hodge ***@***.*** > wrote: > Hello @capndave <https://github.com/capndave>, > > Following up on my previous message, I've released a new option called > "buttonTheme". > > You would pass it as such: > > buttonTheme: [ > { > class: "hg-red", > buttons: "Q W E R T Y q w e r t y" > }, > { > class: "hg-highlight", > buttons: "Q q" > } > ] > > Then add the corresponding css: > > .hg-button.hg-standardBtn.hg-red { > background: rgb(255, 0, 0, 0.8); color: white; > } > > .hg-button.hg-standardBtn.hg-highlight { > box-shadow: 0px 0px 40px 5px rgba(255, 255, 0, 0.5); z-index: 1; > } > > And the output would look like this: > [image: image] > <https://user-images.githubusercontent.com/25509135/42120063-dcbdb206- 7be2-11e8-900f-4264a2acde76.png> > > [image: Edit simple-keyboard customization demo - npm] > <https://codesandbox.io/s/vj8jvz2q4l> > > I'll get the readme updated shortly :) > > Regards, > Francisco Hodge > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#1# issuecomment-401508258>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/ AObnZRLZPN7NvmYvEA3Q5n02lgkemdu_ks5uBtQdgaJpZM4U9lRk> > . > — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYU9D9vIaw3_OPDnScZzXK9MHaPfhkPFks5uB5yDgaJpZM4U9lRk> .