Widget styling (CSS and LESS)

ImpressPages provides the default styling for all widgets in plane CSS and LESS formats. Use them to make your theme look gorgeous without additional effort.

Plain CSS

Use the code bellow to add default CSS file for widgets.

<?php
    ipAddCss('Ip/Internal/Core/assets/ipContent/ipContent.css');
    echo ipHead();
?>

You probably will need some styles for your theme layout. Add them to separate file in theme's assets directory:

<?php
    ipAddCss('Ip/Internal/Core/assets/ipContent/ipContent.css');
    ipAddCss('assets/theme.css');
    echo ipHead();
?>

Don't change the default Ip/Internal/Core/assets/ipContent/ipContent.css file, as this file will be overwritten during the update. Instead override required rules in your own theme.css file.

If you need to do many changes on ipContent.css or if you don't like overriding styles, you can copy the default ipContent.css to your theme directory and do modifications on it.

Please see the Quick Start theme, provided with the default ImpressPages install. This theme uses plain CSS.

LESS CSS

You can use advanced and flexible features of LESS CSS to style your websites. LESS gives you easy way to configure basic widgets styling. To start using it, put the following line inside your assets/theme.less file:

@import 'ipContent'; // import system ipContent.less file

Add any of following options below import statement to change the look of the content:

// Global Spaces
@ipSpaceGlobal: 20px; // used for layout: widgets, blocks, grid, etc.
@ipSpaceGroup: 10px; // used for grouped elements: buttons, forms, etc.
@ipSpaceText: 1em; // used for text elements like paragraph, mostly bottom margins
@ipSpaceElement: 1em; // used inside elements, mostly for padding

// Global Colors
@ipBackgroundColor: #fff;
@ipBackgroundColorInverted: #000; // use for focus, hover, etc.
@ipTextColor: #000;
@ipTextColorInverted: #fff;
@ipLinkColor: #019bd4;
@ipBorderColor: #747474;
@ipBorderColorActive: #000;
@ipErrorColor: #b80000;

// Global Fonts
@ipFontFamily: Arial, "Helvetica Neue", Helvetica, sans-serif;
@ipFontFamilyHeadlines: Georgia, Times, "Times New Roman", serif;
@ipFontFamilyAlternative: Georgia, Times, "Times New Roman", serif;

// Global Font sizes
@ipFontSize: 14px;
@ipFontSizeBig: 24px; // default h3 element, caption style
@ipFontSizeSmall: 12px; // form hints, errors. Other elements that have to be smaller than usual

// Global Elements
@ipCaptionColor: @ipTextColor;
@ipCaptionFontFamily: @ipFontFamilyAlternative;
@ipCaptionFontSize: @ipFontSizeBig;
@ipCaptionFontStyle: normal;
@ipCaptionFontWeight: normal;

@ipSignatureColor: @ipTextColor;
@ipSignatureFontFamily: @ipFontFamily;
@ipSignatureFontSize: @ipFontSize;
@ipSignatureFontStyle: italic;
@ipSignatureFontWeight: normal;

@ipNoteBackgroundColor: transparent;
@ipNoteBorderLeftColor: @ipBorderColor;
@ipNoteBorderLeftStyle: solid;
@ipNoteBorderLeftWidth: 2px;
@ipNoteColor: @ipTextColor;
@ipNoteFontFamily: @ipFontFamily;
@ipNoteFontSize: @ipFontSize;
@ipNoteFontStyle: italic;
@ipNoteFontWeight: normal;
@ipNoteMarginBottom: @ipSpaceText;
@ipNotePaddingLeft: @ipSpaceElement;

@ipButtonBgColor: @ipLinkColor;
@ipButtonBorderRadius: 5px;
@ipButtonColor: @ipTextColorInverted;
@ipButtonFontFamily: @ipFontFamily;
@ipButtonFontWeight: bold;
@ipButtonPaddingTop: (@ipSpaceElement / 2);
@ipButtonPaddingRight: @ipSpaceElement;
@ipButtonPaddingBottom: (@ipSpaceElement / 2);
@ipButtonPaddingLeft: @ipSpaceElement;
@ipButtonTextDecoration: none;

// Widgets
@ipLineHeight: 1.5;
@ipWidgetSpace: @ipSpaceGlobal;

// Titles
@ipH1FontSize: (@ipFontSizeBig * 1.5);
@ipH2FontSize: (@ipFontSizeBig * 1.25);
@ipH3FontSize: @ipFontSizeBig;

@ipH1Color: @ipTextColor;
@ipH2Color: @ipTextColor;
@ipH3Color: @ipTextColor;

@ipH1FontFamily: @ipFontFamilyHeadlines;
@ipH2FontFamily: @ipFontFamilyHeadlines;
@ipH3FontFamily: @ipFontFamilyHeadlines;

// Forms
@ipFormFieldSpace: (@ipSpaceGroup * 2);

@ipFormInputColor: #777;
@ipFormInputFocus: #000;
@ipFormInputFontSize: @ipFontSize;
@ipFormInputFontFamily: @ipFontFamily;
@ipFormInputBackground: @ipBackgroundColor;
@ipFormInputMaxWidth: 380px;
@ipFormInputBackgroundActive: @ipBackgroundColor;
@ipFormInputCorner: 3px;
@ipFormTextareaHeight: 10em;

@ipFormButtonBackground: @ipLinkColor;
@ipFormButtonCorner: 3px;
@ipFormButtonFontFamily: @ipFontFamily;
@ipFormButtonColor: @ipTextColorInverted;

// Gallery
@ipGalleryColumns: 4;
@ipGallerySpace: @ipSpaceGlobal;
@ipGalleryColumnsSmall: 2;
@ipGallerySpaceSmall: @ipSpaceGlobal;
@ipGalleryScreenSmall: 480px; // max-width in media query

ImpressPages will automatically compile LESS file into CSS file. Include it in your theme's layout:

<?php 
    ipAddCss('assets/theme.css');
    echo ipHead();
?>

If configuration options doesn't cover all your needs, add additional CSS lines at the end of the file.

You can see the exact LESS implementation in Ip/internal/Ip/assets/less/ipContent/ipWidget/ directory. Add corresponding files to your theme's assets/less/ipContent/ipWidget directory and these files will be used instead of originals.

For example, if you need to override Image Gallery widget styles, you need to add Theme/MyTheme/assets/less/ipContent/ipWidget/Gallery.less file.

Please refer to ImpressPages LESS manual for how LESS works in general.

Widget styling (CSS and LESS)

Plain CSS

LESS CSS

See also