How to add Custom CSS file?

[Former Member]

Hi,

Currently i am working on Design Studio 1.1 SP1 in local mode (i.e. I am not connecting to an SAP BI 4.0 Platform). I want to add a custom CSS file to my application. Below are the steps which i have followed but it does not seem to work:

1. Created .CSS file named ABC.CSS. the content of this file is:

     .myPanel{ 

     background:indigo;

     }

2. I, then, placed it in the below folder.

      C:\Users\<my_windows_user_name>\Analysis-workspace\com.sap.ip.bi.zen\repository\DEMO_2

     DEMO_2 is the name of my application.

3. In design studio, I clicked on DEMO_2 in the outline and went to its property box where i wrote ABC.CSS in the Custom CSS option. I had to write this as i did not get any drop down menu.

4. I selected a Text Box in my application and  wrote myPanel in the CSS Class option in its property.

5. I executed the application locally.

But i am unable to see the background color in indigo for this text box. The color does not change. If i simply write background:indigo; in the CSS Style option of this text box then the color changes.

Can you please point out the missing step here? or where i am going wrong?

Regards,

Piyush

[Former Member · Accepted solution]

Hi Piyush,

for me it seems like you have to clear your browser cache or force the loading of files from the server and do not use the already available cached file, which hasn't got your latest css changes in it.

Try:

1. in IE open F12 developer tools (F12 key on your keyboard)
2. here click on the menu item "Cache" > and click on "Always refresh from server" (Note: you have to activate this every time you restart your browser; this setting helps to see the changes you make in the css file immediately in IE after you refresh the page)
3. now refresh your application in the browser (F5)
4. after you have done the first 3 steps, you can go to Design Studio and click in the top main menu on: "Application > Reload" - if you haven't yet seen the css change on your Text component before in Design Studio, now you should see the change in Design Studio too (background color indigo)

Best regards,

David

[Former Member · Accepted solution]

Hi David,

This is GOLD MINE 🙂 Thanks alot for you response. After following your steps, i am able to get the formatting according to the CSS file.

Regards,

Piyush

[Former Member · Accepted solution]

Hi Guys,

I have the same issue. Tried all the options.

@David: also "Cache" > and click on "Always refresh from server" does not work for me

Would appreciate any help.

Best Regards,

Sunil

[Former Member · Accepted solution]

Try publishing your report to the server once. That did the trick for me. Sounds silly but it worked.

[Former Member · Accepted solution]

Hi Sunil,

there is one more useful trick that can be used directly in Design Studio to refresh and see the css changes (instead of "Application > Reload"): CTRL+Right Click in the Editor Area of Design Studio where you drag & drop your components. A Menu opens. Select/click on "Refresh".

Screenshot:

What is the name of your css file?

Where is it placed? Is it in the same folder as your "content.biapp" file?

How do you reference your file in Design Studio in Application "Properties > Display > Custom CSS"?

Can you confirm please:

If your file is called "custom.css" and it is placed in the same folder as your "content.biapp" file and you are in local mode (not BI Platform, not NW), do you reference it as: custom.css ? (together with the file extension .css and not only as custom)

Also can you post what is inside your css file? Maybe you have a syntax error in your css file, you can check the validity here: http://jigsaw.w3.org/css-validator/#validate_by_input

Also if you are using custom css classes in your css file, make sure, that you use the custom classes in your components and without the "." dot at the beginning: if you have a css class .myClass {color: blue;} then use "myClass" instead of ".myClass" and without the quotes.

Regards

David

[Former Member · Accepted solution]

Hi David,

Thanks for the reply.

CTRL+Right Click also doesnt work...

-file is called "custom.css".

-placed in the same folder as "content.biapp"

-local mode execution

-reference in app as "custom.css" (without quotes) under "Properties > Display> Custom CSS "

-Class used "myText" (without quotes and dot) in text box component.

-Validation against CSS validator successful

CSS looks as follows:

.myText

{

background:indigo;

}

Thanks for the reply.

Regards,

Sunil

[Former Member · Accepted solution]

Hi Sunil,

interesting that "CTRL+Right Click" in Design Studio in the Design Window doesn't work for you! That is a general standard feature of Design Studio.

I run out of ideas. Maybe someone else has an idea.

What Browsers and their versions did you try/use?

I tried your css code and it works fine at my side.

Maybe this helps: When you open IE > Developer Tools (F12), there you can check whether your file is really attached and found by the browser and what is inside according to the browser:

If it is there, then clearing cache in your Browser and reloading the page should work. If it doesn't, I have no idea.

Regards

David

[TammyPowlas · Accepted solution]

Sunil,

Please create a new discussion for this, and if possible please include a screen shot.

Thank you

[Former Member · Accepted solution]

Hi David,

Problem solved finally

Issue was that even after renaming the .txt file to .css file, it was considered as a text file.

Thanks,

Sunil

[Former Member]

Please make sure that your application is pointing to your custom css class. Notice the top level of your application.

... and then on the right side of your screen, in the properties menu.

You can either click on this and choose the 'Pencil' icon to edit it OR pick your own custom css stylesheet from your repo folder.

Goodluck!

Jeffrey

[Former Member]

Hello,

Where can I find the root folder when I am connected to the SAP Business Objects BI Platform(

I am not working on local mode)?

Note: I do not see a folder for the application I have created

C:\Users\xyz\Analysis-workspace\com.sap.ip.bi.zen\repository

I can only see the folder ___TMP___

Thanks

Mohammed

[Former Member]

Hi Piyush,

the steps you have followed seem correct.

Try re-naming (or at least referencing) your CSS file to ABC.css instead of ABC.CSS

Best regards,

Victor

[Former Member]

Hi Piyush,

Keep the Custom CSS in the same folder where your application copy is kept.

Also are you using IE9?

//Adlin

[Former Member]

Hi Adlin,

I have kept the CSS file in the same folder. And yes i am using IE9.

Regards,

Piyush

[Former Member]

Hi Piyush,

Try this

     .myPanel{

     background-color: indigo;

     }

[Former Member]

Hi Piyush,

After creating CSS file ,you have to mentioned that file Name in Custom CSS (simple write the name)which you had done .

And then you have to select the Panel component then give the CSS class name as "myPanel".

Lastly I want to say that why you use "myPanel" class in Text,if your color in Panel changes it will refelect by default  in Text(if your panel contain Text) , after that if you want to change Text Background color it can be done by using CSS Style .

If you need any reference plz follow below document :

http://scn.sap.com/docs/DOC-41398

Hope this help you !!

Thanks,

Tulika

[Former Member]

Hi Tulika,

I selected Panel Component  and tried the same thing, but it doesnt seem to work. And the requirement which i have given here is simply to check how CSS works, with which i am having tough time 😞

I guess, i need to change something in my configuration. Still investigating.

Regards,

Piyush

[Former Member]

Hi Piyush,

Just follow below steps and let me know if there is any issues :-

1) write the  below code in your CSS File :

.sapzencrosstab-DataCellAlternating{

background-color:#CCFFCC !important;

}

.sapzencrosstab-DataCellDefault{

background-color: #EAF2D3;

}

2) Go to crosstab and give CSS class name as "sapzencrosstab"

3) Reload application

4) Execute

5) It will give below result  which i have done by using above step :

Let me know if you need any further information.

Thanks,

Tulika

[Former Member]

Hi Tulika,

no need to do step 2)

If you delete this "sapzencrosstab" from your Crosstab "Display > CSS Class" property, it will still work - the background color of the data cells will be still changed as shown in your image.

The SAP css class "sapzencrosstab" doesn't exist per default, unless you create it in your custom css file. All the css classes for the crosstab from SAP start with this prefix "sapzencrosstab" but then the name continues, for example "sapzencrosstab-DataCellAlternating" is the full and valid name of one crosstab css class.

All you did in step 1) was, that you defined new properties for existing sap css classes which per default always exist and are always applied to all crosstabs. No need to create and use a custom css class for crosstabs in the "Display > CSS Class" property, if all your crosstabs should look the same. Just use the existing sap css classes in you custom css file.

It is helpful to introduce a new css class if you want to target only chosen crosstabs (not all) or if you want to have different designs in 1 css file.

Regards

David

[Former Member]

Thanks David for your Information

Regards,

Tulika

[Former Member]

Hi Piyush,

Did you check out the tutorial and followed all the steps (navigating to the repository folder and placing it accordingly)?

http://scn.sap.com/docs/DOC-41398

Kind regards,

Sjoerd

[Former Member]

Hi,

Yes, i have followed the steps in the tutorial but still no luck.

Regards,

Piyush