Main Region

How do I change my Desktop Background?
4 answers | 1079 views

MN
Mar 7, 2014 12:28 +00:00

This is a question a customer raised so I thought I would document it here...

How do I change my Desktop Background to be like the FOEX Example? i.e. I would like to add in my own custom image and also add the logout button.

2 comments

MN
Matt Nolan Dec 8, 2014 12:55 +00:00 

Please create a test case on demo.tryfoexnow.com that shows your setup.

MN
Matt Nolan Dec 8, 2014 13:31 +00:00 

Hi Jochen, we provide the documentation application in your demo workspace(s) on demo.tryfoexnow.com. You can simply edit page 5 or quickly create a new FOEX page using the same APEX list. It does not take very long at all.

Saying that something doesn't work without any context of what you've done is not helpful. Creating simple test cases allows me to see what you have done and help you ad show you what to change.

MN
Mar 7, 2014 12:36 +00:00

The steps are:

Required CSS:

<style>
/**
 * Desktop Background Override to add a Radial Gradient (Centered)
 */
#DESKTOP .x-panel-body-default {
    /* fallback */
    background-color: #000 !important;
    background-image: none !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#3c3d3d), to(#161010));

    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-radial-gradient(circle, #3c3d3d, #161010) !important;

    /* Firefox 3.6+ */
    background: -moz-radial-gradient(circle, #3c3d3d, #161010) !important;

    /* IE 10 */
    background: -ms-radial-gradient(circle, #3c3d3d, #161010) !important;

    /* Opera couldn't do radial gradients */;
}
/**
 * FOEX Logo (Centered)
 */
.ux-wallpaper-tiled {
    background-color: transparent !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
</style>
  1. Add some additional CSS to your page to control the positioning of the FOEX background e.g. alt text

  2. Change your region static id to DESKTOP for the CSS changes to take affect alt text

  3. Update your desktop plugin settings to use a specific image e.g. alt text Note: in this case we have used an image uploaded through the "Static Files" section under "Shared Components", normally we would recommend uploading this to your webserver for better performance and caching.

To add the logout button

  1. Simply create a region button that belongs to the desktop region e.g. alt text Note: buttons appear on the right side of the start menu and are positioned according to their alignment e.g. alt text
0 comments

JO
Dec 8, 2014 12:46 +00:00

...and how can the background color be changed?

I tried something like

background-color: #E0D8E0 !important;
background-image: none !important;
background-position: center center !important;
background-repeat: no-repeat !important;

But the background of the desktop remains black.

regards Jochen

0 comments

JO
Dec 8, 2014 13:19 +00:00

sorry Matt, don't you think this is a little too much labour for a simple question? I just try to put up a new app based on a desktop.

Where would someone has too change the (color) code? Is it in the header section as explained above or is it some place else? In the first case I have to figure out why my change in the color code doesn't have any effects. regards Jochen

0 comments

JO
Dec 8, 2014 13:36 +00:00

Hello Matt,

I solved it.

it seemed to be the browser specific settings for radial gradients like

/* Firefox 3.6+ */

/ background: -moz-radial-gradient(circle, #3c3d3d, #161010) !important; /

So i commented it out and the above background colors seem to be pulled.

thx Jochen

0 comments

You must log in or sign up to post questions and answers.