Tag Archives: css

How to get the components with your custom CSS code

Hello there,

Today, let me show you a quick way to get the components in the HTML and use it in your CSS custom code.

The easiest way is to use Google Chrome, right click on the component and use INSPECT.

Once you are inspecting the component, try to find code where the component begins.To do it, mouse over the DIVs and check where it highlights in the document. Find the first node and keep going down until you find the first DIV with a “k” property.

When you find it, copy its value and you can refer to this component using a CSS code like this:

div[k=W6B9C3207D3764C09A234024F4CEFF5B0] {
display: none !important;
}

Now you can format this element using the a CSS code within your HTML Container.

I hope it helps.

God bless you!

Conditional Formatting for all components

Hello there,

Everybody knows that we can’t add a conditional formatting for grids/graphs or panel stacks, for example.

I’ve found a way to do it!

The solution is pretty simple. Add an HTML container, insert your CSS to customize the components and then you use a conditional formatting in the HTML Container to hide it based on a specific condition.

What it does is, if the HTML Container is visible, it applies the CSS, if not, it doesn’t.

Hope it helps.

God bless you!

Hiding menu options in a document

Hello there,

Have you ever wanted to hide a specific item from the document menu so the users won’t be able to use a specific feature? Some of the options can be removed at a user level, but what if you want to remove for a specific dashboard?

To do that, we can use a custom CSS code. In our example we will be removing the Export option. Let’s go!

  1. Open the document in web and add a HTML container to your document;
  2. Click on on the HTML container -> properties and formatting -> select HTML TEXT from the general menu;
  3. Double click on the HTML container and type this code:

<style type=”text/css”> .mstrmojo-Popup.mstrShortcutsListPopup .export, .mstrmojo-Popup.mstrShortcutsListPopup .zoom{display:none !important;}</style>

Voilà! The export button is no longer there.

If you want to remove other buttons, you just need to add the classes for the button inside of the <style> </style> tags and make sure to use the display:none !important.

To get the classes for the other buttons, you just need to use Chrome, for example, and inspect the button to get the classes.

Please, let you know if you need help inspecting elements.

God bless you!

Creating a Preview of your Links Using HTML Container

Hello there!

Today I’m going to talk about a cool features that works on Web using Interactive modeCss tooltip on links!

To do that you have to:

1. Create a screenshot of your dashboard/report and make the image small as possible.

Tips to take a screenshot:

If you use Windowsyou can use snippingtool: Open start menu -> Execute -> type: snippingtool
If you use Mac OS, you can use Grab: Command + space -> type: grab

2. Save this image inside images folder of your Microstrategy Web and name it as imagetooltip.png, for example:

For ISS the default folder is: C:\Program Files (x86)\MicroStrategy\Web Aspx\images
For J2EE the default folder is: webapps(of your java container)\MicroStrategy\images

3. Create a new Document in Web;

4. Create an HTML Container:

Click Insert -> Html Container

pic2

5. Paste this code below in your HTML Container (just double click on the HTML Container to edit it):

<style type="text/css">
a.tooltip {outline:none; }
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none;} 
a.tooltip span {
 z-index:10;display:none; padding:14px 20px;
 margin-top:-30px; margin-left:28px;
 width:300px; line-height:16px;
}
a.tooltip:hover span{
 display:inline; position:absolute; color:#111;
 border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

a.tooltip span
{
 border-radius:4px;
 box-shadow: 5px 5px 8px #CCC;
}
</style>
<a href="#" class="tooltip">
 Dashboard A
 <span>
 <img  src="./images/imagetooltip.png" class="callout" />
 </span>
</a>

6. Execute your Document using Interactive Mode, mouse hover the link and you will see something like this:

pic3

If you want to change the name of the link, just change the  “Dashboard A” to another text in:

<a href="#" class="tooltip">
 Dashboard A
 <span>
 <img class="callout" src="./images/imagetooltip.png" />
 
 </span>
</a>

You can:

A. Customize the CSS;

B. Use an Image to substitute the text link;

C. Insert more links. To do that just replicate this extract of code below and change the Dashboard Name and the src=”” of the img tag with another image URL:

<br />
<a href="#" class="tooltip">
 Dashboard Name
 <span>
 <img class="callout" src="./images/imagetooltip.png" />
 
 </span>
</a>

That’s it!
If you need help with the customization or how to create more links, just post a comment below.

Hope it helps!
God bless you!