Hide

YetaWF Documentation

Display
Print

Styling A Module

There are two options to style any module within YetaWF. If you created your own skin you can do so directly in the CSS files that are part of your skin. Or if you're using a predefined skin, you can make customizations using the Custom.css or Custom.scss files as described in CSS Addons.

Changing the styling of a module is easily done as each module has its unique CSS class added to the module's <div> tag. The unique CSS class is composed of the area name of the package that implements the module, followed by the module name (without the ending "Module" suffix).

CSS Class

area_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 area name followed by an underscore and the module name "Text".

<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.

Example

.YetaWF_Feed_Feed .t_news { .... }

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

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

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_".

Example Styling The Feed Module

/* NEWS FEED */
/* NEWS FEED */
/* NEWS FEED */

.YetaWF_Feed_Feed {
    .t_news {
        border:1px solid silver;
        padding:1em 1ch 1em 1ch;
        border-radius: 8px 8px;
        .t_header {
            padding-bottom:1em;
            .t_title {
                font-size: $base-fontsize + 4;
            }
        }
        .t_headerentry {
            border:1px solid silver;
            padding:1em 1ch 1em 1ch;
            margin-bottom:.5em;
            border-radius: 8px 8px;
            .t_title, .t_text {
                padding-bottom:.5em;
            }
            .t_date {
                font-size: $base-fontsize - 2;
            }
        }
        .t_entry {
            padding-top:.2em;
            padding-bottom:.2em;
        }
    }
}