×
Back to book

Custom Component Styling

This article talks styling components differently to your liking and overriding Harmony. It also teaches you how to style the collection component and the navigation component to your liking.

This article will show you how to customise the style of components in your application. We are going to use Fishnatics as an example.

At this stage, you can find the class names you require by exploring the default harmony styles located in your target project in the /scss/ folder. Alternatively, you can inspect the existing elements to find the classes to overwrite.

We will be adding our custom styles to the collection component list view and the navigation bar.

Styling Collection Component (List View)

The collection component is one of the core components of the CRUD behaviour. In this demo, we will remove the grey background on the header and give it a border bottom.

  1. In your parent scss folder, you will find a templated file for each Codebots component. The collection list view file is located at scss/components/collection-view/collection-list-view.scss. You can see the templated code that are already written to style the collection list.
  2. Turn on the protected region [Change collection list view styles here] find the following thead { line and within the brackets replace the background colour and add the border:
    thead {
     background-color: transparent; //change this background colour to transparent
     border-bottom: convert-rem(2px) solid $color-secondary; //change border colour to color-secondary
    }

Styling Navigation

We will now remove the grey background from the navigation bar, add a drop shadow and change the text colour.

  1. Open the navigation bar template file, located at /scss/components/nav/expanded-navigation.scss. This file only styles the sidebar menu.

  2. Turn on the protected region [Change expanded navigation styles here]. Locate the class .nav.nav--vertical and in the brackets add the following code:

    .nav--vertical {
     background-color: transparent;
     box-shadow: 0px 0px 8px -2px $grey-6;
    }
  3. Direct yourself to the following file: /scss/components/nav/navigation.scss. This file styles all navigation components.

  4. Turn on the first protected region [Change generic navigation styles here] and find the second a { sitting in the <li> tag and change the color: rgba($color-primary, 0.7) to color: $black. It should look like this:

    a {
     color: $black; // change colour here
     text-decoration: none;
     padding: $space-xxs;
     display: block;
     cursor: pointer;
     transition: none;
     border-bottom: none;
    }