Change page color

[regu400]

Hi Team

I converted a DSPF to rich display file, when I launched the background is white. Is there anyway to change the background color?

Regards
Regu

[Scott Klement]

Are you running your Rich Displays with Genie? Or with the Profound UI Batch Session Controller? Is Atrium involved at all?

CSS is readily available, so you can certainly use it to change the color of anything/everything... but exactly what you should change depends on whether you want to affect all applications or just one.

[regu400]

Hi Scott

I am a beginner and I am using Profound UI Visual Designer to convert my green screens to rich format. So, in what part I should check on CSS to change the background color.

Regards
Regu

[Scott Klement]

Are you running your Rich Displays with Genie? Or with the Profound UI Batch Session Controller? Is Atrium involved at all?

[regu400]

Hi Scott

I am not using Genie. Not sure about Session controller. This term is new to me. Sorry for that.. I am attaching the screenshot on where I am working on.

Regards
Regu

[Scott Klement]

What you've provided in your screenshot is the "Visual Designer". This is where you work on the screen, etc. I'm looking for information about how you run the application (not where you develop it.)

You say you aren't using Genie. Can I assume, therefore, that you are running your program by using /profoundui/start in the URL? Or using the "Launch" menu from the Visual Deisgner? If so, this is the Profound UI Batch Session Controller that I mentioned earlier.

In that case, you can do the following:

Step 1: Create a file in the /www/PROFOUNDUI/htdocs/profoundui/userdata/custom/css directory named "background.css" (you can name this anything you want that ends with .css, but "background.css" would be a good name.) Note that the /www/PROFOUNDUI directory is the default name, but it's possible to change this during the installation of ProfoundUI. If you used a different location, please substitute that.

Step 2: In this new 'background.css' file, place the following:

Code: Select all

body {
   background-color: #00ff00;
}

In this example, the background color will be set to green (because of the color code #00ff00). You can substitute whichever color code you wish.

Step 3: Refresh your page to see the changes.

[regu400]

Excellent Scott.. Thanks a lot for your patience and detailed information.. Its working fine.

1 more doubt.. Is it possible to have it for only my screen. This seems to be a generic setting. Right?

[Scott Klement]

In that case,

Step 1: Change the background.css file to contain this:

Code: Select all

.greenbackground {
  background-color: #00ff00;
}

Step 2: In the visual designer, drag a "simple container layout" to your display.

Step 3: Right-click the simple container and choose "send to back"

Step 4: Set the following properties on your simple container layout:

Code: Select all

left: 0px
top: 0px
height: 100%
width: 100%
css class: greenbackground   <-- matches what you put in the background.css (except for the leading dot)

Step 5: Save & Compile the display file.

Step 6: Refresh your browser session, and re-run the program.

[regu400]

Thanks a lot Scott.. This is going to help us a lot

[AjFromADS]

Hey guys,

Whenever I set my Container Width and Height to 100%, It fills the entire width of the screen but is only but is only a few pixels tall...

Screen shot.png (288.88 KiB) Viewed 773 times