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.
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.
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.
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
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
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
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
is working on a reply...