Style overrides
Overriding SCSS Variables
See the demo app's variables file for some examples.
Adding to Page Chrome elements
Using the set_html_attributes hook, you can add HTML attributes to certain page chrome elements.
Using the following hook in either a controller action or a view will add a class and data attribute to the main element:
set_html_attributes main: { class: 'bg-red', data: {test: true} }
Targetable elements
| Target | HTML tag | Description |
|---|---|---|
body | <body> | -- |
main | <main> | Parent to app navigation and app content |
header | <header id="pmacsHeader"> | Page Chrome header |
actions | <div id="pmacsHeader__actions"> | Wrapper for header action links |
article | <article id="content"> | Immediate parent of app's content |
page_header | <div class="page-header"> | Page header, within article |
aside_app | <div id="pmacsAppAside"> | Parent element of app navigation sidebar |
nav_app | <nav class="listed-navigation"> | App navigation root |
footer | <footer> | Page Chrome footer |