# Violet

Meet the expansive **Violet UI Kit** for Core Framework, featuring  multitude of modern sections to rapidly build sleek and beautiful websites. This kit boasts expandable navigation elements, JavaScript-based progress bars, and customizable tags using data attributes.

**✅ Features:**

* Expandable Navigations
* Animated Progress Bars
* Editable Tags using Data Attributes
* Mega Menus

## Video Installation Guide

{% embed url="<https://youtu.be/ABaSyANg69w?si=-OQANiIgpD6o6fRx>" %}
Step by step instructions to set up and install Violet.
{% endembed %}

## Installation Guide for Oxygen 🟪

{% hint style="danger" %}
If you are using Violet for Oxygen Builder, then you will need to have purchased the [Oxygen Integration addon](https://coreframework.com/marketplace/oxygen-builder-addon).
{% endhint %}

### 1. Oxygen Builder

Please make sure you have installed and activated Oxygen Builder. You will need to navigate to **Oxygen** → **Settings** → **Library** → set '**Enable 3rd Party Design Sets**' → **Add Design Set** → and paste in your Violet site key before clicking on 'Add Source Site'.

### 2. Core Framework

1. Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FIyufn6uDo6VNo6FGRwcz%2FSetup%20CoreFramework.jpeg?alt=media&#x26;token=1207c45c-ffd4-40aa-a223-30f0455cfb58" alt=""><figcaption></figcaption></figure>

2. Next, kindly navigate to **Core Framework** → **Addons** and enter your license key for the Oxygen Builder Integration add-on. Don't forget to hit '**Save Changes'**.
3. Then, navigate to **Core Framework** → **Manage Project**. Here, you can import the **Violet.core** project file. Click '**Overwrite**' and then '**Save Changes'**.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FFkEsGKsZBTCmmoCd6lwB%2F596shots_so.png?alt=media&#x26;token=10f1185d-0a82-41f2-ab1c-bdda2821cc46" alt=""><figcaption><p>Import the .core file, click overwrite all, and don't forget to hit 'Save Changes'</p></figcaption></figure>

### 3. Import Global Styles

In order to streamline your setup, please use our blueprint Global Styles file for Oxygen Builder so that the necessary styles are applied globally. You can do this by navigating to the Oxygen Export & Import section under Oxygen from the WordPress dashboard and copying the JSON from our blueprint.

{% hint style="info" %}
[Please find our blueprint JSON here and instructions on how to import.](https://docs.coreframework.com/builder-integrations/oxygen-builder#option-1-import-our-blueprint)
{% endhint %}

### 4. Create a Global Stylesheet

Please go ahead and create a Global Stylesheet either in the Oxygen Builder (Stylesheet -> Add Stylesheet) and name it something like Violet-Styles, or you can use a code editor such as WPCodeBox. Whatever you choose, please add the CSS below so that some imported sections can work as intended.

```css
.text-link--icon-right > .ct-fancy-icon {
    transition: transform 0.4s;
}
.text-link--icon-right:hover > .ct-fancy-icon {
    transform: translateX(3px);
}
.c-v-text-link--il > .ct-fancy-icon {
    transition: transform 0.4s;
}
.c-v-text-link--il:hover > .ct-fancy-icon {
    transform: translateX(-3px);
}
.text-gradient--primary{
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
    background-image: linear-gradient(120deg, var(--primary), var(--primary-l-2));
}
.text-tag--primary:after{
    padding: 4px 6px;
    border-radius: var(--radius-s);
    margin-left: var(--space-2xs);
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: uppercase;
    background-color: var(--primary-10);
    color: var(--text-body);
    border: 1px solid var(--primary);
    font-weight: 500;
    content: attr(data-tag);
    margin-top: auto;
    margin-bottom: auto;
}
.text-tag--secondary:after {
    padding: 4px 6px;
    border-radius: var(--radius-s);
    margin-left: var(--space-2xs);
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: uppercase;
    background-color: var(--secondary-10);
    color: var(--text-body);
    border: 1px solid var(--secondary);
    font-weight: 500;
    content: attr(data-tag);
    margin-top: auto;
    margin-bottom: auto;
}
.pill-primary {
    background-color: var(--primary-10);
    padding: 5px 10px;
    font-size: var(--text-s);
    color: var(--text-body);
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: middle;
    border: 1px solid var(--primary);
}
.pill-secondary {
    background-color: var(--secondary-10);
    padding: 5px 10px;
    font-size: var(--text-s);
    color: var(--text-body);
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: middle;
    border: 1px solid var(--secondary);
}
```

### 5. Blog Templates

When adding blog templates, you will need to make sure that you have the correct settings applied. There are two main blog types: **Blog Archive template**, which generally displays all of your blog posts on the page, and **Single Blog template**, which is the layout of a single blog post.

#### Blog Archive Template

To add a blog archive, add a new Oxygen Template by navigating to **Oxygen -> Templates -> Add New Template**. Give it an appropriate name, such as 'Blog Archive', and make sure to inherit your Main template. Then, under **Archive,** check **Post Types** and add **Posts:**

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FjwsRYgeX54RKQCL0tQey%2F632shots_so.png?alt=media&#x26;token=8a80ab7e-8c57-4219-ac43-4de534c246ea" alt=""><figcaption><p>This is how your settings should look for the Blog Archive.</p></figcaption></figure>

{% hint style="warning" %}
**Regarding Pagination:** a blog archive may sometimes have pagination. If you are using pagination, then it is important that your Repeater element is set to 'Default' for the query.
{% endhint %}

#### Single Blog Template

To add a Single Blog template, once again, let's add a new template by navigating to **Oxygen -> Templates -> Add New Template**. Give it an appropriate name, such as 'Single Blog', and make sure to inherit your Main template. Then, under **Singular,** check **Posts:**

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FLSC1VufZMevbvlH10UWc%2F637_1x_shots_so.png?alt=media&#x26;token=5c4373c9-848f-4ff0-b9bc-efdc77e3a741" alt=""><figcaption><p>This is how your settings should look for the Single Blog template.</p></figcaption></figure>

#### Importing the Templates

Finally, you can choose the appropriate templates from Violet's Design Set to add to these templates, which will be located inside Oxygen Builder by navigating to **Add Element -> Library -> Design Sets -> Violet - CF -> Templates**.&#x20;

### 6. Fluent Forms (Optional)

Some sections use a pre-made shortcode from fluent forms, and it's important to set the widths of the columns within Fluent Forms itself to get the best look. Once you have installed the free version of Fluent Forms, navigate to Fluent Forms → All Forms → Subscription Form → Edit. Once the Editor is loaded, you should edit the main container and set the columns to a 70:30 ratio.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2F4D4iYYWOmGEzWbK2P7ls%2F252shots_so.png?alt=media&#x26;token=109b080b-36da-42b7-a6fc-43d7c004ee2c" alt=""><figcaption><p>Please set the columns in Fluent Forms to replicate the above screenshot</p></figcaption></figure>

## Installation Guide for Bricks 🟨

{% hint style="danger" %}
If you are using Violet for Bricks Builder, then you will need to have purchased the [Bricks Integration addon](https://coreframework.com/marketplace/bricks-builder-addon).
{% endhint %}

### 1. Bricks Builder

Please make sure you have installed and activated Bricks Builder. Then, navigate to **Bricks** → **Settings** → **Templates** → Enter the **URL** and **Password** in the Remote templates section. We also recommend using '**Violet**' in the Name field. Be sure to click on **Save Settings**.

### 2. Core Framework

1. Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FIyufn6uDo6VNo6FGRwcz%2FSetup%20CoreFramework.jpeg?alt=media&#x26;token=1207c45c-ffd4-40aa-a223-30f0455cfb58" alt=""><figcaption></figcaption></figure>

2. Next, kindly navigate to **Core Framework** → **Addons** and enter your license key for the Bricks Builder Integration add-on. Don't forget to hit '**Save Changes'**.
3. Then, navigate to **Core Framework** → **Manage Project**. Here, you can import the **Violet.core** project file. Click '**Overwrite**' and then '**Save Changes'**.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FFkEsGKsZBTCmmoCd6lwB%2F596shots_so.png?alt=media&#x26;token=10f1185d-0a82-41f2-ab1c-bdda2821cc46" alt=""><figcaption><p>Import the .core file, click overwrite all, and don't forget to hit 'Save Changes'</p></figcaption></figure>

### 3. Import Theme Styles

In order to streamline your setup, please use our blueprint Theme Styles file for Bricks Builder so that the necessary styles are applied globally. Please follow the instructions on the page linked below:

{% hint style="info" %}
[Please find our blueprint JSON here and instructions on how to import.](https://docs.coreframework.com/builder-integrations/bricks-builder#option-1-import-our-blueprint)
{% endhint %}

### 4. Create a Global Stylesheet

Please [copy the global CSS from above](https://docs.coreframework.com/official-ui-kits/violet#id-4.-create-a-global-stylesheet) and paste it to your install. For Bricks, there are two options, from the WordPress dashboard:

1. Appearance -> Customize -> Additional CSS
2. Bricks -> Settings -> Custom Code (at the bottom, there is an option for Custom CSS)&#x20;

## Author Page

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2F0mCBf2pNzdhaZWWXdlif%2F53shots_so.jpg?alt=media&#x26;token=305987c0-40b2-41bf-9940-8a7dbd0e1faf" alt=""><figcaption><p>Here is how the author page looks from the front-end</p></figcaption></figure>

Violet comes with a fully-dynamic author page which brings in statistics for the author template. These statistics include:

* Avatar
* Full Name
* Total Posts
* Last Post
* Account Created
* Biography
* Latest Blog Posts (Repeater/Loop)

To edit the statistics, simply click on the relevant element to see the code blocks which make up the element. These code blocks contain the PHP which you are completely free to edit to your needs.

### Oxygen Template

To set the author page for Oxygen, you will need to add it as a template and set the rules below:

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FKC8AHqxS0V4eViqWkZXV%2F17shots_so.jpg?alt=media&#x26;token=37f48297-1f74-4ab0-999f-fa0962cd20c7" alt=""><figcaption></figcaption></figure>

### Bricks Template

To set the author page for Bricks, you will need to set the template to 'Archive':

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FsJGkMSmhfWy8AZpPd4ij%2F791shots_so.jpg?alt=media&#x26;token=551622bd-fbac-4014-b3c2-390a73393663" alt=""><figcaption></figcaption></figure>

Next, in the Bricks editor, click on the gear icon > template settings > populate content. To preview the page in the builder, let's set the 'Content type' to 'Archive (author)' and then set the 'Author' to any user to see the preview:

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2F0QfqoSa2b1w0wpeu3pMT%2F579shots_so.jpg?alt=media&#x26;token=2288591e-c70e-49e2-b63d-4477b762c9c3" alt=""><figcaption></figcaption></figure>

## Additional Features of Violet

### Adding Tags

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FKzY8ZVAOLVSKJJr82Iil%2F831shots_so.png?alt=media&#x26;token=160ece24-987c-4b07-b7d9-edd1a179aa17" alt=""><figcaption><p>Adding Tags couldn't be simpler!</p></figcaption></figure>

To add a tag to your links or elements, you will need to add a specific class. Two classes are available, both for the primary color and the secondary color:

* `.text-tag--primary`
* `.text-tag--secondary`

Once you have added one of the classes from above to the element, you can then go to the element's ID and add an attribute. The attribute required is `data-tag`

You can then use any value that you wish! The value will be the text displayed inside of the tag.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FtkGbWSpKGWcknqRD0Hjw%2F855shots_so.png?alt=media&#x26;token=697b5845-9245-44e7-b9f5-8197a3031d23" alt=""><figcaption></figcaption></figure>

### Progress Bars

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FPA6NWJO0BNxafzCatvnj%2F977shots_so.jpg?alt=media&#x26;token=31ea8cbf-65d6-4183-8d8c-ee8e6686fbea" alt=""><figcaption><p>Our responsive and animated progress bars are easy to set up!</p></figcaption></figure>

**Easy to Control**

Just like the tags, we can control the values of these progress bars from the Attributes tab. This means you can use dynamic data for the values which gives you great control!

1. Import one of the sections from Add → Library → Design Sets → Violet → Numbers/Counters (Numbers 4 or Numbers 5).
2. Once imported, click on one of the progress bars (the pink bar) - it will be labelled "Progress Bar" in the Structure Pane.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FrXpd6CFebjrP9MPryLsg%2F737shots_so.png?alt=media&#x26;token=4b41f256-cdbf-4a0d-8c50-3eef4ad6a0d0" alt=""><figcaption><p>This example shows the Structure Pane of Oxygen Builder</p></figcaption></figure>

3. On this element, you will need to change the values of the attributes to your liking:

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FLRXV0zuuTNhXdlftj05E%2F710shots_so.png?alt=media&#x26;token=5f00500f-40ec-4f1a-a42c-e93f4f4515a0" alt=""><figcaption></figcaption></figure>

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FvlyRvfefM0o70vR8PsS1%2F766shots_so.png?alt=media&#x26;token=349e7c68-5f06-4ca5-abae-b9f095849aa6" alt=""><figcaption></figcaption></figure>

### Side Menus

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FCaDZ3d9ejwGzk7EfDXXN%2F555shots_so.png?alt=media&#x26;token=66335441-2466-48be-860f-cc50e98dff58" alt=""><figcaption></figcaption></figure>

**Where to Place your Inner Content/Footer**

It may be a little confusing on where to place your elements when using our side menus, so below are some pointers. We have a total of 3 sections with side menus, each listed below. These examples will show the setup for Oxygen Builder.

#### Header 6:

You should place your Inner Content inside the Flex Row → Content Container elements, below the Header 6 element.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FYnOXwpdG4FgZES1SG0wT%2F431shots_so.png?alt=media&#x26;token=e880ff8b-cfb9-4990-8c4d-5a319b577e82" alt=""><figcaption></figcaption></figure>

#### Header 7:

Just like Header 6, you should place your Inner Content inside the Flex Row → Content Container elements, below the Header 7 element.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FvMbB53601J9nX5bSFwt7%2F758shots_so.png?alt=media&#x26;token=4a729fab-5938-455b-bfa5-c920cc856fc9" alt=""><figcaption></figcaption></figure>

**Header 8:**

Similarly, you should place your Inner Content inside the Flex Row → Content Container elements, below the Header element.

<figure><img src="https://949277485-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp10Tm4nYjo9MojbZ6zQt%2Fuploads%2FjjY7Z0WUvfjUpJibXCWW%2F227shots_so.png?alt=media&#x26;token=b2ec893b-c7f4-461a-9a56-746c2bfbb1a8" alt=""><figcaption></figcaption></figure>