How to change the generated HTML in the Atomia User Panel.
Overview
The Atomia User Panel HTML is rendered via ASP.NET MVC views written in the Web Forms syntax. Each page has its own .aspx view file and is often made up of multiple included .ascx partial view files.
At the top of the render hierarchy sits the main layout file Site.Master which contains a number of shared partial views. It also defines what placeholder sections are available for each page view to render.
View Sections
There are a number of ContentPlaceHolder sections defined in the Site.Master file:
- TitleContent
- StylesContentPlaceHolder
- MetersPlaceHolder
- SideBarContentPlaceHolder
- MainContentPlaceHolder
- ScriptContentPlaceHolder
TitleContent
The content of the <title> tag in <head>.
StylesContentPlaceHolder
Contains the _Fonts and _Styles partial views.
MetersPlaceHolder
Contains the markup for the slide down meters.
SideBarContentPlaceHolder
Empty. You should use this placeholder in your view to add sidebar content.
MainContentPlaceHolder
Empty. You should use this placeholder in your view to add the main content of the page.
ScriptContentPlaceHolder
Empty. You should use this placeholder in your view to add any JavaScript. It is important that scripts are placed within this placeholder for loading and performance reasons.
Partial Views
There are many partial views both shared and on the individual page view level. For a complete picture of what is available and current, please check the Site.Master file in NewDefault and each individual .aspx file.
The following are the most commonly useful partial views for customization:
- Shared/_Fonts.ascx
- Shared/_Styles.ascx
- Shared/_CustomScripts.ascx
- <section>/_<ViewName>ScriptsCustom.ascx
These serve mainly as extension points for style sheets and scripting. See Custom Branding and UI Design and Custom JavaScript.
Most other views, both shared and per page, serve as natural divisions of markup into more easily handled components. E.g. the Shared/_Notifications.ascx partial contains the markup for all global notifications, and in any view where tabs are used, the content of each tab is usually placed in its own partial view.
Overriding a View from the Parent Theme
Every custom theme has the concept of a parent theme, by default the Atomia NewDefault theme. This means that any view or partial view not found in the custom theme will be rendered by the fallback view in the parent theme instead.
Conversely, you can change any view or partial view in the Atomia User Panel by copying it over to your own custom theme and making the changes you want.
Example
Let’s assume you would like to change how the markup for the dashboard Quick Guide is rendered.
You start by locating where the Quick Guide markup is rendered by checking NewDefault/Views/Dashboard/Dashboard/Index.aspx and see there that it seems to come from the partial view NewDefault/Views/QuickGuide/QuickGuide.ascx. This partial is in turn split into partials for each tab of the Quick Guide.
Depending on what you want to accomplish, you could either decide to override the whole QuickGuide.ascx and rewrite the markup from scratch, or if you would like to keep the tabbed interface, you could override any of the partial views for the tabs that you want to change.