{"id":13341,"date":"2023-05-06T02:05:39","date_gmt":"2023-05-06T06:05:39","guid":{"rendered":"https:\/\/buzapps.net\/info\/?post_type=knowledgebase&p=13341"},"modified":"2023-05-07T23:31:49","modified_gmt":"2023-05-08T03:31:49","slug":"how-do-i-customize-the-login-screen-add-background-etc","status":"publish","type":"knowledgebase","link":"https:\/\/buzapps.net\/info\/knowledgebase\/how-to\/how-do-i-customize-the-login-screen-add-background-etc\/","title":{"rendered":"How do I customize the login screen (add background, etc)?"},"content":{"rendered":"\n

Use the code below to customize the login screen (add a background image, color, etc) when using the Padlock feature:<\/p>\n\n\n\n

1)<\/strong>Log into your App Manager and select your app<\/strong>.<\/p>\n\n\n\n

2)<\/strong> Click Colors<\/strong> from the left-hand-side of the screen (or the middle of the screen).<\/p>\n\n\n\n

3)<\/strong>\u00a0Scroll down to the\u00a0Advanced SCSS box<\/strong>.\u00a0If there is already code in the box do not delete it!\u00a0Simply add this code “below” the last character of code in the box.<\/p>\n\n\n\n

\/** Begin customize login screen.*\/\n\n.customer-view.modal ion-content .list .item.item-text-wrap {\n\ndisplay:none;\n\n};\n\n.customer-view.modal ion-content .list .item.item-divider {\n\ndisplay:none;\n\n};\n\n.customer-view.modal ion-content .list .item.item-custom input::placeholder {\n\ncolor:white;\n\nfont-size:15px;\n\n};\n\n.customer-view.modal ion-content .list .item.item-custom input{\n\ncolor:white;\n\nfont-size:15px;\n\n};\n\n.customer-view.modal ion-content .list [class=\"item item-custom item-icon-left ng-binding\"] {\n\nbackground-color:transparent;\n\ncolor:white;\n\nborder-left:transparent;\n\nborder-right:transparent;\n\nborder-top:transparent;\n\nborder-bottom-color:#ffffff;\n\nmargin-left:25%;\n\nmargin-right:25%;\n\n};\n\n.customer-view.modal ion-content .list .item.item-custom .input-label {\n\ndisplay:none;\n\n};\n\n.customer-view.modal ion-content .list .item.checkbox-custom span {\n\ncolor:white;\n\n};\n\n.customer-view.modal ion-content .list label{\n\nbackground-color:transparent;\n\ncolor:white;\n\nmargin:0% 25% 0% 25%;\n\nborder-left:transparent;\n\nborder-right:transparent;\n\nborder-top:transparent;\n\nborder-bottom-color:#ffffff;\n\n};\n\n\/*\n\n.customer-view.modal ion-content .list .item:nth-child(4) {\n\nmargin:0% 25% 0% 25%;\n\nborder-color:transparent;\n\ntext-align:center;\n\n};\n\n*\/\n\n.customer-view.modal ion-content [class=\"button button-positive button-positive-custom ng-binding button-full\"] {\n\nbackground-color:#ee4b63;\n\nheight:30px;\n\nwidth:60%;\n\nmargin:0% 20% 0% 20%;\n\ntext-align:center;\n\n};\n\n.customer-view.modal ion-content {\n\nbackground-image:url(\"https:\/\/st.depositphotos.com\/1244201\/2496\/i\/950\/depositphotos_24962239-stock-photo-blue-wooden-background.jpg\");\n\nheight:520px;\n\nborder:2px solid white;\n\n};\n\n.customer-view.modal ion-content .list .item{\n\nbackground-color:transparent;\n\ncolor:white;\n\nborder-left:transparent;\n\nborder-right:transparent;\n\nborder-top:transparent;\n\nborder-bottom-color:#ffffff;\n\nmargin-left:20%;\n\nmargin-right:20%;\n\npadding-left:0px;\n\nwidth:60%;\n\n}\n\n\/** for privacy policy text*\/\n\n.customer-view.modal ion-content .list label.item.checkbox-custom{\n\npadding-left:47px;\n\nwidth:100%;\n\n}\n\n.customer-view.modal ion-content .list .item .icon{\n\ndisplay:none;\n\n}\n\n\/** End customize login screen.*\/<\/code><\/pre>\n\n\n\n
4)<\/strong>Click Save<\/strong>.<\/p>\n\n\n\n
Note:<\/strong> Replace the various hex colors (ex:\u201cffffff\u201d) to the colors that you would like to use. In addition, be sure to change the image url to use your image:<\/p>\n\n\n\n
\n
\nhttps:\/\/st.depositphotos.com\/1244201\/2496\/i\/950\/depositphotos_24962239-stock-photo-blue-wooden-background.jpg\n<\/div><\/figure>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Use the code below to customize the login screen (add a background image, color, etc) when using the Padlock feature: 1)Log into your App Manager and select your app. 2) Click Colors from the left-hand-side of the screen (or the middle of the screen). 3)\u00a0Scroll down to the\u00a0Advanced SCSS box.\u00a0If there is already code in the box do not delete it!\u00a0Simply add this code “below” the last character of code in the box. 4)Click Save. Note: Replace the various hex colors (ex:\u201cffffff\u201d) to the colors that you would like to use. In addition, be sure to change the image url to use your image:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","knowledgebase_cat":[35],"class_list":["post-13341","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-how-to"],"_links":{"self":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/comments?post=13341"}],"version-history":[{"count":3,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13341\/revisions"}],"predecessor-version":[{"id":14144,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13341\/revisions\/14144"}],"wp:attachment":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/media?parent=13341"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase_cat?post=13341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}