Background image set using theme editor
Application Type
Traditional Web, Mobile, Reactive

Hello folks,

I want to set the background images to screens through the theme editor. I tried to apply as like this-

.taskDetail-screen {
    background-image: url('/Application/img/Application.login.png');
    background-size: cover;
    background-repeat: no-repeat;
}

 but it's not working. Any suggestions on how to set through theme editor.


Kind Regards,

Narendra Bhangale.

Solution

 Hi Narendra,

I used theme editor to setup background image for login and splash screen, login and splash screen has container in content placeholder with style class login-screen

Step 1: 

step 2 : CSS was automatically applied to this container style when using theme editor

Step 3: created my own screen and created my own class for the container named  custom-screen 

step 4: 

After defining custom class it worked for my respective screen. Please note that theme editor defines background only for login and splash screen.

output: 

https://saravanan-gamechanger.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/TEST_FORUMS/Horizontaldetail?_ts=637582645913987249


TESTFORUMS02062021.oml

Hi Narendra,

If you want to set background Image to the screen content, Try using the same CSS in Main content class 

i.e It is applied in Application Level.

Regards,

Saravanan Santhanam

Hi @Saravanan S,

It's a mobile application and I used CSS from a theme customizer. Bcoz of that or don't know why these options to apply CSS from stylesheet are not working. So I asked about to set bg-img using theme customizer.

Please suggest as per.

Thanks.

Solution

 Hi Narendra,

I used theme editor to setup background image for login and splash screen, login and splash screen has container in content placeholder with style class login-screen

Step 1: 

step 2 : CSS was automatically applied to this container style when using theme editor

Step 3: created my own screen and created my own class for the container named  custom-screen 

step 4: 

After defining custom class it worked for my respective screen. Please note that theme editor defines background only for login and splash screen.

output: 

https://saravanan-gamechanger.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/TEST_FORUMS/Horizontaldetail?_ts=637582645913987249


TESTFORUMS02062021.oml


Thanks @Saravanan S, with this solution CSS applied to screen and working well.

Regards,

Narendra Bhangale.

Hi Narendra,

you can write  your CSS in "screen-container" Class

Also attaching the  oml file.

Hope this helps you.


Thanks,

Diksha

backgoundImg.oml

Hi @Diksha Magre,

This is also working fine. But in my case, I used a mobile application and CSS applied using them customizer. So this is also not applicable to my problem. If possible you can try to use a mobile app with a theme customizer and try to use it so u will get my problem.


Thank you.

Hi Narendra,

Even I was having the same question as how to set a background image or add different color gradients to the screen. I had chalked out the solution and sharing the same with you below:

1. For adding background image to you main content, you need to open up the 'CSS' icon on the mid-top-left of your service studio screen

2. Then click on 'Base Theme' option and copy all the content/code from that window (use Ctrl+A from your keyboard)

3. Now click on your app name (you'll find it on top of your screen just beside 'Base Theme' and paste that copied content/code

4. Now go back to your app screen and double click on background of your main content i.e. where you want to set the image or color gradient and then again open up the 'CSS' icon on the mid-top-left of your service studio screen

5. Now you have to look for -

.main-content  {
    -servicestudio-display: flex;
    -servicestudio-flex-direction: column;
}

 6. Now here you can add image or any other related requirement for example I had added color gradient as you can see below

.main-content  {
    -servicestudio-display: flex;
    -servicestudio-flex-direction: column;
    background-image: conic-gradient(red, yellow, green);
}

Hope this help and resolve your issue.

Cheers,

Kunal Dhoble

Hi Kunal,

first off, you are replying to very old posts, this one was even already tagged as solved, so not sure who your intended public is.

But you also give a bad answer : please don't advise people to copy the whole CSS from the base theme to the application theme, that is not the intended use of the CSS setup of Outsystems.

Dorine

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.