Styling your application with CSS gives it a personalized touch. Learn how to use simple CSS and Sass adjustments to change the application's background, border, bar, and button colors with this video tutorial; these AngularJS adjustments will also let you round the edges of images, increase or decrease the font size, increase or decrease the margins, and modify the header.
- Although Ionic does a nice job…of making our application look good…most of the time you'll want to customize…the default styles just a little bit.…So there's a couple of ways that you can do this…and if you know Sass there's a CSS folder right here…where you can go in and customize any of the colors…and write your own CSS or Sass.…Now if you're gonna do that make sure you run…the Ionic setup Sass command from the Terminal…and then it will add Sass to your Gulp file,…and therefore your workflow.…Now it's just as easy to work with the CSS file,…so I'm just gonna modify that file,…which is in the CSS folder under style.css.…
So we've already done a couple of styles in here,…but I think there's a couple of things…that we can improve on a little bit.…I'm gonna add a body selector here…and I'm gonna modify the default cursor.…That way it'll show a finger…whenever you're interacting with this application.…So we'll type in url and actually link to…ionicframework.com…and we'll run to the finger.png file here,…and what that will do is just give you…
- Installing the development environment on Mac or PC
- Understanding the Ionic templates and CSS components
- Adding IonicIcons to a layout
- Adding tabs, cards, and lists
- Using form elements
- Building a single view app
- Implementing Pull to Refresh
- Creating a multi-tab app
- Styling the applications
- Deploying applications
Skill Level Intermediate
1. Getting Started
2. Using Ionic CSS Components
3. Building a Single-View App
4. Creating a Multi-Tab Application
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.