Creating Ionic 3 Landing and Login Page Popup using custom styled Modal

n
nIn the tutorial, I am going to show how to create an ionic 3 landing page with a modal login page.nn
nnn
nnn
n

n

n

n

n

n

n

n

nSource Coden n

n
n

nArticle Objective

nThe objective of this post is to show the technique I personally used when theming my Ionic apps
n
n

nThe Project

nLets start by creating a new ionic project using the blank template like so:
n

ionic start ionic3-login-modal blankn

n
n

nThe Resources

nI will be making use of a very nice logo downloaded from Logologo website. They have a lots of free and paid logos in stock. Check them out!
n
nThe background image used is also from PixaBay.
nThe logo and the background image has been added to src/assets/imgs foldern
n
n

nThe Landing Page

nOpen up the home.html file and replace the code with the following:
n
n

n  
n
n        n    
n
nCompany Name
n
n
nn          n          
n
nWelcome
n
n
nn        Sign In  n        n      n        n          Register          n        n        n            Explore          n        n      n  
nn

n
nLet’s break down the code. I have broken it into three areas using divs – Top Page, Middle Page and Bottom Page. It is pretty straightforward as I have used a descriptive names.
nnn
nnnIn the top page area we have the logo and the company name, and the middle page holds the welcome tagline while the bottom page is where we have our set of button.
n
n

nThe Landing Page CSS

nOpen up the home.scss file and add the following:
n

page-home {n     .scroll-content,n     fixed-content {n          overflow: hiddden;n          background: url(../assets/imgs/bg.png) no-repeat center center fixed;n          -webkit-background-size: cover;n          -moz-background-size: cover;n          -o-background-size: cover;n          background-size: cover;nn          .top-page {n               padding-top: 35%;n               height: 50%;n               h2 {n                    img {n                         max-width: 25% !important;n                         background: #fff;n                         ;n                         padding: 5px;n                         border-radius: 6px;n                    }n               }n          }n          .middle-page {n               padding-top:4rem;n               height: 34%;               n              n          }n          .bottom-page {n               height: 15%;n               button.loginBtn {n                    height: 3.7rem;n               }n          }n     }n}n

n
nThe home page should now look like this:n
n
n

n
n

nThe Home Page .ts File Code

n

  showLoginModal() {n    const modalOptions: ModalOptions = {n      cssClass: "signInModal"n    };n    const modal = this.modalCtrl.create("LoginPage", {}, modalOptions);n    modal.present();n  }nn

nOne thing to take note of in the above code is then cssClass added to the modalOption. That is what we will use in customizing the modal page later.nnn
n
n

nThe Login Page

nCreate another page by running ionic g page login and replace the html code to reflect the following:
n
n

n    n        
n
n            n        
n
n            Company Namen          
n
nn          n        n      n        n          n        nn        n            Sign inn        n      n      nn

n

nModal Page CSSn

nCreate a file named login.scss within the theme folder and add the following codes:nn
n

.signInModal {n     padding: 30px;n     .modal-wrapper {n          border-radius: 7px;n          background: rgba(0, 0, 0, 0.5);n          height: 75% !important;n          margin-top: 10%;nn          ion-list{               n               n               .login-top{n                    margin-top: -20px;n                    background: #4eb5e2; n                    padding-bottom: 10px; n                    margin-bottom: 25px;         n               }n               img {n                    margin-top: 15%;n                    max-width: 30%;n               }nn               .item{n                    n                    background: none !important;n                    button{n                         height:4rem !important;n                    }n               }n          }n     }n}nn

nImport the file in the app.scss file like so:n
n

@import "theme/login"n

nBy clicking on the sign in button on the home should open the login modal like so:n n
n
n

nDo you have a better way of doing this? Please comment below if you know how it can be done better.
n
nI hope this helps. Happy coding !