Login
Home CMS Documentation Home Cartella Developing Cartella Customizing Look and Feel of Cartella Developing Cascading Stylesheets

Developing Cascading Stylesheets

By default, the primary Cartella stylesheet, style.css, can be found in [SITE_ROOT]\Content. By editing this file, you can change the look and feel of your Cartella instance. This file references the graphics that are loaded in served pages and handles other aspects of Cartella presentation.

Note
All email styling is handled in the XSLT files, not in CSS.

CSS by Example

  • For instance, you could modify the .igxLogo selector to change the logo that displays in the upper-left corner of Cartella.

    #IgxHeader .IgxLogo {
position: absolute; 
/*top: 27px; left: 0; width: 165px; height: 42px; margin: 0; 
background: url(../images/img/logo.png) no-repeat; text-indent: -10000px;*/
top: 0px; left: 0; width: 300px; height: 100px; margin: 0; 
background: url(../images/img/new_logo.png) no-repeat; text-indent: -10000px;
}

    Logo After CSS Change

  • By editing the :hover pseudo-class, you could change the color of footer links when a user points to them. 

    /*a hover {color: #000;}*/
a hover {
    color: #FF1493;}

    Hover After CSS Change

Note
If you modify or replace image files, it’s a good idea to put the modified files in the Custom directory (e.g., Custom\Images). When you do so, you’ll need to ensure that all image references in the site’s CSS files point to the correct folder.

The specific changes you make to style.css depend on individual site needs. For additional help with Cartella's CSS, contact Ingeniux Support.