Home » Developer & Programmer » Application Express, ORDS & MOD_PLSQL » Changing color of Report Column Header (Apex 3.2 Oracle 10g EE R2)
Changing color of Report Column Header [message #522981] Thu, 15 September 2011 00:48 Go to next message
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 Go to previous messageGo to next message
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 Go to previous messageGo to next message
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 Go to previous messageGo to next message
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 Go to previous messageGo to next message
hudo
Messages: 163
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 Go to previous messageGo to next message
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 Go to previous messageGo to next message
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

Re: Changing color of Report Column Header [message #523347 is a reply to message #523307] Fri, 16 September 2011 17:18 Go to previous message
andrew again
Messages: 2577
Registered: March 2000
Senior Member
I'd just make the change to page0, so that all other pages in the app inherit it. You can also specify the list of pages that it applies to.
Previous Topic: indicate already processed procedures
Next Topic: Login Page
Goto Forum:
  


Current Time: Wed May 27 04:13:21 CDT 2020