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.
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
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.
Thanks @Saravanan S, with this solution CSS applied to screen and working well.
you can write your CSS in "screen-container" Class
Also attaching the oml file.
Hope this helps you.
Thanks,
Diksha
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.
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