Dear bb-team
First of all: thanks a lot for that phenomenal feature!
I have one question. You write: ‘skin’ => ‘PATH_TO_CHILD_THEME/my-preset.css’,
Do I need to “handcode” that file ‘my-preset.css’? Or is there a way of setting up a layout with your customizer and then exporting it to that css-file? Can your export-plugin been used for that?
Thanks a lot - once again - for your great product!
-Dominic
Hi Dominic,
You’re welcome! You don’t necessarily need a CSS file to go along with your preset, that’s only there if you have some CSS that you want to run alongside your preset settings.
A preset isn’t actually any CSS, it’s a collection of “preset” settings that you can set in the settings array. The export plugin doesn’t do that for you currently, but that wouldn’t be a bad feature request. 
Currently, you have to build that array manually. If you need to find the array keys, those are in the customizer config files in the includes folder such as includes/customizer-panel-general.php.
Does that make sense? Let me know if you have any questions.
Justin
Hi Justin,
I just saw the update to both the theme and the plugin and linked to the KB article on Presets.
But when I read it I had no idea what was meant by a ‘preset’ 
Perhaps include an introductory paragraph explaining what a preset is ?
Cheers, Dave
Hi Justin
Ok, now it makes sense. Thanks.
Dominic
You’re welcome, Dominic!
Dave, thanks for the feedback. I’ll go ahead and update that post with a description of what a preset is. For reference, presets can be found in the Customizer under the Presets tab. Choosing a preset will update the settings that have been defined for the preset you pick.
Justin
Hello!
I am trying to create a preset wich includes a css file.
I have seen that the optional skin says only:
‘skin’ => ‘PATH_TO_CHILD_THEME/my-preset.css’,
Looking at the default presets in the parent theme, I see that you have only other presets as skins. If I want to link that css file, what would be the best practice (taking security in mind) to link it?
What would I need to replace “PATH_TO_CHILD_THEME” with?
Thank you!
Hi Carlos,
Great question! You don’t need to link to any of the core preset “skin” files. You can just include the filename as we are doing. For example, if you want to use less/modern.less, you can just do this…
FLCustomizer::add_preset('my-preset', array(
'name' => 'My Preset',
'skin' => 'modern',
'settings' => array()
));
Let me know if you have any questions about that.
Justin
Hello Justin!
Thank you for your reply. I dont quite understand how .less files work.
If I am using a child theme, and I want to use a normal preset-styles.css file that is in the child theme folder, how should I write it?
Thank you for your help!
Hi Carlos,
Sure, you can do that like so…
FLCustomizer::add_preset('my-preset', array(
'name' => 'My Preset',
'skin' => get_stylesheet_directory() . '/preset-styles.css',
'settings' => array()
));
Justin
Hello Justing!
I tried the code but it is not working. Here is a copy of my code:
function weebir_custom_presets()
{
FLCustomizer::add_preset( 'wr-medicos', array(
'name' => 'Medicos',
'skin' => get_stylesheet_directory().'/wr-medicos.css',
'settings' => array(
'fl-layout-width' => 'boxed',
'fl-layout-spacing' => '25',
'fl-layout-shadow-size' => '15',
'fl-layout-shadow-color' => '#0a0a0a',
'fl-body-bg-color' => '#d3d3d3',
'fl-accent' => '#31a3dd',
'fl-heading-text-color' => '#31a3dd',
'fl-heading-font-family' => 'Helvetica',
'fl-heading-font-weight' => '400',
'fl-heading-font-format' => 'none',
'fl-h1-font-size' => '36',
'fl-h2-font-size' => '30',
'fl-h3-font-size' => '24',
'fl-h4-font-size' => '18',
'fl-h5-font-size' => '14',
'fl-h6-font-size' => '12',
'fl-body-text-color' => '#808080',
'fl-body-font-family' => 'Helvetica',
'fl-body-font-size' => '14',
'fl-topbar-layout' => 'none',
'fl-header-layout' => 'bottom',
'fl-header-padding' => '10',
'fl-fixed-header' => 'visible',
'fl-header-nav-search' => 'hidden',
'fl-header-content-layout' => 'social-text',
'fl-header-content-text' => '¡Llámanos! 5555-555',
'fl-header-bg-type' => 'content',
'fl-header-bg-gradient' => '0',
'fl-logo-type' => 'text',
'fl-logo-text' => 'Centro de Salud',
'fl-logo-font-family' => 'Fjalla One',
'fl-logo-font-weight' => '400',
'fl-logo-font-size' => '30',
'fl-nav-bg-type' => 'custom',
'fl-nav-bg-color' => '#31a3dd',
'fl-nav-bg-gradient' => '1',
'fl-nav-text-type' => 'default',
'fl-content-bg-color' => '#ffffff',
'fl-blog-layout' => 'sidebar-right',
'fl-blog-sidebar-size' => '3',
'fl-blog-sidebar-display' => 'desktop',
'fl-blog-post-author' => 'hidden',
'fl-blog-post-date' => 'visible',
'fl-archive-show-full' => '0',
'fl-archive-readmore-text' => 'Leer más',
'fl-archive-show-thumbs' => 'beside',
'fl-posts-show-thumbs' => '',
'fl-posts-show-cats' => 'visible',
'fl-posts-show-tags' => 'visible',
'fl-posts-show-nav' => 'hidden',
'fl-lightbox' => 'enabled',
'fl-footer-widgets-display' => 'disabled',
'fl-footer-widgets-bg-type' => 'content',
'fl-footer-layout' => '2-cols',
'fl-footer-col1-layout' => 'text',
'fl-footer-col2-layout' => 'social',
'fl-footer-bg-type' => 'custom',
'fl-footer-bg-color' => '#2d2d2d',
'fl-social-icons-color' => 'branded',
'fl-social-facebook' => 'http://facebook.com',
'fl-social-twitter' => 'http://twitter.com',
'fl-social-google' => 'http://google.com',
'fl-social-linkedin' => 'http://linkedin.com',
)
));
}
add_action( 'after_setup_theme', 'weebir_custom_presets', 1 );
The files/folders inside my child theme folder are:
I also tried using get_stylesheet_directory_uri() with no luck.
Please let me know if I am doing anything wrong here.
Thank you!
Hey Carlos,
I just tried your code on my local, just changed the CSS file, and it works just fine. What do you mean when you say it is not working?
Ben
Hello Ben!
Thank you for taking the time.
The css file basically has styling for the navigation. That style is not showing up. When I look for the stylesheet in the page code, it is not there.
If I put the styles in the default style.css file, it works. But that is not the desired effect, because if they change preset the style will not look good.
The site is http://miracomoes.com/salud/
thank you!
Hey Carlos,
It’s really weird since the CSS is being applied when inside the theme customizer but not on the frontend. I have already talked about this with the other guys and they’re going to check this later. I’m gonna share the login details here via private reply.
Ben
[Content Hidden]
Thank you Ben!
Hi Carlos,
I just checked and the reason it wasn’t showing up is because all of the CSS gets cached when you make changes and save in the Customizer. If you make any changes to your skin file, you’ll have to go to the Customizer and save again so the front-end CSS is regenerated. The preview CSS you see in the Customizer is generated each time you enter the Customizer or make a change.
Let me know if you have any questions about that.
Justin