Cognos Analytics with Watson

 View Only
Expand all | Collapse all

Changing the size of the tiles in 11.2

  • 1.  Changing the size of the tiles in 11.2

    Posted Wed August 10, 2022 06:59 AM
    How can we make the tiles smaller than the standard out of the box sizes?

    ------------------------------
    Vic Nicholls
    ------------------------------


  • 2.  RE: Changing the size of the tiles in 11.2

    IBM Champion
    Posted Thu August 11, 2022 05:20 AM
      |   view attached
    You'll need to make an extension for this, but you can use this extension to modify whatever other styles you need at the same time. The extension will be your custom styles, so let's call it that.

    Start by making a new folder, call it myStyles, and add a new text document called spec.json with following:

    {
      "name": "myStyles",
      "schemaVersion": "1.0",
      "extensions": [
        {
          "features": [{"id":"myStyles",
            "cssStyles": ["v1/ext/myStyles/styles.css"]
          }],
          "perspective": "common"
        }
        
      ]
    }​

    In the same folder make a new text document called styles.css with the following

    .ba-tile{
      height:160px !important; 
      border-radius: 25px;
      box-shadow: 5px 10px 8px #888888;
      width: 95%;
    }
    
    

    At the moment the folder only needs those two items, but you can obviously add as many additional items (images, css, css libraries) as you need.

    Zip up the folder, and upload it as an extension to Cognos:

    Reload the page and gasp in astonishment as it suddenly looks a million times better:



    I've attached the extension so you can use that as a base.



    ------------------------------
    Paul Mendelson
    ------------------------------

    Attachment(s)

    zip
    myStyles.zip   691 B 1 version


  • 3.  RE: Changing the size of the tiles in 11.2

    Posted Thu August 11, 2022 05:42 AM
    Thank you so much! I will give this a try.

    ------------------------------
    Vic Nicholls
    ------------------------------



  • 4.  RE: Changing the size of the tiles in 11.2

    Posted Thu August 11, 2022 05:47 AM
    Edited by Vic Nicholls Thu August 11, 2022 05:48 AM
    Ok a few questions. I understand the height change, but the border radius is the actual length or is the width that? The box shadow just makes it look a bit better.

    Also why is it just .ba-tile? Everything else has the longer names. 

    Thanks, 

    ------------------------------
    Vic Nicholls
    ------------------------------



  • 5.  RE: Changing the size of the tiles in 11.2

    IBM Champion
    Posted Thu August 11, 2022 08:52 AM
    Think of border-radius as a quarter of a circle. At 0px each corner would be a left angle. At 90px each corner would be completely curved. If you have a square element on the page, border radius 90 would make it a circle (90*4=360).

    I just picked ba-tile as it was a convenient class that matched all of the tiles on the screen.

    ------------------------------
    Paul Mendelson
    ------------------------------



  • 6.  RE: Changing the size of the tiles in 11.2

    Posted Thu August 11, 2022 06:25 AM
    @Paul Mendelson  One problem - this changes the tiles on the tab, not the quick launch tiles. Is there a way to make those smaller? ​

    ------------------------------
    Vic Nicholls
    ------------------------------



  • 7.  RE: Changing the size of the tiles in 11.2

    IBM Champion
    Posted Thu August 11, 2022 08:47 AM
    Sure, I wasn't sure which tiles you wanted. 

    Best way to do this is to use the browser developer toolbar to get the class names in the elements you need to modify.

    For the quick launch tiles setting the height won't actually work. One of the divs has a ridiculous margin-top making it take a lot of room:



    What you could do in the styles.css just set:
    .ca-home-quickLaunchTile_title {
        margin-top: 10px !important;
    }​



    ------------------------------
    Paul Mendelson
    ------------------------------



  • 8.  RE: Changing the size of the tiles in 11.2

    Posted Fri August 12, 2022 06:20 AM
    Thank you so much for that explanation!!

    ------------------------------
    Vic Nicholls
    ------------------------------



  • 9.  RE: Changing the size of the tiles in 11.2

    Posted Mon August 15, 2022 05:35 AM
    Ok I tried this and it doesn't work. I was finally able to get to see what you had for a screen shot because I thought I might need to look at something else. I don't see a lot I could change.

    ------------------------------
    Vic Nicholls
    ------------------------------



  • 10.  RE: Changing the size of the tiles in 11.2

    IBM Champion
    Posted Mon August 15, 2022 06:02 AM
    You should be able to change any of the styles using this technique. Are you adding the !important rule? Without it any conflicting styles that are applied later or closer to the element may override it.  





  • 11.  RE: Changing the size of the tiles in 11.2

    Posted Mon August 15, 2022 06:14 AM
    Yes, I did it exactly as you indicated. Does this mean I need to change other styles also? I'm sorry I thought I had to change only one.

    ------------------------------
    Vic Nicholls
    ------------------------------



  • 12.  RE: Changing the size of the tiles in 11.2

    IBM Champion
    Posted Mon August 15, 2022 11:29 AM
    Yeah, you can experiment with different styles from inside the dev tools.

    Try this:

    .ca-home-quickLaunchTile .ca-home-quickLaunchTile_title {
      margin-top: 0px !important;
    }
    
    .ca-home-quickLaunchTile.bx--tile--clickable{
      padding:5px !important;
    }
    
    
    .ca-home-quickLaunchTile .ca-home-quickLaunchTile_description {
        min-height: inherit !important;
        line-height: inherit !important;
        margin-top: inherit !important;
        color: #959595;
    }​





    ------------------------------
    Paul Mendelson
    ------------------------------



  • 13.  RE: Changing the size of the tiles in 11.2

    Posted Mon August 15, 2022 12:12 PM
    I went thru and I understand this. Thanks. 

    One question - on margin-right, how can that be worked where you have a lot of "white space" to the side? I looked and the indication is that margin-right moves the end bar over. Does a minus sign move it in? If so, is margin-right written separately or in that below:

    .ca-home-quickLaunchTile .ca-home-quickLaunchTile_description {
        min-height: inherit !important;
        line-height: inherit !important;
        margin-top: inherit !important;
        color: #959595;
    }​


    ------------------------------
    Vic Nicholls
    ------------------------------



  • 14.  RE: Changing the size of the tiles in 11.2

    IBM Champion
    Posted Tue August 16, 2022 02:04 AM
    Edited by Ralf Roeber Tue August 16, 2022 02:04 AM
    Just in case you want to add something to any perspective, not just the Welcome page ... there is a special perspective called "common", which is loaded in Welcome, Editor, Dashboard - anywhere and anytime .

    this is the content of spec.json

    {
    "name":"AMVARACommonCss",
    "schemaVersion": "1.0",
    "extensions": [
    {
    "perspective": "common",
    "comment": "There is a special meta perspective called COMMON. Adding contributions to this perspective will cause the extension to be applied to All perspectives.",
    "features": [{
    "id": "ibm.common.menu.AMVARACommonCss",
    "cssStyles": [
    "v1/ext/AMVARACommonCss/css/AMVARACommonCss.css"
    ]
    }]
    }]
    }

    BR
    Ralf


    ------------------------------
    Ralf Roeber
    https://linkedin.com/in/ralf-roeber/
    ------------------------------



  • 15.  RE: Changing the size of the tiles in 11.2

    IBM Champion
    Posted Tue August 16, 2022 07:38 AM
    There are a ton of possible ways to adding space between items in a layout like this, but it's not too difficult to figure out how it's being done.



    In this case the padding is being set by both the "bx--col-md-4" and "bx--col-lg-4" classes, with lg overwriting md. The rem unit maintains relation to the font size of the page. If you want to leave a small gap between the gaps, while still having them stretch across the page try adding:
    .bx--col-md-4.bx--col-lg-4 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    If you don't want the items to stretch across the entire screen you can change this css:


    the flex shorthand there is telling that each element should take 25% of the available width, with the max-width saying not to take any more than 25%. This maintains synchronicity when the divs loop to the next row if the screen it too small. If you add another element to quickLaunch, you'll want to reduce both to 20%. 


    ------------------------------
    Paul Mendelson
    ------------------------------



  • 16.  RE: Changing the size of the tiles in 11.2

    Posted Tue August 16, 2022 01:08 PM
    Hi - thanks to everyone. 

    I'm looking to shrink the box itself. I did go thru what you said, and here are some of my questions.

    When I had mouse'd over the items in the developers' tools, I have the bx--row at flex 688x570. That's the box that all the quick launch tiles are in. 
    I have bx--col-md-4 bx--col-lg4 (to me they look the same and I find that confusing). I dont know how you figured out that the lg is overwriting the md. I see them as one class, and I guess they arent? Mousing over that area in the code shows the tile and to the left and right of the tile, a green area. Nothing on top.
    When I mouse over the bx--tile bx--tile--clickable ca-home-quickLaunchTile, I see all sides colored in, not just the sides but the tops also. 

    So if I want to make the tile to have less space on the right inside of the box, which one would I change? Looking at what you wrote, is it the lg one? If so, does the green part shrink or does the blue part shrink? 

    I couldn't do a screenshot showing the tiles being highlighted with the colors. 

    Vic 





    ------------------------------
    Vic Nicholls
    ------------------------------