Dynamik Website Builder 1.6 was just released at the end of May, and the main highlight from it is first class support for Dynamik Skins. This is very exciting news for the Dynamik community. As users, we will likely see the proliferation of exciting new skins we can use on our sites. And it also gives developers the potential to create a new market for designing and selling premium Dynamik skins.
What are Dynamik Skins?
Just as Genesis child themes can provide a completely new look and feel for Genesis framework powered sites, Dynamik skins allow you to create custom styles and functionality for sites using the Dynamik child theme.
Wait, didn’t Dynamik have this sort of capability before?
Well, sort of.
In previous versions of Dynamik you could export your Design Options and Custom Settings into a standalone file which you could then re-import back. This is what I did when I created my eleven40Pro Dynamik Child theme.
Once imported, all of your design options, custom CSS and custom functions would all be merged together with your current site’s options. But if you did that there was no way to tell what CSS came from the “skin” and what CSS came from some other source.
In Dynamik 1.6, skins are actual standalone entitites that can be activated and uninstalled on their own, similar to installing a new WordPress theme. They can even have their own custom skin screenshot which now shows up in the new Skins tab in the Design options.
Creating Your Own Dynamik Skin
Designing and developing your own Dynamik Skins is very simple so I expect we will see a lot of free and premium skins popping up in the future. Below is the process for creating one.
Step 1 – Use Design Options to Customize Your Skin
Customize your site the way you always have. Use the Design Options to create the look and feel that you desire. If you have any additional CSS to add, continue to take advantage of the live CSS editor to do this.
Step 2 – Create and Activate your Skin
Go to the Skins tab in the Design Options, type in your new skin name and press the Create & Activate button.
This will automatically activate your skin under this new name. It will also create a new folder for your skin called wp-uploads/dynamik-gen/skins/your-skin-name.
Step 3 – Add a Skin Screenshot
To add a screenshot of your skin, first create a png file using your favorite image editor and name it skin-screenshot.png. Then upload it to your skin folder mentioned in Step 1.
If you did it correctly, you should see your screenshot appear when you reload the Skins tab in your browser.
Step 4 – Copy Over Any External CSS, Custom Functions, Custom JS
Any Dynamik Skin can include these 3 (optional) files located inside of your skin folder.
styles.css (for custom CSS)
functions.php (for custom functions)
If you have added any CSS, JS or custom functions to your skin, you will want to to make use of these files. This allows you to keep this code separate from end-users who are using your skin and adding their own customizations.
For example, if you have added some external CSS, make sure to create the file styles.css and copy over your CSS code into that file.
Step 5 – Export Your Skin
Go to the Imp/Exp tab in the Design options. Type in a name for your skin, make sure the Settings only checkbox is unchecked and click the Export Skin button. A zip file of your skin should then be downloaded to your computer.
Your skin can now be imported by other users using the Import Skin button on the same page.
I’m very excited to see Dynamik skins becoming a more prominent part of the Dynamik ecosystem. Since Dynamik makes it so easy to customize sites using it’s no coding design options, I can see even novice designers being able to create some very cool skins.
What do you think about the introduction of Dynamik Skins? Will you try creating some of your own?