Course Overview: Style and Theme Ionic v3 Applications

Customize Ionic v3 Default Theme Colors

Override Global SASS Variables in Ionic v3 Applications

Set Ionic v3 Config Parameters

Style an Ionic v3 Component on a Single Page

Align and Size Text with Ionic v3 CSS Utilities

Structure an Application UI with Ionic v3 Grid

Lay Out Content with Ionic v3 CSS Utilities

Align Elements with Ionic v3 Grid

First Look: Theming Ionic 4 applications

Style and Theme Ionic v3 Applications

Learn how to style an Ionic Component on a single page. Also, see how to inspect and then override a CSS value for an existing Ionic component.

Instructor: [00:00] When you need to style a component or a tag on a specific page, we can use the Sass file that is bound to that particular template. I have a simple three-tab application, with each tab with a similar design.

[00:14] Let's make the Ion card title tag on the goalstone page bolder by setting the font weight value. Saving, we can see the text is bolder on the goalstone page, while the same tag on the other two tabs is the default weight.

[00:34] Now, styling some Ionic components can be more difficult. Sometimes, the property that we want to change is not easily accessible, or is bound to a Sass variable. Since we cannot override a Sass variable for just one instance, we need to see what actually makes up the component's DOM.

[00:54] Let's inspect the list item. We can see it's actually made up several divs, in addition to the actual h2 and paragraph tags. I want to change the color of the bottom border of each list item. We can see that this is set mid-div, and by the CSS classes of list-md, item-block, and item-enter.

[01:18] I will copy this class chain, and add it to my Sass file. I will also add the iOS chain as well. I will then set the border bottom to be two pixels, solid, and black. Saving, we can see the change.

[01:39] Another thing to note, sometimes due to the order of the cascade, we may need to include the !important override, to your rule for the style to take effect.

Course

Style and Theme Ionic v3 Applications

Style an Ionic v3 Component on a Single Page

Share this video with your friends