Region Header Background Color different to the theme template

Hello,
for my apex application i configured the theme Blue Gray - 13.
I want that my application displays all region-, report headers on every page in a different color, for example "magenta".
My CSS Code in the page header on page1:
<style type="text/css">
.t13RegionHeader {background-color:#FF3FA0;}
th.t13ReportHeader {background-color:#FF3FA0;}
</style>
{code}
works fine for report regions and form regions, but i didn't manage to change the color for the tabs. Is there any chance to switch the background color for tabs. Perhaps it's a better way to change the Color of the theme but I nether know how to manage this.
Does anybody have an idea?
Thanks in advance
Christian

Hi Chris,
first thanks for your quick answer.
...but it didn't work.
I'm using the Internet Explorer, but i analysed the source code of the running page. I tried also the entries: .t13PageTabs and th.t13PageTabs but i had no success on this try.
For the Page Tabs i found the following code:
<div id="t13PageTabs"><table cellpadding="0" cellspacing="0" border="0" summary="" class="t13PageTabs"><tbody><tr><td class="OnL"><img src="/i/themes/theme_13/tabOnL.png" alt="" /></td>
<td class="OnC"><span>Produkt</span></td>
<td class="OnR"><img src="/i/themes/theme_13/tabOnR.png" alt="" /></td><td class="OffL"><img src="/i/themes/theme_13/tabOffL.png" alt="" /></td>
<td class="OffC"><a href="javascript:doSubmit('T_BUSINESSPROCESSVKZ');">Business Process VKZ</a></td>
<td class="OffR"><img src="/i/themes/theme_13/tabOffR.png" alt="" /></td><td class="OffL"><img src="/i/themes/theme_13/tabOffL.png" alt="" /></td>
<td class="OffC"><a href="javascript:doSubmit('T_PORTALPRODUKTE');">Portal Produkte</a></td>
<td class="OffR"><img src="/i/themes/theme_13/tabOffR.png" alt="" /></td><td class="OffL"><img src="/i/themes/theme_13/tabOffL.png" alt="" /></td>
<td class="OffC"><a href="javascript:doSubmit('Default Portal Produkte');">Default Portal Produkte</a></td>
<td class="OffR"><img src="/i/themes/theme_13/tabOffR.png" alt="" /></td><td class="OffL"><img src="/i/themes/theme_13/tabOffL.png" alt="" /></td>
<td class="OffC"><a href="javascript:doSubmit('T_DEFAULTPORTALFEATURES');">Default Portal Features</a></td>
<td class="OffR"><img src="/i/themes/theme_13/tabOffR.png" alt="" /></td><td class="OffL"><img src="/i/themes/theme_13/tabOffL.png" alt="" /></td>
<td class="OffC"><a href="javascript:doSubmit('T_PRODUKTUNABHAENGIGE_FEATURES');">Produktunabhängige Features</a></td>
<td class="OffR"><img src="/i/themes/theme_13/tabOffR.png" alt="" /></td></tr></tbody></table>
</div>Do you have another idea to succeed?
Thanks in advance
Christian

Similar Messages

Cannot change JToggleButton background color when Windows XP theme is used

I wanted to change the background of a JToggleButton when it's pressed. I tried a few things, such as
UIManager.put("ToggleButton.select", Color.RED);
setting button's background, button's UI.
but nothing worked.
so I tried changing desktop theme from Windows XP to Windows Classic, then i was able to set button's background.
The following is a simple test program, by switching theme, the toggleButton looks differently.
Does anyone know how I can change JToggle button's background color under Windows XP theme?
Thank you in advance!
import javax.swing.*;
import java.awt.*;
public class ToggleTest {
    public static void createGUI(){
        JToggleButton button = new JToggleButton("Test");
        button.setBackground(Color.BLUE);
        JFrame testFrame = new JFrame("Test Frame");
        testFrame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
        testFrame.getContentPane().setLayout(new FlowLayout(FlowLayout.CENTER));
        testFrame.getContentPane().add(button);
        testFrame.pack();
        testFrame.setVisible(true);
    public static void main(String[] args){
        try{
            UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
            //UIManager.put("ToggleButton.select", Color.RED);
        catch(Exception ex){
            ex.printStackTrace();
        SwingUtilities.invokeLater(new Runnable(){
            public void run(){
                createGUI();
}

class myToggleBtn extends JToggleButton {
String s;
public myToggleBtn(String str, Boolean sel) {
    super(str, sel);
    s = str;
public void paintComponent(Graphics g) {
    super.paintComponent(g);
    if (this.isSelected()) {
         int w = getWidth();
         int h = getHeight();
         g.setColor(Color.green); //selected color
         g.fillRect(0, 0, w, h);
         g.setColor(Color.darkGray); //selected foreground color
         g.drawString(s, (w - g.getFontMetrics().stringWidth(s))/2 + 1, (h + g.getFontMetrics().getAscent())/2 - 1);
}

Header background color does not work

Hi,
I would like to change the background color of the header element, but it does not work as I imagined
First of all, here is the HTML:
<body>
<div id="wraper">
<header>
    <h1><span>Pacific</span> Coastal Highway</h1>
    <nav>
      <ul>
        <li>Home</li>
        <li>Big Sur</li>
        <li>Pfeiffer Beach</li>
        <li>Elephant Seals</li>
        <li>Morro Bay</li>
      </ul>
    </nav>
</header>
// ... some other HTML elements & content ...
</body>
So, within <header> element we have <h1> and <nav> elements, and within that <nav> element there is a list that is actually menu.
Here it CSS code that refers to these elements:
#wraper {
    width: 1200px;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
body {
    margin: 0;
    background-color: #CBD2FB;
    font-family: "OpenSans Regular", "Gill Sans MT", Arial, "Times New Roman", sans-serif;
    color: #202020;
    background-image: -webkit-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
h1 {
    margin-top: 0px;
    font-size: 48px;
    text-shadow: 1px 1px 2px #969696;
    padding-top: 32px;
h1, h2, h3 {
    font-family: "Prociono Regular", "OpenSans Regular", "Gill Sans MT", "Times New Roman", Arial;
    color: #507AAD;
    text-align: center;
h1 span {
    position: relative;
    top: -37px;
    left: 35px;
    font-family: GoodDog, Arial, "Times New Roman", "Gill Sans MT", sans-serif;
    font-size: 47px;
header nav ul {
    margin-right: auto;
    margin-left: auto;
    list-style-type: none;
    padding-left: 0px;
    width: 705px;
    /* [disabled]margin-bottom: 10px; */
nav ul li {
    float: left;
    padding: 10px;
    display: block;
    width: 110px;
    text-align: center;
    background-color: #A9A3FF;
    border-right: 1px solid #FFFFFF;
    border-radius: 23px;
    background-image: -webkit-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
    background-image: -moz-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
background-image: -o-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
    background-image: linear-gradient(180deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
    margin: 18px 5px;
And, finally, here's how it looks:
Now, I'd like to change the background color of the <header> element (to chage that white behind that <h1> and menu into some other color), so I just added the background color of the <header> element in CSS:
header {
    background-color: #FF2D31;
But, here is how it looks now:
As you can see, although <nav> element with list (menu) is IN <header> element - the background color of <header> is just behind <h1> element.
Do you know why it's happening, and what would be the best way to solve this problem?
Thank you in advance.

Ben Pleysier wrote:
The problem is caused when floated children do not force the parent element to clear the floats.
Nancy O. wrote:
It may seem counter-intuitive but overflow:hidden prevents margin collapse on parent elements containing floats:
The magic of “overflow: hidden” — Articles — Colin Aarts, freelance web developer
I'm trying to figure out what happened (and why) in my example, where the problem occurred, but...
I tried with inspecting elements with Firebug - to see what's what in case when there isn't overflow:hidden property that is related to <header> element in this example from the first post:
As you can see in the picture - <header> element is only that blue area containing <h1> element, and although <nav> element (with the <ul> element inside) is IN <header> element - it is not shown within the blue area, as it is not within <header> element.
As for the <h1> element which is inside of the <header> element, when I select it - it looks like this:
Now, purple area indicates the padding-top of <h1> element, and I guess that yellow area which indicates the margin is actually browser's default margin of the <h1> element.
Next, confusing is when I select <nav> element:
Although <nav> element is selected - there is no that blue area indicating where is that element on the web-page... ?
Next, when I select <ul> element, there is only yellow area indicating margin - I guess that yellow area which indicates the margin is actually browser's default margin of the <ul> element.
When I select <li> element - it's the same case as with <nav> element there is no that blue area indicating where is that element on the web-page... ?
Finally, when I select <a> element - it looks like this:
All in all - inspecting all <header> element and the elements within it didn't help me to see what and why this is happening (with the background color of the header element). I think the problem is in me, I'll wait a few days and maybe then things become clearer in my mind
Sorry for my bad English.
Again, thank you all!

How do you change the background color not of the video clip, but the background the clip is on?

How do you change the background color upon which the clip resides...
I don't want to change anything within the clip itself, but the matte(?)
from black to white or cream.
I am working with Elements 10...

Create a color matte of the desired color and place it on video track 1. Then place your video on track 2.
from here: Adobe Premiere Elements Help | Creating specialty clips
Create a colored matte for a background
You can create a clip consisting of a full‑frame matte of solid color, which you can use as a solid background for titles or animated clips.
Brightly colored mattes can serve as temporary backgrounds to help you see transparency more clearly while you adjust a key effect.
Click Project Assets.
In the Project Assets panel, click New Item from the panel options and choose Color Matte.
Choose a color in the Adobe Color Picker dialog box, and click OK.
A color matte clip is placed into both the Project Assets panel and the Expert view timeline.

Heading and color scheme of the columns for the detail report

Is it possible to have a heading and color scheme of the columns for the reports displayed on drill down of a query in WAD?

Try the stylesheet in the properties of web template.

Setting background color to just the root node in a tree

How can I set a background color to just the root node in a tree? I got the node in the followig way in the renderer method.
IconNodeClass parentIconNode = (IconNodeClass)((IconNodeClass)value).getRoot();
Then how can I set the background for just the root node? Thanks.

You need to write ur own treeCellRenderer for that to be done

Is there a way to have a background color/texture take the form of an image?

Is there a way to have a background color/texture take the form of an image?
I would essentially like to have a gold foil texture take the shape of a logo - almost like a cookie cutter or stamp.... is there an easy way to do this?
Thanks!

CLipping masks. Read the help. This is really something basic.
Mylenium

Background color different than in index.html

Hello All,
does anyone know what what is the cause that the background color of knoweldge folder is different that one specified in index.html?
After portal restart some of the knowledge room has changed the background colors to the portal theme and some of them are still as defined in index.html
Anyone knows where is the prob?
Thanks for info & help!
Karol

We need to see the page in question.

Virtual directory in region header background-image not working

I created a region with a region header that needs the background image to repeat vertical as well as horizontal, so the class was changed to include repeat instead of repeat-x.
So i replaced class t20RegionHeader with this:
.t20RegionHeader {
vertical-align: center;
font-weight: normal;
font-size: 9pt;
font-weight: bold;
color: #343434;
background-image: url(/i/hdingBar-BG.gif) ;
background-repeat: repeat;
text-align: left;
padding: 1px 8px;
white-space: nowrap;
border: 1px solid #a3bed8
I put "/i/" in the background-image's url bacause I am referencing an image in the virtual directory but it didn't work. Please help!!
I have it on APEX.ORACLE.COM:
Workspace: RGWORK
User: TESTER
Password: test123
Application: 41237 CreativeTest
Page: 11
APEX: Application Express 4.0.2.00.07
DB: Oracle 10.2.0.4
Robert
http://apexjscss.blogspot.com

sect55 wrote:
I created a region with a region header that needs the background image to repeat vertical as well as horizontal, so the class was changed to include repeat instead of repeat-x.
So i replaced class t20RegionHeader with this:
.t20RegionHeader {
vertical-align: center;
font-weight: normal;
font-size: 9pt;
font-weight: bold;
color: #343434;
background-image: url(/i/hdingBar-BG.gif) ;
background-repeat: repeat;
text-align: left;
padding: 1px 8px;
white-space: nowrap;
border: 1px solid #a3bed8
<tt>center</tt> is not a valid value for <tt>vertical-align</tt>: should be <tt>middle</tt>.
Firebug reports "Failed to load the given URL" for <tt>/i/hdingBar-BG.gif</tt>. Does this image exist at that location? (Are you talking about apex.oracle.com or your local environment? If it's the latter, check that the <tt>hdingBar-BG.gif</tt> image file exists at the location specified by the virtual directory <tt>/i/</tt> and that the permissions are set to make it readable.)

Linux: The tabs text color changes with the theme, while the menu text color is always black.

Hello,
When Firefox theme is changed, it usually changes window appearance, e. g. backgrounds, and sets corresponding text color to contrast with that background. It always used to be like this. For instance, I currently use Sunflower_01 theme which sets blue sky as a background. The tabs text is white, as well as the bookmarks. The white text contrasts very fine with the sky. But the menu items are awfully black, casting dark-gray shadows on the dark-blue sky. The menu remains black regardless of the theme I set.
Of course, it's all fine without any add-ons (light background, dark text), but with a theme enabled, it looks not the way it used to be. I wonder if it can be fixed somehow.
I use Mozilla Firefox 33.0 for Linux Mint (release 13, maya).
Looking forward to your reply.
Regards,
Andrey

Hello,
Did you install from the repositories? I have found the same problem with Ubuntu 14.04, a workaround is to either use a userChrome.css file, or (in my opinion, the easier route) [https://addons.mozilla.org/en-US/firefox/addon/stylish/ Stylish] extension with a new Style.
See these articles about the userChrome.css file:
* http://kb.mozillazine.org/index.php?title=UserChrome.css
* http://kb.mozillazine.org/UserChrome.css_Element_Names/IDs
If you use the userChrome.css route, you may need to restart Firefox to apply the changes.
See this article for Stylish:
* http://forums.mozillazine.org/viewtopic.php?f=38&t=1570945
To add a new style in Stylish, click on the Stylish tool on your toolbar, then "Write New Style", then "Blank style". Or:
* Tools (or [[Image: New Fx Menu]]) > Add-ons > User Styles > Write New Style
Example code for either one method you choose (you can play around with the colours, but I found this worked nicely for my theme):
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/*change size, color, style of text in Menu Bar */
menubar > menu
{color: darkgray !important}
/* Mouse hovering over menu */
menubar > menu[_moz-menuactive="true"]
{color: white !important;}
/* Active/Open menus */
menubar > menu[_moz-menuactive="true"][open="true"]
{color: black !important;}

Region/page background color

Hello all,
Is it possible to change dinamically (depending on a value) the background color of a particular page or region?
I know how to do it for single columns on my updatable report region but not for the whole region.
Regards

1) You have to modify your region template. In the page view, click onto the region template in the "Shared Components" section.
2) Replace #REGION_ID# by #REGION_STATIC_ID# see also the following thread
Re: New substitution string - #REGION_STATIC_ID#
3) Go to your region and enter a unique value into the "Static ID" property. Eg. TESTIT
4) Create a new region of type HTML with template = No Template Display Point=Before Footer or just after your region
5) Add a condition to it to define when the coloring should be done
6) Add the following javascript code into the source of the new region
<script type="text/javascript">
$x("TESTIT").style.backgroundColor = "red";
</script>That should do what you are looking for.
Patrick
My APEX Blog: http://inside-apex.blogspot.com
The ApexLib Framework: http://apexlib.sourceforge.net
The APEX Builder Plugin: http://sourceforge.net/projects/apexplugin/

Why does Photoshop display colors differently from the other applications even in sRGB mode ?

Hello all !
Here is my problem :
Photoshop is set to use sRGB workspace (in edit/colors.../workspace/RVB).
If I understand correctly this is how all native windows applications work.
This means Photoshop and the other applications should display the same colors on a file with a sRGB profile.
Now this is the case until I calibrate my monitor.
When I do, Photoshop colors become different from the other applications (irfanview, explorer, browsers...).
The only way I found to let everything display the same colors is to set Photoshop to use Proofing/RVB Monitor.
What upsets me even more is that Photoshop colors look "better" to me (dark grays seem to dark to me in the other applications.)
I have read that this is because Photoshop takes the new profile into account and others applications do not. But I don't think this is relevant here because everything is in sRGB so the only profile is my monitor's and I think calibration is handled globally by windows : everything (including browsers, explorer, and Photoshop) changes color if I choose to apply the monitor's profile or not with windows color management tool ("use my parameters for this device").
Here is my system configuration :
- Photoshop CS4 (11.0.2)
- Windows 7 64 bits
- HP ZR2440W and DELL 2209WA (these are not wide gamut screens)
I have spent two days trying to figure the logics behind this and really am upset. Any help would be greatly appreciated. Don't hesitate to ask me if there is something that is unclear or some information I forgot to mention.
Thanks in advance,
Yannick

That sounds like an invitation to continue to talk about the issue. Fair enough.
I'm not sure where you're getting "insecurity"... I am just trying to help you help others more effectively.
I invite you to re-read just the first sentence of what you wrote very carefully, putting yourself in the shoes of someone struggling with both the terminology and the concepts:
Photoshop (CMS) reads an embedded ICC profile and CONVERTS it to the custom monitor profile for a theoretical 'true color' display
Think about what "Photoshop (CMS)" might mean to a person who doesn't know the acronym might stand for "Color Management System" (which is I assume what you meant). Adobe themselves don't call it "CMS", they use the acronym "CMM" (Color Management Module). The term "CMS" is used in the computer industry for about a dozen different things.
While a color profile might have been embedded in an image file before it was opened by Photoshop, Photoshop works on documents. A profile is not "embedded" in a document, it is maintained by Photoshop with the document and describes the color values in the document. If Photoshop opens a document without an embedded profile, depending on settings and user choices it might assign a profile or it might even operate on the document without color-management. Oversimplification doesn't help people when they're trying to learn new things unless it's described as such, for example, "This is a bit of an oversimplification..." or "Generally speaking..."
Not every monitor profile is a "custom monitor profile". Quite often a standard profile (e.g., sRGB IEC61966-2.1) is associated with a monitor by the operating system as a default, or a factory profile is installed by a driver package or system update. Your use of the term "custom" is a bit ambiguous and could be read as implying the creation of a profile using a calibration and profiling device specific to the particular monitor.
Photoshop's color management code does not convert an embedded ICC profile at all (read carefully what you wrote). As I said, it transforms color values. That was the key error in your description that prompted me to comment.
If ever there is a time to pick words carefully, it's in a color-management discussion.
-Noel

Can the current line be highlighted using a background color or have the cursor flash?

I use the split screen and left click in the Design pane to jump to where I want to be in the Code pane in Dreamweaver CS6. The problem is that it can be very hard to tell where the cursor is in the Code pane since the cursor doesn't flash.
Is there a way to force Dreamweaver CS6 to change the background color of the currently selected line or at least have the cursor flash in both panes? There must be some way to make it easier to find the current line of code.
Thanks.

John Waller wrote:
The cursor does not flash in Code View only when Code View is not in focus i.e. you're working in the Design View window in Split View.
In those caases, I just highlight a word or two in Design View and the corresponding words are highlighted by DW in Code View (even when Code view is not in focus).
Thanks. I've been doing that, but sometimes there is no text to highlight. I hoped Dreamweaver might have a hidden setting that I could enable. That's a lot of extra sliding of the hand/wrist for no good reason when it would be easy for the Dreamweaver programmers to change the background color of the current line or make the cursor flash or do something else to indicate where you are in the code besides making the user constantly make a smearing action with the mouse. All of those extra movements add up the wear and tear when you're trying to avoid getting a repetitive stress injury, especially if you already use mouse gestures in a browser.

Background color different in firefox and IE

I am using dreamweaver cs5 and when I test my page in firefox, it is the color that I chose ( a pink color), but when i test it in internet explorer, it is black (this is the background color). Does anyone know why this is happening and how to correct it?
Also, I made my page with tables and centered the table with no margins. well the page has a huge margin gap at the bottom in google browser, but it is fine in IE and firefox. any suggestions? Thanks.

We need to see the page in question.

In Spry menu, can I make the dropdown colors different from the main one?

In this menu at the link, I would like to keep "who we are" in the color it is, but make its submenu colors different. I can't see to find in the CSS where to do that without changing both the main and sub menu colors.
Homepage

Based on the default Spry menu code you are correct that it is all or nothing. The only alternative you could do is create your own custom CSS class to use on all sub-menu items on the drop-down to override the colors. This declaration would need to be after the Spry submenu one that you have found because the browsers will read CSS from start to finish so the later declarations will override the earlier ones.

Region Header Background Color different to the theme template

Similar Messages

Maybe you are looking for