Modules.css

In order to clearly understand the structure of the modules.css file, you should know that all elements of each module belong to the following categories:

• Category – style of a category block
• Item – style of list items
• Comment – style of comments block
• Search – style of search block
• Form – style of form block.
• Information – style of information block.
• Pager – style of paging block.
• Statuses – style of information messages.
• Main – other, when element is at the template background.

The modules describe their entities design using the classes which contain the words Category, Item, and Comment, selecting the semantically closest classes. Thus, for example, the Blog module uses the Category classes to represent categories, the Item classes for posts, and the Comment classes for comments to posts. In the eShop module products are described with the Item classes. The same classes are used to describe lines in the cart and on the Checkout page, while they are actually products.

Thus, when you change, for example, the Item classes, you modify a series of module design elements at the same time. To simplify the process of debugging, for each template the Previewing Templates tool was developed. This tool allows you to quickly review the applied changes.

When you change, for example, the background color for mod-item-body Item class, remember to make sure that all the interface elements - simple text, links, buttons - are at least visible against the new background.

There are also classes, whick have to be defined in the very beginning of the modules.css. These are such classes as .mod-item-body a, which define the the links displaying rules in the mod-item-body block. They have to appear prior to a.mod-item-body-a-strong declaration, due to the specificity of css classes processing by browsers. The simplest way is to define them right in the beginning of the document. All such classes will be marked with a special note.

The elements can have one of the following characteristics: normal, alternative, or strong. These characteristics enable you to visually mark the elements on the page.