Modifying CLM UI beyond the styles embedded in the custom stylesheet

Version 4
    Share:|

    After doing the localization in CLM (see https://communities.bmc.com/docs/DOC-37141) because the French language is not necessarily as concise as English is, I realized that some areas of the CLM UI needed a bit of trimming as they don't auto-scale. This is true especially in the Catalog portion of the UI.

     

    In the following example, I'm showing how to:

    • Changing the width of Catalog tiles,
    • Changing the width of Service Offering titles on Catalog tiles,
    • Changing the width of the left-hand column (base configuration item names) on Catalog tiles.

     

    The following screenshot illustrates what I'm talking about:

     

    Additional CLM Styles.jpg

    This can simply be achieved by adding the following paragraphs to the styles.css file in the custom folder:

     

    /* The width of catalog tiles */
    .catalog_offering {
        width: 400px;
    }
    
    /* The width of the Service Offering title on catalog tiles */
    .catalog_offering-title {
        max-width: 380px;
    }
    
    /* The width of the Service Offering base configuration item names (left column) on  catalog tiles */
    .catalog_offering-media .col-md-4 {
        width: 150px;
    }
    
    
    
    
    

     

    In addition, there are potentially many more configuration items that can be added by

    1. Adding more sectors (check out other styles sectors available using for instance the "Inspector" view in FireFox)
    2. Adding extra declarations to existing sectors - in that case a CSS tutorial will help you. This for instance allows to center the logo on the login page, like in the following example, where the display, margin-left and margin-right declarations have been added to the .login-form__logo-bmc sector :

     

    /* The company logo on the login page */
    .login-form__logo-bmc {
        width: 54px;
        height: 55px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-image: url('../img/macif-logo.png');
        background-repeat: no-repeat;
    }
    
    
    
    

     

    ... And here's an example of what I mean:

     

    login.png