3. Theme Roller css breaks my app UI

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.

Theme Roller css breaks my app UI

  • G

    Hello

    I used the Theme Roller because I needed to change the color of the Toolbar component on Android (would like it to be like on iOS).

    BEFORE

    import '../node_modules/onsenui/css/onsen-css-components.css';

    0_1492190134306_before-theme-roller.png

    Buttons and labels in ToolBar are vertically centered.
    SplitterSide content is correctly styled.

    AFTER

    import '../data/public/lib/onsen-css-components.min.css';

    0_1492190258099_after-theme-roller.png

    Ok the colours are now what we wanted, but everything else has gone wrong…!

    I simply replaced the import of:

    • node_modules/onsenui/css/onsen-css-components.css

    by the downloaded css:

    • data/public/lib/onsen-css-components.min.css

    What is the problem ?

    Here are the versions we are using:

    • onsenui: 2.2.1
    • react-onsenui: 1.2.0

    Any help would be very appreciated.

    Guillaume

    0 2 Replies
  • 侍

    @guirip220 An option may be to just force iOS style if that is what you want.

    0
  • Onsen UI

    @guirip220 It was mentioned in a recent blog post, the current Theme Roller won’t be updated to support Onsen UI 2.2.0+. We will probably release a new online tool like the Theme Roller but we also need to leave the old version there.

    As an alternative, have a look at node_modules/onsenui/css-components-src. You have the same functionality there :)

    0
  • G

    Pretty disappointing.
    Anyway, thanks for the answers.

    0