Violet
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.
Last updated
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.
Last updated
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
If you are using Violet for Oxygen Builder, then you will need to have purchased the Oxygen Integration addon.
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'.
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'.
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.
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.
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:
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.
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:
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.
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.
If you are using Violet for Bricks Builder, then you will need to have purchased the Bricks Integration addon.
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.
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'.
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)
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.
To set the author page for Oxygen, you will need to add it as a template and set the rules below:
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:
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.
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.
On this element, you will need to change the values of the attributes to your liking:
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.
You should place your Inner Content inside the Flex Row → Content Container elements, below the Header 6 element.
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.
