BPS - Editing CSS classes for web layouts

[Former Member]

Hi all,

Can anyone point out a clear way to work out which classes to edit in the CSS document in order to change the layouts in a web planning interface.

Specifically: I am trying to change the text size and column and row size for normal alv layouts displayed through the web planning interface.

Maybe you know where some clear help documentation exists for the editing of the CSS document?

Thanks,

Rael

[former_member93896 · Accepted solution]

Hello Rael,

you have to change the "font-size:" property in all styles starting with ".bpsLay".

However, to get a consistent design, I suggest to look for all font-size entries in the CSS and replace them accordingly.

Here's an easy process:

1) In the Web Interface Builder, Goto > MIME Objects

2) Click "Import CSS template"

3) Select "custom.css" > Edit, make changes, and save the file

4) On each "Page" component in the Web Interface, set "Additional CSS template" to "custom.css"

Regards,

Marc

SAP NetWeaver RIG, US BI

[Former Member · Accepted solution]

Hi Marc,

Thanks for the response, but nothing I do seems to change the font size in the layouts. (To clarify: I am using standard SAP gui layouts on the BPS0 side).

Is the following syntax correct for font size of 6pt:

font-size: 6pt;

I know to populate the "Additional CSS file" field with my CSS template, but should I be using the "Style Class" field for anything....like for entering my newly changed style class? Or should I leave this blank?

Thanks Marc.

Rael

[former_member93896 · Accepted solution]

Rael,

this should work. Please check the CSS file. You have to delete the lines with comments. Otherwise anything between /* and */ is not taken into consideration.

Regards,

Marc

SAP NetWeaver RIG, US BI

[Former Member]

Rael,

I am trying to do exactly what you are doing and have exactly the same problem. Nothing I seem to change in the custom CSS file seems to change formatting of the plan input layout table. Have you found a solution?

thanks,

Hans

[Former Member]

Hi Hans,

Try the following:

Go to SE80 and under the repository browser put in BSP application "sem_upwb", then go to MIMES, styles, and bspnn6.css…

In the above css template you will find a section with the style for ".bpsLay2" (which is all in upper case). I found (after a lot of trial and error) that if I used the .bsplay2 styles in my web interface, it worked and I could change my font size etc.

So, copy all of the .bsplay2 styles in bspnn6.css into your custom css in your web interface, the try making the changes you need and see if that works.

Regards,

Rael

[Former Member]

Thanks Rael,

That worked great! - I've been trying to crack this for 2 days solid.

I have been able to change the font, color etc of the input fields for key figure values on a plan layout by changing class .bpsLay2Edf on the css you gave me. The only property that does not seem to have an effect when I change it is text-align.

Any ideas?

Cheers, Hans.

[Former Member]

Hi Hans,

Glad it worked.

Sorry, but I never tried to look at text-align.

If I get a chance I will take a look. But we are pretty hectic at the moment so don't wait....

Bye,

Rael

[Former Member]

Hi,

it's only an idea, but maybe it'll help:

se80 -> Mime Repository -> Public -> BC -> UR -> Design2002 -> Themes

there are the layout sets, I think. Maybe you can copy one and change only the css files.

Regards,

Barbara

[olaf_fischer]

Hi,

which release you are using? Unified rendering is only used in BW3.5, in releases before there is on own style sheet provided.

Regards, Olaf

[Former Member]

Hi Olaf,

We are only on BW3.0 and SEM3.1b

But can you point out which classes to edit (maybe an example would be good) in order to change the font size in a standard input/output layout...?

And could you please explain how the "additional CSS file" and then the "style class" options in the web interface builder work together? Once I create an additional CSS file, do I always need to specifiy a style class? And should it be specified at the page leve, or at the container/group level in the web interface builder...?

Thanks for your help,

Rael

[olaf_fischer]

Dear Rael,

when using the additional CSS-File it will overload the standard definitions but the style class used for an element is not changed. When adding a style class directly at the component, this will replace the class name.

Please note, that the style class option will no be availble in BW3.5 when creating new layouts as the unified rendering is used.

To get the list of class name you can download the web page and open it with a style editor.

Regards, Olaf