Violet is a versatile design set for Core Framework, featuring 150+ unique sections. It offers both a dark and light theme out of the box and includes a number of advanced sections.
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
Step by step instructions to set up and install Violet.
Installation Guide for Oxygen 🟪
If you are using Violet for Oxygen Builder, then you will need to have purchased the Oxygen Integration addon.
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
Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.
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'.
Then, navigate to Core Framework → Manage Project. Here, you can import the Violet.core project file. Click 'Overwrite' and then 'Save Changes'.
Import the .core file, click overwrite all, and don't forget to hit '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.
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.
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:
This is how your settings should look for the Blog Archive.
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.
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:
This is how your settings should look for the Single Blog template.
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.
Please set the columns in Fluent Forms to replicate the above screenshot
Installation Guide for Bricks 🟨
If you are using Violet for Bricks Builder, then you will need to have purchased the Bricks Integration addon.
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
Please install and activate the Core Framework plugin. Be sure to choose the Full experience option during onboarding.
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'.
Then, navigate to Core Framework → Manage Project. Here, you can import the Violet.core project file. Click 'Overwrite' and then 'Save Changes'.
Import the .core file, click overwrite all, and don't forget to hit '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:
Please copy the global CSS from above and paste it to your install. For Bricks, there are two options, from the WordPress dashboard:
Appearance -> Customize -> Additional CSS
Bricks -> Settings -> Custom Code (at the bottom, there is an option for Custom CSS)
Author Page
Here is how the author page looks from the front-end
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
Adding Tags couldn't be simpler!
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
Our responsive and animated progress bars are easy to set up!
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!
Import one of the sections from Add → Library → Design Sets → Violet → Numbers/Counters (Numbers 4 or Numbers 5).
Once imported, click on one of the progress bars (the pink bar) - it will be labelled "Progress Bar" in the Structure Pane.
This example shows the Structure Pane of Oxygen Builder
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.
