Layout CSS code
In Advanced Views, every Layout can have its own CSS. When present, the CSS is automatically injected into the page's <head> section. This ensures styles are available before the content is rendered, improving the user experience and reducing the First Contentful Paint (FCP).
Before the CSS is added to the page, Advanced Views automatically performs basic minification, so there's no need for additional optimization tools or build steps.
On-Demand CSS loading
Advanced Views uses an on-demand asset loading strategy. This means a Layout's CSS is only loaded on pages where that Layout is actually used. Advanced Views handles this automatically behind the scenes.
This approach completely eliminates the need for asset bundling, allowing you to create independent Layouts that editors can mix and match in any combination, without having tons of site-wide CSS.
1. Adding custom CSS to any Layout
Create a new Layout or open an existing one
On the Layout edit screen, switch to the CSS & JS tab.
Insert or paste your CSS styles in the CSS Code field.
Click on the Update button to publish your changes.
Finding classes in the Default Template
Once your Layout has been published/updated, the Default template will be generated automatically and can be seen in the Template tab.
See the class="" attribute of the template for each field. E.g. class="avf-layout__name-link".
Then define the style in the CSS Code field on the CSS & JS tab.
Example:
2. Magic CSS aliases
Scoping CSS to a specific component is a common task. Although every Layout has a unique ID-based class in the generated markup, adding it to every selector is repetitive and error-prone.
Advanced Views solves this with CSS aliases. Use them anywhere in a Layout's CSS, and they will be automatically replaced with the appropriate selector:
#layout
.avf-layout--id--X
.bem-name
#this__
.avf-layout__
.bem-name__
#layout__
.avf-layout--id--X .avf-layout__
.bem-name .bem-name__
In Practice
Display fields and their labels on one line using:
Using a selector inside another selector is a built-in CSS feature called nesting.
3. CSS libraries usage
3.1) Enqueuing a custom library
To add complex interactive elements, like sliders, you'll need to use some libraries, which come with their own CSS files. If you use Advanced Views Pro, read about the Pre-built libraries to get a hassle-free experience.
If you use Advanced Views Lite, or need to employ a specific library that is missing from the built-in list, you need to enqueue it on the target page.
The classic enqueuing in WordPress happens with the wp_enqueue_style function, but to avoid sitewide enqueueing (which is bad for performance), it requires manual detection of the target pages.
That's why we recommend using the CSS @import feature instead:
Just add the import to the top of your Layout CSS code, and the browser will load this library on pages that require it. Don't worry if you have several components or multiple instances of the same component on a single page. According to the standard, the browser will download the library only once.
We recommend bypassing the domain name and starting the path from the /wp-content folder. This ensures that the import works dynamically across Staging and Live environments.
3.2) Sass usage
In Advanced Views, there is a File System Storage option. If you enable it, you can utilize Sass for Layouts CSS code - check advanced FS storage usage for details.
3.2) Tailwind usage
In Advanced Views, there is a File System Storage option. If you enable it, you can utilize Tailwind for Layouts CSS code - check advanced FS storage usage for details.
Last updated