Skip to main content

2 posts tagged with "theming"

Show all Tags

How can I add a custom button type?

· 2 minutes of reading time
Martin Oppitz
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Basically, each component can be freely styled within its HTML structure.

With the help of our designer or the SCSS script, existing themes can be adapted or your own themes can be created.

Button and custom class​

The button/switch has 5 types derived from the design language of the design systems:

  • primary: switch for main action (e.g. save)
  • secondary: switch for secondary action (e.g. cancel)
  • normal/tertiary: switch for tertiary action (e.g. back)
  • danger: switch for "dangerous" actions (e.g. delete)
  • ghost: switch for "inconspicuous" actions (e.g. help)

In addition to these basic types, other types can be added using a custom class. To do this, however, all custom classes must be stored in the CSS of the theme.

In the implementation, a coordinated design system /design language should not be arbitrarily changed or expanded. All defined custom buttons will be already provided when the theme was created and their use is described in the documentation of your own design system.

Store custom class in the theme​

  1. Open Theme Designer
  2. Select theme
  3. Select Button component
  4. Switch to component styling
  5. Enter and save CSS for the custom button (look at primary)
  6. Theme in project übernehmen

Example of custom class loading:

.loading :is(a, button) > kol-span-wc kol-icon {
 animation: spin 2.5s infinite linear;
 display: block;
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */
@media (prefers-reduced-motion) {
 .loading :is(a, button) > kol-span-wc kol-icon {
  animation-duration: 5s;
 }
}
@keyframes spin {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(360deg);
 }
}

Use custom class​

To switch to custom mode, the property _variant must be set to custom. Thereafter any predefined custom classes can be passed via the property _custom-class.

<kol-button _custom-class="loading" _label="Save" variant="custom"></kol-button>

Style the icon in the button from the outside​

It is possible to transfer an icon style to the button. To do this, the desired style must be passed to the property _icon.

<KolButton
 _icons={{
  left: {
   icon: 'codicon codicon-home',
   style: {
    color: 'red',
    'font-size': '300%',
   },
  },
 }}
 _label="Switch with big red icon"
></KolButton>

How can I change icons in the theme?

· 3 minutes of reading time
Martin Oppitz
Martin Oppitz
Architekt@ITZBund & Creator of KoliBri

Today we want to show in a short blog post how you can change the default icons via the theming (Theme Designer).

1. Integrate icon font​

In order for icons to be displayed, the desired icon font (e.g. Font Awesome Free) must first be integrated into the website (HTML). This is usually done using the following HTML:

<head>
 <link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
</head>

Store icon font in the theme​

The KoliBri icon component encapsulates the icon font and therefore needs to know the CSS definitions of the icon identifiers selected in the design system. To do this, the CSS must be copied from the same CSS file as from 1. into the theme and stored with it.

  1. Open Theme Designer
  2. Select theme
  3. Select icon component
  4. Switch to component styling
  5. Paste CSS from icon font and save
  6. Apply theme to project

Change default icons in theme​

Changing an icon is easy if the following principle is clear. All icons are represented by the web component kol-icon. This component always exports the icon part. A part provides access to specified CSS properties within a web component. See that as an example like this:

kol-icon::part(icon) {
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
}
kol-icon::part(icon):before {
 content: '😃';
}

In order to change an icon via the designer, the following steps have to be carried out:

  1. Open Theme Designer
  2. Select theme
  3. Select component where an icon should be changed
  4. Switch to component styling
  5. Determine specific selector on an icon
  6. Use specific selector to customize font and content
  7. Save Component CSS
  8. Apply theme to project

Here is a more complex example of pagination:

kol-button::part(icon) {
 font-family: 'Font Awesome 6 Free';
 font-weight: 900;
}
kol-button.first::part(icon):before,
kol-button.previous::part(icon):before,
kol-button.next::part(icon):before,
kol-button.last::part(icon):before {
 content: '😃';
}

FAQ​

Why is the icon hanging a bit lower in the KolIcon?​

With the CSS definition display:contents; on the kol-icon tag, the icon is properly aligned. The alignment of the icon component within other components always depends on the specific use.

Why can't I change the font size?​

kol-icon::part(icon) {
 font-family: 'Font Awesome 6 Free';
 font-size: 2rem !important;
 font-weight: 900;
}

The reason lies in the font CSS definition in the icon font itself and in the need to set the font size apply (inherit) when setting icons from outside.

.codicon[class*='codicon-'] {
 font: 16px / 1 codicon;
}
:host > i,
:host > i::before {
 font-size: inherit !important;
}

If you want to adjust the size of an icon, you can do this from the outside.

kol-icon {
 font-size: 2rem;
}