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
------------------------------
Original Message:
Sent: Tue August 16, 2022 07:38 AM
From: Paul Mendelson
Subject: Changing the size of the tiles in 11.2
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
Original Message:
Sent: Mon August 15, 2022 12:11 PM
From: Vic Nicholls
Subject: Changing the size of the tiles in 11.2
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
Original Message:
Sent: Mon August 15, 2022 11:28 AM
From: Paul Mendelson
Subject: Changing the size of the tiles in 11.2
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
Original Message:
Sent: Mon August 15, 2022 06:13 AM
From: Vic Nicholls
Subject: Changing the size of the tiles in 11.2
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
Original Message:
Sent: Mon August 15, 2022 06:01 AM
From: Paul Mendelson
Subject: Changing the size of the tiles in 11.2
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.
Original Message:
Sent: 8/15/2022 5:35:00 AM
From: Vic Nicholls
Subject: RE: Changing the size of the tiles in 11.2
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
Original Message:
Sent: Thu August 11, 2022 08:47 AM
From: Paul Mendelson
Subject: Changing the size of the tiles in 11.2
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
Original Message:
Sent: Thu August 11, 2022 06:24 AM
From: Vic Nicholls
Subject: Changing the size of the tiles in 11.2
@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
Original Message:
Sent: Thu August 11, 2022 05:20 AM
From: Paul Mendelson
Subject: Changing the size of the tiles in 11.2
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
Original Message:
Sent: Wed August 10, 2022 06:58 AM
From: Vic Nicholls
Subject: Changing the size of the tiles in 11.2
How can we make the tiles smaller than the standard out of the box sizes?
------------------------------
Vic Nicholls
------------------------------
#CognosAnalyticswithWatson