Custom Component Styling

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
    }
   

We are also going to give the columns a limit in width for usability purposes

1. In the collection-list-view.scss file, search for min-width:15rem and right underneath it add

    max-width: 35rem;
   

   ### Styling Navigation

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

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

3. 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: convert-rem(0px) convert-rem(0px) convert-rem(8px) convert-rem(-2px) $grey-6;
    }
   

4. Direct yourself to the following file: /scss/components/nav/navigation.scss. This file styles all navigation components.

5. 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;
    }
   

6. Find the &:hover, &:focus, &:active, &.active right under the code above add the following

    &:hover,
    &:focus,
    &:active,
    &.active {
        background-color: $grey-2;
        @include transform-timing($animation-time);
   	
        a {
            color: $color-secondary;
            @include transform-timing($animation-time);
        }
   	
        //This is for sublinks
        ul li a {
            color: $white;
            transition: none;
        }
    }