Quickly target HTML without side effects using CSS classes starting with es_ like:
es_portal, es_list_row, es_item_desc, etc.
Vueocity's HTML includes a rich mix of these EasyStyle classes for application states, responsive sizing, selecting structural elements, certain pages, specific content items, etc.
For a few tweaks, use Add CSS and HTML. Or create a new look with Modify themes style, color, and font options. If we are missing an EasyStyle class that would make your life easier, just let us know!
Global Classes
Prefix any CSS selectors with the following classes to target:
.es_user_authorized / anonymous The user is logged in / out
.es_width_small / medium / large / xlarge Updates with screen width.
.es_height_small / medium / large Updates with screen height.
.es_horizontal / .es_vertical Updates with responsive flex layouts.
.es_portal / .es_page Content portal vs. non-portal pages like login, etc.
.es_user_staff / customer The user has staff vs. customer privileges
.es_page_staff / customer Staff vs. customer facing page
.es_slug_wxyz Target elements only on specific non-portal pages by url
Content Classes
Target classes of content or specific content items with:
.es_locked / .es_available Does the user have a current license for the item.
.es_started / .es_completed Progress for completable items.
.es_accessed Progress for items that are not completable.
.es_coming_soon Items marked as 'coming soon'.
.es_id_12345 A unique, stable tag for each individual content item.
.es_code_xyz The catalog code entered for one or more item(s)
.es_content_xyz The type of content the element represents.
.es_action_xyz The access action for the item (view, download, new tab).
.es_workflow_xyz The workflow of the item (e.g., highlight beta items).
Theme Classes
Behavior-driven classes (like conditional highlighting) and other global classes used to customize theme behavior are prefixed with es_theme:
.es_theme_default The default color, font, layout state for an element.
.es_theme_highlight The add highlighting (usually due to hover/focus/touch)
.es_theme_active A selected item (like current tab).
.es_theme_overlay Areas shown above other elements (usually over background images).
.es_theme_panel Elements that wrap content display (usually used to adjust spacing).
Internal Platform Classes
You may notice CSS classes starting with mp_ like:
mp_flex mp_staff_control
These are Vueocity's Mesa Platform classes used for internal Javascript behavior and styling. Targeting these classes may cause side effects; use an EasyStyle class if possible.
All Vueocity CSS classes are prefixed with es or mp to avoid collision with your names.
Comments
0 comments
Article is closed for comments.