| Changing color of Report Column Header [message #522981] |
Thu, 15 September 2011 00:48  |
BBMamun
Messages: 94
Registered: February 2010
Location: Dhaka, Bangladesh
|
Member |
|
|
Hi I like to share one of my Apex Experiences today. My Executive Director (ED) asked me change color of Report column Header. I had no Idea what to do. But eventually I managed to do that.
Database : Oracle 10g R2 EE.
Http Server : Oracle 10g Companion CD.
and virtual drive of HTTP Server /i/ = d:\orahttp.
In the report Page I have seen following in the page source
<link rel="stylesheet" href="/i/themes/theme_12/theme_3_1.css" type="text/css" />
Then I located the css file. and went to the area
/******************** R E P O R T S ********************/
and made changes as follows
th.t12header a {
/***color: #FFFFFF;***/
color: black;
font-size: 10px;
}
Then save the CSS file and run the report. All the reports displays as the change made in the CSS file. Similarly we can make our applications look as we desire.
Thank you all
Hasan Al Mamun
Programmer
Bangladesh Bank
Dhaka, Bangladesh
[Updated on: Thu, 15 September 2011 00:50] Report message to a moderator |
|
|
|
| Re: Changing color of Report Column Header [message #523030 is a reply to message #522981] |
Thu, 15 September 2011 04:34  |
c_stenersen
Messages: 255
Registered: August 2007
|
Senior Member |
|
|
|
What you could also do is change just one of the templates. You can upload your own css file as an application/workspace file and just include it in a link in the header of your specific template. (<link rel="stylesheet" href="#WORKSPACE_IMAGES#myfile.css" type="text/css" />) In that way only one template would be changed in case this is what you want. I'm not sure if editing the theme_3_1.css file directly on the server might change all the applications on the server using this theme (seems likely to me), which might not be what's wanted. (It could mean you're also changing your colleague's application if he's using the same theme, and he might not want that.) All of the templates are editable through the ApEx developers interface, so you can even go in and edit the HTML if you wish to make a completely different look. (shared components->user interface->templates) So here you can add what you want, such as extra javascript, embedded css etc. When you do this you're changing the theme and template just for your application.
|
|
|
|
| Re: Changing color of Report Column Header [message #523189 is a reply to message #523030] |
Fri, 16 September 2011 01:35 |
BBMamun
Messages: 94
Registered: February 2010
Location: Dhaka, Bangladesh
|
Member |
|
|
Hi c_stenersen,
thanks for your valuable suggestion. Yes changing the CSS in the server changes the appearances for all applications. But to customize the CSS for one application as you suggested, I have to re write the CSS myself and load it at the header. I am not good at doing that.Since <link rel="stylesheet" href="/i/themes/theme_12/theme_3_1.css" type="text/css" /> will still appear at the page source. Now if I upload my CSS and write the following at the header <link rel="stylesheet" href="#WORKSPACE_IMAGES#myfile.css" type="text/css" /> will these two CSS references collide, or something...remember I have changed only one or some portion(s), others are same as the theme CSS which are referenced by Apex at run time. Seems like over-writing one CSS reference by the another CSS references.
Thank you.
|
|
|
|
| Re: Changing color of Report Column Header [message #523192 is a reply to message #523189] |
Fri, 16 September 2011 02:23 |
c_stenersen
Messages: 255
Registered: August 2007
|
Senior Member |
|
|
You don't have to re-write all the css.
Let's say that in theme_3_1.css we have this:
th.t12header a {
color: #FFFFFF;
font-size: 10px;
}
div{
color:blue;
}
Then you put in your myfile.css:
th.t12header a {
color: black;
}
As long as you put your link tag to myfile.css after the link tag to theme_3_1.css the code in your file which collides with the code in theme_3_1.css will be overridden by what you put in your file. So it will make the color black, but it will keep the font size of 10px, since there was no collision there. And the div will still have the color blue. All the code in theme_3_1.css which you choose not to override will still be in use.
|
|
|
|
| Re: Changing color of Report Column Header [message #523246 is a reply to message #523192] |
Fri, 16 September 2011 06:46 |
hudo
Messages: 165
Registered: May 2004
|
Senior Member |
|
|
stenersen,
do you suggest to replace in the page source code every line which contains
<link rel="stylesheet" href="/i/themes/theme_12/theme_3_1.css" type="text/css" />
by the two lines
<link rel="stylesheet" href="/i/themes/theme_12/theme_3_1.css" type="text/css" />
<link rel="stylesheet" href="/i/myfile.css" type="text/css" />
|
|
|
|
| Re: Changing color of Report Column Header [message #523248 is a reply to message #523246] |
Fri, 16 September 2011 06:58 |
c_stenersen
Messages: 255
Registered: August 2007
|
Senior Member |
|
|
I would rather use
<link rel="stylesheet" href="/i/themes/theme_12/theme_3_1.css" type="text/css" />
<link rel="stylesheet" href="#WORKSPACE_IMAGES#myfile.css" type="text/css" />
But yes, the principle is correct. Just add your link below the link to the theme css file. (But if you have linked your file to the application rather than the workspace you'll have to use #APP_IMAGES# instead.)
|
|
|
|
| Re: Changing color of Report Column Header [message #523307 is a reply to message #523248] |
Fri, 16 September 2011 11:52 |
BBMamun
Messages: 94
Registered: February 2010
Location: Dhaka, Bangladesh
|
Member |
|
|
Hi,
This is what I was suggesting, Since I used Theme 12 at the Application development wizard the <link rel="stylesheet" href="/i/themes/theme_12/theme_3_1.css" type="text/css" />
will appear at every page by default, what I am suggesting is writing the <link rel="stylesheet" href="#WORKSPACE_IMAGES#myfile.css" type="text/css" /> at the page Header so that the page source look like :
<link rel="stylesheet" href="/i/themes/theme_12/theme_3_1.css" type="text/css" />
<link rel="stylesheet" href="#WORKSPACE_IMAGES#myfile.css" type="text/css" />
Now the attribute of #WORKSPACE_IMAGES#myfile.css override the attribute of /i/themes/theme_12/theme_3_1.css. Thanks for your replies and suggestions.
Regards
Hasan Al Mamun
|
|
|
|
|
|
] 
Search
Help
Members
Register
Login
Home
