CSS in ImpressPages

When adding CSS to your theme or plugin, try to follow these guidelines:

camelCase classes,
scope plugin's classes,
avoiding global scope.

In theme you can also use LESS CSS which will be automatically compiled to CSS by ImpressPages.

Adding CSS in your theme

All CSS of the theme should go to the folder /heme/MyTheme/assets. Use <?php ipAddCss('assets/filename.css'); ?> function in your theme's layout file to add CSS you need. Make sure you add this function above ipHead function. Otherwise your CSS won't be added.

Adding CSS in your plugin

All plugin's CSS files should go to /Plugin/MyPlugin/assets directory. If you want your plugin's CSS to be added to every page, catch ipBeforeController event and use ipAddCss function. Eg. create file /Plugin/MyPlugin/Event.php with following content.

Make sure your plugin is activated.

<?php

namespace Plugin\MyPlugin;

class Event
{
    public static function ipBeforeController()
    {
        ipAddCss('assets/myPlugin.css');
    }
}

CSS class names

In ImpressPages, CSS classes use camelCase. This means that the first character goes in a lowercase; then each logical part (e.g., a word) starts with an uppercase, e.g. ipPluginHelloWorld.

Widget, skin and block CSS class names are prefixed with ipWidget-, ipSkin- and ipBlock- keywords respectively. For example, ipWidget-Text.

Class scoping

To avoid any CSS conflicts we recommend to add special class to the root node of plugin's content. If your plugin is called "MyPlugin", add class "ipPluginMyPlugin". If you do so, all inner elements may have very short class names, like _text, _button, etc.

<div class="ipPluginMyPlugin"> //plugin's HTML   
    <span class="_text">
    <a class="_button">...</a>
    ...
</div>

Use following CSS sytnax to target plugin's classes:

.ipPluginMyPlugin ._text { ... }

The same applies to widgets. You just don't need to care about the scoping as we do scoping for you. You can use short underscored class names inside your widget straight away.

.ipWidget-Text ._text { ... }

Mandatory global classes

There are a few global CSS classes included with default ImpressPages widget styles. They are needed to make your widgets appear properly. Widget styles are defined in ipContent.css file. If for some reason you have excluded this file, you have to add these global classes to your theme manually as described here.

Blocks

Each block has a default CSS class ipBlock and a block name. ImpressPages uses id instead of a class because there should be only one block with unique name on the page. Element id should be unique both for HTML and for ImpressPages.

Block id is structured in the same way as CSS classes. For example, ipBlock-main, where ipBlock- is a static part and main is the code name of the block. For sample block styling, see the HTML code below.

<div class="ipBlock" id="ipBlock-main">

#ipBlock-main {
   ...
}

Widgets

Each widget automatically gets 4 classes:

ipWidget - default classes for every widget.
ipWidget-WidgetName - defines the type of the widget. "ipWidget-" is a static part and "WidgetName" is unique name of the widget.
ipSkin-default - defines the skin (layout) of the widget. "ipSkin-" is a static part and "default" is the name of the skin.

<div class="ipWidget ipWidget-Text ipSkin-default">
   ...
   <span class="_text">
   ...
</div>

Javascript identificators

Classes with ips prefix are not used for styling. These classes are used when addressing HTML selectors from JavaScript code.