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

Installation Guide for Oxygen 🟪

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.

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'.

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.

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.

.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:

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:

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.

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.

Installation Guide for Bricks 🟨

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.

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'.

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:

4. Create a Global Stylesheet

Please copy the global CSS from above 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)

Author Page

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:

Bricks Template

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

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:

Additional Features of Violet

Adding Tags

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.

Progress Bars

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.

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

Side Menus

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.

Header 7:

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

Header 8:

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