Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Pedro 1 post 71 karma points
    Jun 25, 2016 @ 12:01
    Pedro
    1

    Umbraco 7.4.3 Backoffice UI

    Hello community , I would like to ask your help about styling the Umbraco backoffice , we've added new section into umbraco , and now we are kind of stuck there with UI development.

    We would like to provide the exact look and feel like original umbraco , where can we find css documentation of original umbraco backoffice , and a way to proper structure our html , to get the original styled look and feel of Umbraco backoffice.

    Thanks.

  • Dennis Adolfi 1072 posts 6378 karma points MVP 2x c-trib
    Jun 25, 2016 @ 16:27
    Dennis Adolfi
    0

    Hi Pedro!

    If im not mistaken, the back office is built using Bootstrap, so you can use that as reference.

    Remember that if your section turns out great, you can package it and share it in the package section of this website, so that others may use it.

    Tack care! / Dennis

  • David Brendel 786 posts 2949 karma points c-trib
    Jun 25, 2016 @ 20:58
    David Brendel
    1

    Hi Pedro,

    the easiest way to get the right HTML structure and the CSS classes is by inspecting the backoffice in the Browser.

    As far as I know there is no documentation of HTML/CSS

    Regards David

  • Jan Skovgaard 11258 posts 23500 karma points MVP 7x admin c-trib
    Jun 26, 2016 @ 06:04
    Jan Skovgaard
    0

    Hi Pedro and welcome to the Umbraco developer forum :)

    Like the guys have said above there is no documentation / style guide available currently - I think it's something that is in the works though.

    However for what it might be worth there is documentation for the different kinds of directives and methods that can be used here https://our.umbraco.org/apidocs/ui/#/api - This is work in progress so not everthing is fully documented yet.

    But depending on what you're doing etc. you might get some of the functionality and styling out of the box by using the stuff from the documentation - Apart from that it's a matter of using the browsers inspector tool to learn about the HTML structure and the CSS classes (Like Dennis and David already mentioned), which are being used in the backoffice and then try to apply them in your own views to make your section look and feel like a native section - In my experience it's worth spending some time studying the HTML structure and the classes being used carefully since you then get a lot out of the box rather than you spend a lot of time doing your own custom styling.

    Hope this helps and have fun :)

    /Jan

  • Biagio Paruolo 1494 posts 1635 karma points c-trib
    Jun 26, 2016 @ 06:13
    Biagio Paruolo
    0

    Hi, Here are the assets and very small guide.

    https://github.com/umbraco/Umbraco-CMS/tree/dev-v7/src/Umbraco.Web.UI.Client/src https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Web.UI.Client/README.md

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies