Main Content

Magnolia Community Forums: Get help with Magnolia: Magnolia Apps custom style

  • Steve
    Full name: Steven Frederiks
    Posts: 3
    Last post: May 5, 2014 12:21:25 PM
    Registered on: Sep 9, 2013
    Magnolia Apps custom style
    #1 by Steve on May 5, 2014 12:21:25 PM

    Hi all,

    I'm currently working on the development of a magnolia app based on the sample app.

    Currently I want to chance the theme of the app. So I can use my own css file. the documentation says the following

    Using custom styles in your Magnolia app

    You can already use custom styles in your Magnolia app by adding a theme property to your app descriptor, see App themes above.

    However, in some cases you need to load the styles without starting the app, for example when loading a custom dialog or a custom message view. In that case, once your Sass theme is ready and it includes the admincentral mixin and your custom styles, tell Magnolia to use the theme by editing your webapp's file and set the key magnolia.ui.vaadin.theme.

    The expected value is a theme name as Vaadin expects it, that is the name of the theme folder under src/main/resources/VAADIN/themes.

    But in my properties file the magnolia.ui.vaadin.theme is already set with the value admincentral. So I cann't change it to my one directory. Do I need to include the admincentral or something else?

  • mgeljic
    Full name: Mikaël Geljić
    Posts: 71
    Last post: Nov 10, 2017 11:28:08 AM
    Re: Magnolia Apps custom style
    #2 by mgeljic on May 5, 2014 1:30:32 PM

    Hi Steve,

    This documentation page is actually documenting two approaches with different purposes, now I realize section titles aren't quite clear and this may cause confusion, sorry about that!

    1. The first approach is simply about adding custom styles to your magnolia app, and should fit your case just fine. The important part in the doc is the configuration snippet and the following paragraph:

    The system will look for a Vaadin theme stylesheet that should be in src/main/resources/VAADIN/themes/orange/styles.css (or .scss). The style sheet should use the same pattern as Vaadin theme. You can also use SASS. Magnolia will inject this stylesheet into the document's head when the app is started, using Vaadin's CSSInject addon. It will also add a CSS class name to the app container div element, such as app-orange.

    2. The second approach on the other hand is more about customizing the Magnolia admincentral, and is done at webapp level, hence the Indeed here the property defaults to 'admincentral', but one could change it to a new Vaadin theme that would absolutely have to include our 'admincentral' Sass mixin, and add some customization there. This option is also documented as a workaround for certain use cases where approach 1 is not enough (basically custom styles when the app is not started), but is not perfect either. In particular it does not fit cases where you want to make an app or module shippable, because users would have to edit their manually anyway.

    As a quick status, we are more looking into reducing the limitations of option #1, but as far as I see you should be pretty much covered with it as is.



  • kaptara-sk
    Full name: Stefan Kuhr
    Posts: 2
    Last post: Nov 23, 2017 8:54:10 AM
    Registered on: Dec 17, 2015
    Re: Magnolia Apps custom style
    #3 by kaptara-sk on Nov 23, 2017 8:54:10 AM

    is this approach still valid? With Magnolia 5.5.5 my custom stylesheet is not injected in the header any longer. It worked with Magnolia 5.3 if I remember correctly.


You don't have the permission to post on this thread

Sign in

To login on this forum, you can use your Magnolia Forge, Support or Partner account, or, below, your Google, Yahoo! or OpenID account. If you have trouble logging in, or any other sort of issue, please let us know in the Meta forum, on the user-list, or simply by email at forum-admin at magnolia-cms dot com.

* Required

... or sign in with:

  • icon http://{your-openid-url}
  • icon
  • icon