Hide

YetaWF Documentation

Display
Print

CSS Classes

YetaWF uses numerous CSS classes and follows a strict naming convention to prevent collisions between different modules.

Naming Conventions

Global Classes

CSS classes with the prefix "y" are global. Skins and modules should never define a CSS class with a leading "y".

CSS ClassTypical UseDescription
y_act_button<div>A module action rendered as a button.
y_act_buttonicon<div>A module action rendered as a button with an icon.
y_act_icon<div>A module action rendered as an icon.
y_act_imgA module action that has an image but no text.
y_act_link<div>A module action rendered as a link (<a>).
y_act_normlink<div>A module action rendered as a link (<a>).
y_act_normmenu<div>A module action rendered as a menu.
y_act_textA module action that has text but no image.
y_act_textimgA module action that has both text and an image.
y_cleardiv<div>Clears any floating boxes.
yaction-link<a>Automatically added to every Module Action. This is required for links between pages in a Single Page Application.
yActionIcons<a>Used for module action icons within a grid.
yAnchor<div>Added to anchor elements to identify them as anchor elements. This is used when modules define an anchor id (ModuleDefinition.AnchorId) and added to the generated <div>.
yAnonymous<body>Added to <body> tag indicating that the page is rendered for an nonymous user.
yASPNET4<body>Added to <body> tag indicating that the YetaWF instance uses ASP.NET 4 (with MVC 5) - This is no longer used.
yASPNETCore<body>Added to <body> tag indicating that the YetaWF instance uses .NET 6.0 (with MVC)
yCondense<div>, <body>This class indicates that a smaller device is used to render a page or that the available space is limited. This can be used to render a more compact view. This class is added/removed as a window is resized or made part of a popup <div> if the available width is less than the skin's defined minimum width to support popups (see Skin Definition).
yDisplayMode<body>Added to <body> tag indicating that the page is shown in Site View Mode.
yDivAdminContent using this CSS class is only visible to Administrators.
yDivAlert<div>Adds a highlight to an area to show error text, typically used with module errors.
yDivSmallAdminContent using this CSS class is only visible to Administrators, using less space than areas marked with yDivAdmin.
yDivSmallAlert<div>Adds a highlight to an area to show error text, typically used with module errors, using less space than areas marked with yDivAlert.
yDivSmallWarning<div>Adds a highlight to an area to show warning text, using less space than areas marked with yDivWarning.
yDivWarning<div>Adds a highlight to an area to show warning text.
yEditMode<body>Added to <body> tag indicating that the page is shown in Site Edit Mode.
yform-ajax<form>Added to indicate that the form is submitted via Ajax (which is every form in YetaWF).
yform-cancel<input>Typically used to identify the Cancel button so it does not submit the form.
yform-nosubmit<input>, <select>, etc.Added to form fields so the field is not submitted. That data is ignored.
yform-nosubmitcontents<div>Added to <div>s so all contained form fields are not submitted. That data is ignored.
yform-partial<div>Added to the partial form portion of a form.
yform-warningicon<div>Used for form validation and is added to the warning icon for field errors.
yGeneratedPane<div>Used on a pane that contains all modules that were rendered for a page whose modules couldn't be rendered in defined panes.
ymodrole_noAnon<body>Added to a module's <div> tag indicating that anonymous users do not have sufficient authorization to view the module. This is used to highlight the module when viewed by an Administrator or authorized user.
ymodrole_noUser<body>Added to a module's <div> tag indicating that authenticated users do not have sufficient authorization to view the module. This is used to highlight the module when viewed by an Administrator or authorized user.
ymodrole_noUserAnon<body>Added to a module's <div> tag indicating that anonymous and authenticated users do not have sufficient authorization to view the module. This is used to highlight the module when viewed by an Administrator or authorized user.
yModule<div>Added to the main <div> of every module, identifying it as a module.
yModuleTitle<div>Added around the module's <h1> title tag and the title module actions. If no module actions are available, the yModuleTitle <div> is not created.
yModule-current<div>Added in edit mode to the module where the mouse cursor is located, typically used to highlight the module.
yModuleLinks<div>Added to the <div> with the module action links, contained within <div> using the yModuleLinksContainer class.
yModuleLinksContainer<div>Added to the <div> containing the module action links.
yModuleMenu<div>Added to every module edit menu (Module Settings).
yModuleMenuContainer<div>Added to the <div> containing the module edit menu (Module Settings).
yModuleMenuEditIcon<div>Added to the icon for the module edit menu (Module Settings).
yMVC5<body>Added to <body> tag indicating that the YetaWF instance uses MVC 5 (with ASP.NET 4) - This is no longer used.
yMVC6<body>Added to <body> tag indicating that the YetaWF instance uses MVC 6 (with .NET 6.0)
yNoPrintContent using this CSS class is not printed
yPage<body>Added to <body> tag indicating that the page is rendered as a main page.
yPageMenuModule <div>Added to the <div> of the page's main menu.
ypagerole_noAnon<body>Added to <body> tag indicating that anonymous users do not have sufficient authorization to view the page. This is used to highlight the page when viewed by an Administrator or authorized user.
ypagerole_noUser<body>Added to <body> tag indicating that authenticated users do not have sufficient authorization to view the page. This is used to highlight the page when viewed by an Administrator or authorized user.
ypagerole_noUserAnon<body>Added to <body> tag indicating that anonymous and authenticated users do not have sufficient authorization to view the page. This is used to highlight the page when viewed by an Administrator or authorized user.
yPane<div>Every pane within a page has this css class. Panes contain 0 or more modules.
yPaneTag<div>Added in edit mode containing the pane name, so it can be displayed as part of the page skin.
yPopup<body>Added to <body> tag indicating that the page is rendered for a popup window. This is only used for popups that render pages in an <iframe>.
yPopupDyn<body>Added to <div> tag of a popup window indicating that the page contents are rendered for a popup window. This is only used for popups that render pages in a <div>.
ypopup-link<a>Added to <a> links so they invoke a popup window instead of opening the Url. Must be combined with yaction-link.
yPrintOnlyContent using this CSS class is only visible when printed
yTrack<a>Added to <a> tag to track clicks in Visitors log.
yUnified<div>Used on panes that have content from multiple pages (Single Page Application).
yUser<body>Added to <body> tag indicating that the page is rendered for an authenticated user.
yValidateImmediately<form>Added to <form> tag if all input fields are validated immediately when the form is shown (as opposed to lazy validation).

Module Class

Every module that is injected into a page receives a CSS class that is derived from the package and module name.

company_product_module

In addition, a CSS class derived from just the package name is also added to the module.

company_product

company is substituted by the company name of the package owner. product is substituted by the product name (of the package). module is substituted by the module name (without trailing "Module").

For example the Text module is implemented by the YetaWF Text package, so its CSS class would be "YetaWF_Text_Text", where YetaWF_Text is the company/product name followed by an underscore and the module name "Text". In addition the CSS class "YetaWF_Text" is also added to the module.

Local Classes

CSS classes with the prefix "t_" are intended for use within modules/components only and indicate a CSS class local to a module or component. Only modules or components should use "t_" CSS classes.

<div>s and other tags within any module or component use CSS classes with the "t_" prefix. These CSS classes may collide with CSS classes elsewhere. Therefor a t_xxxx CSS class must always be specified with the module or component CSS class.

Component Classes

CSS classes with the prefix "yt_" are used by components (combined with their area name and component name). Skins and modules should never define a CSS class with a leading "yt_".

<div>s and other tags within any module or component use CSS classes with the "t_" prefix. These CSS classes may collide with CSS classes elsewhere. Therefor a t_xxxx CSS class must always be specified with the module or component CSS class.

Skin Classes

Skins may define their own classes as long as they don't collide with the naming conventions above. These CSS classes are considered global for the skin.

As only one skin can be active in a page, no conflicts are possible between different skins.