Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
Changing the color of CSS components
-
What is the way to set the toolbar color, for example the Material toolbar? There is no CSS class from what I can see.
<div class="toolbar toolbar--material"> <div class="toolbar__center toolbar--material__center"> Title </div> </div>
And if I need to edit the stylesheet, do I edit the
www/style.css
directly? I am confused because this StackOverflow question mentions about a source stylus file that needs to be compiled into the real .css. But I searched through the splitter project template and can’t find any.styl
file. :confused:
-
@wetfeet Here is all the CSS for Onsen 2. Just change whatever you need and put it in your index file as regular CSS. This is all from a working project.
.tab-bar { font-family: 'Dosis', Helvetica, Arial, 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 17px; display: table; table-layout: fixed; position: absolute; bottom: 0px; left: 0px; right: 0px; white-space: nowrap; margin: 0; padding: 0; height: 49px; background-color: #222; border-top: 1px solid rgba(0,0,0,0); width: 100%; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .tab-bar { border-top: none; -webkit-background-size: 100% 1px; background-size: 100% 1px; background-repeat: no-repeat; background-position: top; background-image: -webkit-linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%); background-image: -moz-linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%); background-image: -o-linear-gradient(270deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%); background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%); } } .tab-bar__item { font-family: 'Dosis', Helvetica, Arial, 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 17px; position: relative; overflow: hidden; display: table-cell; width: auto; -webkit-border-radius: 0; border-radius: 0; } .tab-bar__item > input { position: absolute; overflow: hidden; right: 0px; top: 0px; left: 0px; bottom: 0px; padding: 0; border: 0; opacity: 0.001; z-index: 1; vertical-align: top; outline: none; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; } .tab-bar__button { position: relative; display: inline-block; vertical-align: top; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 17px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; line-height: normal; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-decoration: none; padding: 0; height: 49px; letter-spacing: 0; color: #999; text-shadow: 0 1px none; vertical-align: top; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; border-top: none; width: 100%; font-weight: 400; line-height: 49px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .tab-bar__button { border-top: none; } } .tab-bar__icon { font-size: 24px; padding: 0; margin: 0; line-height: 32px; display: block; height: 32px; } .tab-bar__label { font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; font-size: 17px; } .tab-bar__icon + .tab-bar__label { font-size: 10px; line-height: 1; margin: 0; font-weight: 400; } .tab-bar__label:first-child { font-size: 16px; line-height: 49px; margin: 0; padding: 0; } .tab-bar__button { color: #fff; } :checked + .tab-bar__button { color: #009B90; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; border-top: none; } :checked + .tab-bar__button > .tab-bar__icon { color: #7abfff; } .tab-bar__button:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .tab-bar__button:focus { z-index: 1; border-top: none; -webkit-box-shadow: none; box-shadow: none; outline: 0; } .tab-bar__content { position: absolute; top: 0; left: 0; right: 0; bottom: 49px; z-index: 0; } .tab-bar--top { position: relative; top: 0px; left: 0px; right: 0px; bottom: auto; border-top: none; border-bottom: 1px solid rgba(0,0,0,0); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .tab-bar--top { border-bottom: none; -webkit-background-size: 100% 1px; background-size: 100% 1px; background-repeat: no-repeat; background-position: bottom; background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%); background-image: -moz-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%); background-image: -o-linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%); background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0) 50%, transparent 50%); } } .tab-bar--top__content { top: 49px; left: 0; right: 0; bottom: 0; z-index: 0; } .tab-bar--top-border__button { background-color: transparent; border-bottom: 4px solid transparent; } :checked + .tab-bar--top-border__button { background-color: transparent; border-bottom: 4px solid #7abfff; }