In the previous lessons, we have made the resume editable. The user can change the text and add or remove sections. In this lesson, we will also make the styling configurable. This way, every user can create their own unique resume look!

We will give the user the following options:

First, we want to add a sidebar where the user can find all the editing options. We want this sidebar to appear on the left side of the screen.

For this, we need to create a new component called 

<template>
    <div class="sidebar">
     placeholder
    </div>
</template>


<style scoped>
.sidebar {
  width: 300px;
  padding: 20px 20px 20px 30px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgb(230, 230, 230);
}
</style>

In order to prevent overlap with the resume, we will move the resume 

 to the very right of the container, with 

Starting from a bigger screen size, however, this will create too much distance between the sidebar and the resume. Therefore, we center the resume in the container starting from a screen width size of 1600px.

#resume {
  ...
  margin-left: auto;
}

@media (min-width: 1350px) {
  #resume {
    margin-left: 300px;
  }
}

@media (min-width: 1600px) {
  #resume {
    margin-left: auto;
    margin-right: auto;
  }
}

We created the sidebar, but now it is time to add the content.
The first component we want to display in the sidebar is the edit toggle. To display other elements in the sidebar, we add slot tags.

And there we have it! One more thing I noticed here: The resume content is overflowing the resume in edit mode, because of the edit buttons.
Let's tie the height CSS rule for the resume to the edit mode. We only need a fixed height when edit mode is off.

To make the colors adjustable, we start by moving the hex codes of the colors used in the resume in the 

 component's state.
The left and the right column can be styled differently, so we create a nested object 

data() {
    return {
      colors: {
        left: {
          highlight: "#82C0CC",
          text: "#ffffff",
          background: "#3943B7"
        },
        right: {
          highlight: "#3943B7",
          text: "#000505",
          background: "#ffffff"
        }
      }
      ...
    }
}

We must find a way to have our stylesheet use these values. In a previous lesson, we set CSS variables for these colors in main.css on the root element.

:root {
  --highlight-color-left: #82c0cc;
  --background-color-left: #3943b7;
  --text-color-left: #ffffff;
  --highlight-color-right: #3943b7;
  --background-color-right: #ffffff;
  --text-color-right: #000505;
}

We were able to reference these in our CSS rules anywhere, such as in our 

.right-col .section-headline {
    color: var(--highlight-color-right);
}

While it is a common practice to declare the 

 pseudo-class, we could also define the variables on any element.

All the children of the element will have access to those variables.

Since we need the children of the resume element to have access, we can define the variables on the 

 element. This is the outer wrapper for all resume content.

We want to set the CSS variables with an inline style. Let’s use a static value to test it out first. Now we can delete the variable from main.css, and you see that the primary color is now read from the 

In order to tie values from the data object to inline style, we can use the 

.
The value needs to be a JavaScript object.

Now, the color is displayed dynamically, but we need a color input so that the user can adjust the color.
To isolate the markup and styling of this color input, we create a new component, 

. Even though it is not often used, HTML actually has an input element of type color that we can use in our component.

In the new component, we add a template section with an input element of type color and a label. By wrapping the input in the label, we don't need to add the for attribute to the label element.

<template>
    <label>
        <input type="color">
        Choose a color
    </label>
</template>

 component and display it within the sidebar. Since our sidebar component contains a slot, we can add it in between the component tags.

The default styling does not look great, so let's add a scoped style section and give the input element the class 

.
By inspecting the default styling in the browser, we can figure out which styling we need to overwrite. 

.color-picker {
    margin-right: 10px;
    width: 26px; /* offset strange height, width difference */
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
}

Since we will reuse this component for configuring the other colors as well, we will have to make the text adjustable.
We can use a prop for this.

We create a script section and add a prop with the name “label” to it. Let's give the prop a type of 

 and a default value of "Choose a color".

We print out the label prop after the color input. To overwrite the default value, we pass the label prop with the value "Highlight color" to the ColorInput component.
Make sure to never use 

, when you are passing a static string value.
Otherwise, Vue will try to interpret the value as JavaScript and throw an error.

---
title: Make styling configurable
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/3WPW20254FsnOwMEx1sg2iPAIfgoLj02v02M002dHBpzy2c.m3u8
description: Make styling configurable with Vue.js class and style binding. Create a color input component, a select component, and more.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-8-starting-code?ref_type=heads
---

## Make styling configurable

In the previous lessons, we have made the resume editable. The user can change the text and add or remove sections. In this lesson, we will also make the styling configurable. This way, every user can create their own unique resume look!

We will give the user the following options:

-   Changing colors
-   Width of the left column
-   Headline thickness
-   Photo shape round or square

First, we want to add a sidebar where the user can find all the editing options. We want this sidebar to appear on the left side of the screen.

For this, we need to create a new component called `Sidebar`.

```html
<template>
    <div class="sidebar">
     placeholder
    </div>
</template>


<style scoped>
.sidebar {
  width: 300px;
  padding: 20px 20px 20px 30px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgb(230, 230, 230);
}
</style>
```

We must import and register it in the `App` component.

I will add it to the top of the `main` element.

```html
<main class="container">
    <Sidebar />
...
</main>
```

In order to prevent overlap with the resume, we will move the resume `div` to the very right of the container, with `margin-left: auto;`.

Starting from a bigger screen size, however, this will create too much distance between the sidebar and the resume. Therefore, we center the resume in the container starting from a screen width size of 1600px.

```css
#resume {
  ...
  margin-left: auto;
}

@media (min-width: 1350px) {
  #resume {
    margin-left: 300px;
  }
}

@media (min-width: 1600px) {
  #resume {
    margin-left: auto;
    margin-right: auto;
  }
}
```

We created the sidebar, but now it is time to add the content.
The first component we want to display in the sidebar is the edit toggle. To display other elements in the sidebar, we add slot tags.

```html
<template>
    <div class="sidebar">
        <slot></slot>
    </div>
</template>
```

In the `App` component, we can now move the `EditToggle` in between the `Sidebar` tags.

```html
<Sidebar>
    <EditToggle @edit-mode-toggled="toggleEditMode" />
</Sidebar>
```

And there we have it! One more thing I noticed here: The resume content is overflowing the resume in edit mode, because of the edit buttons.
Let's tie the height CSS rule for the resume to the edit mode. We only need a fixed height when edit mode is off.

### Changing colors

To make the colors adjustable, we start by moving the hex codes of the colors used in the resume in the `App` component's state.
The left and the right column can be styled differently, so we create a nested object `colors` with a `left` and a `right` property that each
hold values for `highlight`, `text`, and `background`.

```javascript
data() {
    return {
      colors: {
        left: {
          highlight: "#82C0CC",
          text: "#ffffff",
          background: "#3943B7"
        },
        right: {
          highlight: "#3943B7",
          text: "#000505",
          background: "#ffffff"
        }
      }
      ...
    }
}
```

We must find a way to have our stylesheet use these values. In a previous lesson, we set CSS variables for these colors in main.css on the root element.

```css
:root {
  --highlight-color-left: #82c0cc;
  --background-color-left: #3943b7;
  --text-color-left: #ffffff;
  --highlight-color-right: #3943b7;
  --background-color-right: #ffffff;
  --text-color-right: #000505;
}
```

We were able to reference these in our CSS rules anywhere, such as in our `SectionHeadline` component.

```css
.right-col .section-headline {
    color: var(--highlight-color-right);
}
```

While it is a common practice to declare the [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) on the `:root` pseudo-class, we could also define the variables on any element.

All the children of the element will have access to those variables.

Since we need the children of the resume element to have access, we can define the variables on the `div#resume` element. This is the outer wrapper for all resume content.

We want to set the CSS variables with an inline style. Let’s use a static value to test it out first. Now we can delete the variable from main.css, and you see that the primary color is now read from the `div#resume`.

```html
<div
	class="resume d-flex"
	style="--highlight-color-right: #3943b7">
    ...
</div>
```

In order to tie values from the data object to inline style, we can use the `v-bind:style` or just `:style`.
The value needs to be a JavaScript object.

```html
<div
	class="resume d-flex"
	:style="{'--highlight-color-right': colors.right.highlight}">
    ...
</div>
```

Now, the color is displayed dynamically, but we need a color input so that the user can adjust the color.
To isolate the markup and styling of this color input, we create a new component, `ColorInput.vue`. Even though it is not often used, HTML actually has an input element of type color that we can use in our component.

In the new component, we add a template section with an input element of type color and a label. By wrapping the input in the label, we don't need to add the for attribute to the label element.

```html
<template>
    <label>
        <input type="color">
        Choose a color
    </label>
</template>
```

Let's import this component into the `App` component and display it within the sidebar. Since our sidebar component contains a slot, we can add it in between the component tags.

```html
<Sidebar>
  <EditToggle @edit-mode-toggled="toggleEditMode" />
  <ColorInput />
</Sidebar>
```

The default styling does not look great, so let's add a scoped style section and give the input element the class `color-picker`.
By inspecting the default styling in the browser, we can figure out which styling we need to overwrite. 

```css
.color-picker {
    margin-right: 10px;
    width: 26px; /* offset strange height, width difference */
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
}
```

Since we will reuse this component for configuring the other colors as well, we will have to make the text adjustable.
We can use a prop for this.

We create a script section and add a prop with the name “label” to it. Let's give the prop a type of `String` and a default value of "Choose a color".

We print out the label prop after the color input. To overwrite the default value, we pass the label prop with the value "Highlight color" to the ColorInput component.
Make sure to never use `v-bind`, when you are passing a static string value.
Otherwise, Vue will try to interpret the value as JavaScript and throw an error.

Once the color changes, our ColorInput component should inform the parent component. Let’s first check how we can access the color. 

```html
<input
	type="color"
	class="color-picker"
	@change="console.log($event.target.value)">
```

With `$event.target.value`, we can access the hex code of the newly picked color. 

Once my mouse leaves the color input picker, the change event fires.
The problem with using the change event is that we don't see the effect while we move the color picker. Only once we have chosen a color and left the input field the change becomes visible. By using the `input` instead of the `change` event, the event fires with every move of the color picker, and we can preview the effect as we drag the color picker.
We logged the value to understand when the event fires, but what we actually need is for our component to emit the value.
We will call the custom event `colorChanged`.

Katharina

Make styling configurable with Vue.js class and style binding. Create a color input component, a select component, and more.

Make styling configurable

In the previous lesson, we have made the resume editable.

The user can change the text and add or remove sections.

In this lesson, we will also make the styling configurable.

This way, every user can create their own unique resume look.

We will give the user the following options.

Changing colors, changing the width of the left column,

changing the headline thickness, and choosing if the photo is round or square.

First, we want to add a sidebar where the user can find all the editing options

We want this sidebar to appear on the left side of the screen.

For this, we need to create a new component called sidebar.

We must import and register it in the app component.

I will add it to the top of the main element.

In order to prevent overlap with the resume, we will move the resume diff to

the very right of the container with margin left auto.

Starting from a bigger screen size, however, this will create too much distance

Starting from 1,600 pixels width, we center the resume in the container.

We created the sidebar, but now it is time to add the content.

The first component we want to display in the sidebar is the edit toggle.

To display elements within the sidebar, we add slot tags.

In the app component, we can move the edit toggle in between the sidebar tags.

The resume content is overflowing the resume in edit mode because of the edit

Let's tie the height CSS rule for the resume to the edit mode.

We only need a fixed height when the edit mode is off.

To make the colors adjustable, we start by moving the hex codes of the colors

used in the resume in the app component state.

The left and the right column can be styled differently.

So we create a nested object, colors, with the left and right property, that

each holds values for highlight, text and background.

We also provide a set of values for highlight.

We provide a set of values for highlight, text and background.

We provide a set of values for highlight.

We set CSS variables for these colors and main CSS on the root element.

We are able to reference these in our CSS roots anywhere, such as in our

While it is a common practice to declare the CSS variables on the root pseudo

class, we could also define the variables on any element.

We provide the children of the element, we'll have access to those variables.

Since we need the children of the resume element to have access, we can define

the variables on the div with the idea resume element.

This is the outer wrapper for all resume content.

We want to set the CSS variables with an inline style.

Let's use a static value to test it out first.

We can delete or comment out the variable from main CSS, and you see that the

primary color is red from the div resume.

In order to type values from the data object to inline style, we can use the v

The value needs to be a JavaScript object.

We need a color input so that the user can adjust the color.

To isolate the markup and styling of this color input, we create a new

Even though it is not often used, HTML actually has an input element of type

In the new component, we add a template section with an input element of type

By wrapping the input in the label, we don't need to add the four attribute to

Let's import this component into the app component and display it within the

Since our sidebar component contains a slot, we can edit and between the

The default styling does not look great, so let's add a scoped style section

and give the input element the class color picker.

In the default styling in the browser, we can figure out which styling we need

We can use the default styling to make sure that it is not the same.

We can use the default styling to make sure that the color is not the same.

Since we will reuse this component for configuring the other colors as well,

we have to make the text adjustable. We can use a prop for this.

We create a script section and add a prop with the name "Labor to it".

Let's give the prop a type of string and a default value of choose a color.

We print out the label prop after the color input.

To override the default value, we pass the label prop with the value "Highlight

Make sure to never use VBIND when you are passing a static string value.

Otherwise, you will try to interpret the value as a JavaScript variable and

Once the color changes, our color input component should inform the parent

Let's first check how we can access the color.

With dollar sign event.target.value, we can access the hex code of the newly

Once my mouse leaves the color input picker, the change event fires.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript