OBIEE 12c Custom.css doesn't work for me

deniska

I'm using this tutorial

https://gianniceresa.com/2016/12/obiee-12c-custom-style-ear-file/

I created shared folder, Extracted Archive with Alta style inside, edited filemap.xml, deployed this in Weblogic and restarted OBIPS.

I could change oracle_logo

but my changes in  c:\Oracle\analyticsRes\res\s_DATAlysis\master\custom.css

@import "master.css";@import "facustom.css";

.HeaderBrandingCell {display:none !important;

}

.HeaderLogo {display:none !important;

}

td.HeaderQuickSearchPrompt {color: b0bec5 !important;

}

.HeaderBrandName {color: b0bec5 !important;

}

.HeaderTopBar {background-color: #34495e !important;

}

doesnt work. I dont see any difference

Gianni Ceresa

Did you check if you aren't having any cache or similar issues?

It definitely worked for me and keeps working even in 12.2.1.4

Make sure the CSS is properly read and check with your browser developer extension if the styles are there and disabled (because overridden by something else).

What exact version of OBIEE are you using?

deniska

1. Ive tried 3 different browsers

2. OBIEE ver 12.2.1.4

Following picture in dev console after restaritng OBIPS(nothing changes)

When I add styles to dev console code(following) two elements(logo and text) disappears

deniska

I tried to change custom.css code to

td.HeaderBrandingCell {display:none !important;

}

td.HeaderLogo {display:none !important;

}

to hide these elements but with no success

Gianni Ceresa

I'm not following ...

So you want  a custom style to hide the logo and product name on the top of the page?

deniska

Not only that.

I want custom style to change the properties of different element including that

But nothing works

Gianni Ceresa

So you will have to debug things step by step ...

You already have the logo coming, so that part seem to be fine, now move on to the CSS part and start looking if it makes it till into your page and if the cascading isn't making your code ignored at some point etc.

As a side aspect: any particular reason to pick the EAR over the shared folder approach?

deniska

I dont think that helps.

Ive found one thing:

In dev console we can see "HeaderLogo" and "HeaderBrandingCell" classes. There there are no such classes in master.css file but

from the DOC "The custom.css file is an empty (or blank) file that is imported by the master.css file. You can use the custom.css file to add your own CSS classes (for example, to apply styles to analyses) and OVERRIDE CLASSES in the master.css file without changing the master.css file"

Оverride classes in the master.css file. But there are no such classes...So we can't?

Gianni Ceresa

This comes from OAC 105.3.0 :

If those 2 classes are there in OAC and were there in 12.2.1.0 and .2.0 and .3.0 they are there as well in .4.0.

Therefore they can be used.

The idea is to not touch master.css which is quite big but simply use custom.css to override things from master.css, because you generally only need to override few pieces while keeping most of it. But it can also be used to define any other style rule.

CSS doesn't require something to be defined in another to work. It isn't Java where you extend a class and override the original methods with new ones.

The piece of doc you posted says it: "to add your own CSS classes".

deniska

I see but I dont understand how to...for now...

One more example

master.css

"...

.masterBrandingAreaBrandName{color:green;font-size:13px;font-weight:bold;padding-left:4px;padding-right:30px;vertical-align:middle;}

"...

custom.css

"@import "master.css";@import "facustom.css";

.masterBrandingAreaBrandName{color:red !important;}"

The color of text in OBI is Green

Gianni Ceresa

Use your browser developer extension to analyse the styles applied to the text and where it comes from.

For example in Chrome:

For example this piece has some CSS rules which are strikeout, because they aren't applied as somewhere else they are overridden. In this case if I scroll up a bit I see which rule did the override and won.

So do this analysis to find out.

CSS is cascading all the time: it's a powerful thing and a very annoying one as sometime you end up with something else you didn't expect overriding your rule.