Bonus Content — Ionic Part 6

Hello and Good Morning! Welcome to the last (hopefully) post in this series! (Probably not…)

This is a short checklist of basic things that weren’t covered in the previous posts;

  1. Custom styles 🎀
  2. Images 🖼️
  3. Custom fonts 🗚

Step 1 — Prettify the UI

Going through my app, I was able to see a few things I wanted to change.

Remember those little messages below the input fields in the login, register and reset password pages?

Error message with underline

I just realized that, since they are essentially <ion-item>, they have a line at the bottom. Not that great.

Thankfully, it’s a simple fix! There’s a global property called no-lines, that you need to add to the <ion-item> like so;

<ion-item ... no-lines>

So go ahead and add this to all the error message <ion-item> tags.

Error message without underline

Your error message now looks like this.

Let’s move on to colors!

If you snooped around the project structure, you would have seen a folder called theme. The variables.scss file within has a color variable with 5 set colors. Keep the colors light and dark as they are, as well as danger, as we are using it for the reset password button and page. I will be only changing the primary and secondary color. I normally use coolors.co to find complementary colors for all the projects I’ve ever done.

Disclaimer: Do not add more than those 5 colors to the object, as this causes multiple copies of components to be made for each of these colors. It will eventually add unwanted bulk to the project, as not all components with all colors are used. If you need to use more colors, add a new variable to hold only that color literal.

The colors I will be using are;

$colors: (
primary: #32B596,
secondary: #fff350,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);

The first place to splash some color is the top navbar.

Boring…
Ooh la la!

Looked so bland right?😬

Not any more.😎😎

All you need to do is add the color primary to the ion-navbar tag, like so;

<ion-navbar color='primary'>

You can add the color property similarly to other components. Such as, give the delete icon the color stored in danger, or the add and logout button the color in secondary;

Adding colors everywhere!

I still hate the way that the logout button looks… To make it a proper button, simply add the property solid to the tag, like so;

<button ion-button solid color='secondary' (click)="logout()">Logout</button>
Buttons must look like buttons!

Another cool UI design I saw previously, had icons before each input tag on the login, register and reset password pages, so I decided to give that a try as well! It’s a pretty simple code, that you need to add within the <ion-item> tag but before the <ion-input> tag, like so;

<ion-item>
<div class="item-note" item-start>
<ion-icon name="at" color='primary'></ion-icon>
</div>
<ion-input formControlName="email" ...></ion-input>
</ion-item>

There is no icon that screams password, so I decided to use 🔒 just like in the UI design I had a look at; and 👤 for the users’ names

Input icons of the register page

Step 2 — Making it picturesque

A picture says a thousand words…

But we have no need for such pictures…. 🤔

No matter!

Adding pictures are not necessarily tough, but the path may get a bit confusing sometimes. You would assume that you need to add the actual path from the page to the image folder, which is ../../assets/imgs/imagename.png. The path you really need to add is the path from the app.html to the image in the image folder, and that path looks like assets/imgs/imagename.png.

Any and all images you wish to use needs to be added to the folder src/assets/imgs. You can then use the image as if this was HTML;

<img src="assets/imgs/imagename.png"/>

I want to add an image, kinda like a logo, to the login, register and reset password pages.

So that the image doesn’t exceed the page, we will also need to code some styling, and as this image will be in more than one page, we are required to write the styling in the app.scss page like so;

.imageTop {
height: 200px;
padding: 20px;
margin: auto;
display: block;
}

All you need to do now is simply add the class to the img tag, class='imageTop'.

Another image (or two) that you might want to change, is the splash page and app icon. You will first need to add either (or both) Android and iOS platforms, to use this feature. The command to add a platform is

ionic cordova platform add android

Or ios, if that’s your cup of ☕.

Ionic can easily generate different sized splash pages and icons according to different phones when you run the command ionic cordova resources in the terminal. You will need internet for this, as ionic uploads both images to be analyzed to generate the other splash pages and icons.

Before that you need to add both the images, named splash.png and icon.png to the resources folder. The sizes of both images should be 2732*2732 and 1024*1024 respectively, for the many splash pages and app icons to be generated.

That’s all for images!

Step 3 — Typography Rox(cks)!

First, find a font that speaks to you. The latest trends stick to sans serif fonts that are pretty easy to read. As pretty as many handwritten flowy fonts are, they are just a fail waiting to happen, like this one….

I love 🐮too!

Or this one,

Hope has never looked so bleak!

🤣🤣🤣

Jokes aside, I picked the font ‘Alegreya Sans’ to use for this app. It can be found, here.

Unpack all the fonts to the folder assets/fonts.

All you need to do now is add the code below to the variables.scss found in the src/theme folder.

@font-face {
font-family: 'Alegreya Sans Regular';
src: url("../assets/fonts/AlegreyaSans-Regular.otf");
}$font-family-base: 'Alegreya Sans Regular';
$font-family-ios-base: 'Alegreya Sans Regular';
$font-family-md-base: 'Alegreya Sans Regular';
$font-family-wp-base: 'Alegreya Sans Regular';

The @font-face imports your font and gives it a name, so it can be used throughout the application.

The variable $font-family-base assigns the default font.

No one needs to see that password!

The app now looks like this;

As you can only view the splash page and icon on a real device, I have brought in my trusty phone into the mix (Sadly it ain’t an Apple to fit with the rest of the gifs/pics).

And that’s it for this series!!!!!😁😁

Find the commit for this post, here.

I hope you all had fun and learned a lot on this journey with me!

I will be starting a new series soon, so I will keep you guys posted with the next link right here.

Thank you for the read, and see you soon!😘😘

Front End Developer at Switchd Ltd. | MSc in Computer Science @ QMUL (2022)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store