How to change App Login background image

Applications Forms
#1

How do I change background image in app Login SC9.3.

I have this code working in SC 7.x OnLoad event :

print ("
<style type=‘text/css’>
body {
background: #f8f7e5 url(…/_lib/img/SPSTilesBG.jpg) repeat center top;
}
</style>
");

But did not work for SC9.3 app Login.

Please help.

#2

I’m using the new HTML control application with a template from the samples library (login01.html). I created a copy of the samples library and modified login01.html application to use a different image. Uploaded the image I want to use in the IMG folder.

&lt;body class="page-sidebar page-background bg-half-img" style="background-image:url('{SC_LIB_CURRENT}login/img/bg-sample-login-2.jpg');background-size:100%;"&gt;
#3

@bhardin. Thanks for your advice.

But I have very little knowledge about external library and HTML. Could you please kindly explain step-by-step on how to create a login with custom background as you said in #2 above.

Thanks.

#4

Make a copy of the SAMPLES Library

  • TOOLS > EXTERNAL LIBRARIES
  • SAMPLES > SAVE AS
  • Library = Public
  • Name it "BBW" <-- Whatever you want to call it; I use BBW
  • Choose USE LIBRARY
Create New template for this form
  • Edit > Login
  • Open Login01.html and copy the text
  • Choose NEW FILE
  • Name it login01_bbw.html <-- whatever you want to call it
  • Paste the text from login01.html
  • Save
Upload new header image
  • Choose the IMG folder (within the BBW library)
  • Choose UPLOAD
  • Select the image (light on dark background)
  • Save it
  • Rename it if needed
Edit the login01_bbw.html
  • Open Login01_bbw.html
  • Change the image used
Change the Image used in login01_bbw.html

<div class=“header”>

            &lt;img src="{SC_LIB_CURRENT}login/img/bbw_logo_dark_200x72.png" alt=""&gt;

</div>

Technical Support Footer Code (optional)

     {SC_FIELD_INFO_Links}  (Placed after this)

<hr>

<ul style=“text-align:center;max-width:900px;margin:0 auto;list-style-type:none;font-size:13px;font-family: Arial, Sans-Serif;font-weight: bold;color: #a2a5aa”>

<li>Technical Support (000) 999-9999</li>

&lt;/ul&gt;

Changing the Page Title (custom information on tab in the browser)

Changed <title>Sign In</title> to this:

          &lt;TITLE&gt;&lt;!--SC_PAGE_TITLE--&gt;&lt;/TITLE&gt;

It gets the information from the value found in CONTROL > SETTINGS > SETTINGS > APPLICATION TITLE. Although this is formatted like a comment - it gets the value from the control form.

PART 2: Use it on the login screen

App_login should be a control application with the “user html” option

  • Choose USER HTML
  • Choose USE EXTERNAL LIBRARY
  • Select PUBLIC > BBW > Login01_bbw.html
  • Click CHECK to make sure there are no issues with any markups
  • Click CREATE FIELDS to add fields to the form (login, pswd, and links); Links must be identified as "Menu Links"
EDIT THE LOGIN FIELD
  • Control > Fields > Login
  • Labels & Watermark should use values from the data dictionary (I am also using data dictionaries)
  • {lang_sec_users_fld_login}
#5

Thank you. Got it to work now.

#6

Wonderful! Glad that I could help.

#7

amazing…it works

#8

Good to know!

#9

I have a similar need… and I am reflecting on the long set of instructions versus the original post to achieve the same thing. And as a non-CSS/MTML app developer, I can’t helping thinking that the latest version isn’t making this easier. Just saying… FWIW.