Hi guys,
Just thought I’d share some of my BB Theme Presets for anyone that would like to use them. They’re simple and clean. They were all inspired by other similar themes I saw around the web.
The only thing that gave me trouble was the mobile css, but CSS Hero now has a new landscape feature so I got the css from that.
http://demos.revivewebdesign.com/demo2/
http://demos.revivewebdesign.com/demo3/
http://demos.revivewebdesign.com/demo4/
http://demos.revivewebdesign.com/demo5/
Here is the array code
<?php
// Defines
define( 'FL_CHILD_THEME_DIR', get_stylesheet_directory() );
define( 'FL_CHILD_THEME_URL', get_stylesheet_directory_uri() );
// Classes
require_once 'classes/class-fl-child-theme.php';
// Actions
add_action( 'fl_head', 'FLChildTheme::stylesheet' );
function my_custom_presets()
{
FLCustomizer::add_preset( 'clean-lato', array(
'name' => 'Clean Lato',
'skin' => 'PATH_TO_CHILD_THEME/my-preset.css',
'settings' => array(
'fl-body-bg-color' => '#ffffff',
'fl-accent' => '#2d2d2d',
'fl-accent-hover' => '#adadad',
'fl-heading-text-color' => '#333333',
'fl-topbar-bg-color' => '#ffffff',
'fl-topbar-text-color' => '#808080',
'fl-topbar-link-color' => '#428bca',
'fl-topbar-hover-color' => '#428bca',
'fl-header-bg-color' => '#ffffff',
'fl-header-text-color' => '#2d2d2d',
'fl-header-link-color' => '#2d2d2d',
'fl-header-hover-color' => '#adadad',
'fl-nav-bg-color' => '#ffffff',
'fl-nav-link-color' => '#2d2d2d',
'fl-nav-hover-color' => '#adadad',
'fl-footer-widgets-bg-color' => '#ffffff',
'fl-footer-widgets-text-color' => '#808080',
'fl-footer-widgets-link-color' => '#428bca',
'fl-footer-widgets-hover-color' => '#428bca',
'fl-footer-bg-color' => '#ffffff',
'fl-footer-text-color' => '#808080',
'fl-footer-link-color' => '#428bca',
'fl-footer-hover-color' => '#428bca',
'nav_menu_locations' => 'header',
'fl-header-layout' => 'right',
'fl-nav-font-family' => 'Montserrat',
'fl-nav-font-weight' => '400',
'fl-nav-font-format' => 'uppercase',
'fl-nav-font-size' => '13',
'fl-layout-width' => 'boxed',
'fl-layout-shadow-color' => '#ffffff',
'fl-heading-font-family' => 'Montserrat',
'fl-heading-font-weight' => '400',
'fl-body-font-family' => 'Lato',
'fl-body-font-size' => '18',
'fl-body-text-color' => '#464646',
'fl-footer-layout' => '2-cols'
)
));
FLCustomizer::add_preset( 'centered', array(
'name' => 'Clean Centered',
'skin' => get_stylesheet_directory() . '/clean-centered.css',
'settings' => array(
'nav_menu_locations' => 'header',
'fl-layout-width' => 'boxed',
'fl-header-layout' => 'centered',
'fl-fixed-header' => 'visible',
'fl-header-nav-search' => 'hidden',
'fl-heading-text-color' => '#444444',
'fl-heading-font-family' => 'Source Sans Pro',
'fl-heading-font-weight' => '200',
'fl-heading-font-format' => 'uppercase',
'fl-body-text-color' => '#333333',
'fl-body-font-family' => 'Source Sans Pro',
'fl-body-font-size' => '15',
'fl-accent' => '#000000',
'fl-accent-hover' => '#444444',
'fl-header-link-color' => '#444444',
'fl-header-hover-color' => '#000000',
'fl-logo-font-family' => 'Source Sans Pro',
'fl-logo-font-weight' => '300',
'fl-logo-font-size' => '55',
'fl-nav-item-spacing' => '18',
'fl-nav-link-color' => '#515151',
'fl-nav-hover-color' => '#000000',
'fl-nav-font-family' => 'Source Sans Pro',
'fl-nav-font-weight' => '400',
'fl-nav-font-format' => 'uppercase',
'fl-nav-font-size' => '12',
'fl-body-bg-color' => '#ffffff',
'fl-footer-layout' => '2-cols'
)
));
FLCustomizer::add_preset( 'coffee-shop', array(
'name' => 'Coffee Shop',
'skin' => 'PATH_TO_CHILD_THEME/my-preset.css',
'settings' => array(
'nav_menu_locations' => 'header',
'fl-fixed-header' => 'visible',
'fl-header-bg-color' => '#f6f6f6',
'fl-header-text-color' => '#373637',
'fl-header-link-color' => '#373637',
'fl-header-hover-color' => '#000000',
'fl-nav-font-family' => 'Dosis',
'fl-nav-font-weight' => '500',
'fl-content-bg-color' => '#f6f6f6',
'fl-heading-text-color' => '#373637',
'fl-heading-font-family' => 'Roboto Slab',
'fl-heading-font-weight' => '300',
'fl-body-text-color' => '#373637',
'fl-body-font-family' => 'Dosis',
'fl-body-font-size' => '18',
'fl-logo-font-family' => 'Roboto Slab',
'fl-logo-font-weight' => '300',
'fl-footer-bg-color' => '#373637',
'fl-footer-text-color' => '#ffffff',
'fl-footer-link-color' => '#ffffff',
'fl-footer-hover-color' => '#f6f6f6',
'fl-footer-layout' => '2-cols',
'fl-accent' => '#373637',
'fl-accent-hover' => '#000000',
'fl-layout-width' => 'full-width'
)
));
FLCustomizer::add_preset( 'cupcake', array(
'name' => 'Cupcake',
'settings' => array(
'fl-body-bg-color' => '#f0ebdb',
'fl-accent' => '#9c5959',
'fl-accent-hover' => '#c8c8c8',
'fl-heading-text-color' => '#9c5959',
'fl-topbar-bg-color' => '#ffffff',
'fl-topbar-text-color' => '#808080',
'fl-topbar-link-color' => '#428bca',
'fl-topbar-hover-color' => '#428bca',
'fl-header-bg-color' => '#ffffff',
'fl-header-text-color' => '#808080',
'fl-header-link-color' => '#9c5959',
'fl-header-hover-color' => '#c8c8c8',
'fl-nav-bg-color' => '#ffffff',
'fl-nav-link-color' => '#808080',
'fl-nav-hover-color' => '#428bca',
'fl-footer-widgets-bg-color' => '#ffffff',
'fl-footer-widgets-text-color' => '#808080',
'fl-footer-widgets-link-color' => '#428bca',
'fl-footer-widgets-hover-color' => '#428bca',
'fl-footer-bg-color' => '#ffffff',
'fl-footer-text-color' => '#808080',
'fl-footer-link-color' => '#d96ea6',
'fl-footer-hover-color' => '#d96ea6',
'nav_menu_locations' => 'header',
'fl-heading-font-family' => 'Lobster',
'fl-heading-font-weight' => '400',
'fl-h1-font-size' => '40',
'fl-h2-font-size' => '34',
'fl-h3-font-size' => '28',
'fl-h4-font-size' => '22',
'fl-h5-font-size' => '18',
'fl-h6-font-size' => '16',
'fl-body-text-color' => '#252525',
'fl-body-font-family' => 'Raleway',
'fl-body-font-size' => '14',
'fl-logo-font-family' => 'Lobster',
'fl-logo-font-weight' => '400',
'fl-logo-font-size' => '40',
'fl-header-nav-search' => 'hidden',
'fl-nav-font-family' => 'Lobster',
'fl-nav-font-weight' => '400',
'fl-nav-font-size' => '18',
'fl-layout-width' => 'boxed',
'fl-layout-spacing' => '20',
'fl-layout-shadow-size' => '20',
'fl-footer-layout' => '2-cols'
)
));
FLCustomizer::add_preset( 'Christina', array(
'name' => 'Christina',
'skin' => get_stylesheet_directory() . '/clean-centered-1.css',
'settings' => array(
'nav_menu_locations' => 'header',
'fl-header-nav-search' => 'hidden',
'fl-fixed-header' => 'visible',
'fl-header-bg-color' => '#ffffff',
'fl-header-text-color' => '#808080',
'fl-header-link-color' => '#000000',
'fl-header-hover-color' => '#e14d43',
'fl-nav-font-family' => 'Lato',
'fl-nav-font-weight' => '700',
'fl-content-bg-color' => '#ffffff',
'fl-heading-text-color' => '#000000',
'fl-heading-font-family' => 'Alice',
'fl-heading-font-weight' => '400',
'fl-body-text-color' => '#000000',
'fl-body-font-family' => 'Lato',
'fl-body-font-size' => '18',
'fl-logo-font-family' => 'Lato',
'fl-logo-font-weight' => '900',
'fl-footer-bg-color' => '#ffffff',
'fl-footer-text-color' => '#808080',
'fl-footer-link-color' => '#428bca',
'fl-footer-hover-color' => '#428bca',
'fl-footer-layout' => '2-cols',
'fl-accent' => '#e14d43',
'fl-accent-hover' => '#000000',
'fl-layout-width' => 'boxed',
'fl-body-bg-color' => '#f2f2f2',
'fl-heading-font-format' => 'none',
'fl-header-layout' => 'centered',
'fl-logo-font-size' => '48',
'fl-nav-item-spacing' => '20',
'fl-nav-link-color' => '#000000',
'fl-nav-hover-color' => '#e14d43',
'fl-nav-font-format' => 'uppercase',
'fl-nav-font-size' => '12',
'fl-layout-shadow-color' => '#d9d9d9',
'fl-nav-bg-color' => '#ffffff',
'fl-footer-widgets-bg-color' => '#ffffff',
'fl-nav-text-color' => '#000000',
'fl-layout-spacing' => '30',
'fl-layout-shadow-size' => '0',
'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-header-bg-gradient' => '0',
'fl-header-padding' => '50',
'fl-nav-bg-position' => 'left top',
'fl-body-bg-image' => 'http://demos.revivewebdesign.com/demo1/wp-content/uploads/2015/07/concrete_seamless.png',
'fl-body-bg-repeat' => 'repeat',
'fl-body-bg-position' => 'left top',
'fl-body-bg-attachment' => 'fixed',
'fl-body-bg-size' => 'auto'
)
));
}
add_action( 'after_setup_theme', 'my_custom_presets', 11 );
Here is the css code for 2 of the presets.
/*
Skin: Clean Centered
WARNING! DO NOT EDIT THEME FILES IF YOU PLAN ON UPDATING!
Theme files will be overwritten and your changes will be lost
when updating. Instead, add custom code in the admin under
Appearance > Theme Settings > Code or create a child theme.
*/
/* Background pattern from subtlepatterns.com */
/* Add your custom styles here... */
/*FL Contact Form CSS*/
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-input-group input{
border-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
height:60px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-input-group textarea{
border-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
height:168px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-contact-form-submit{
width:100%;
height:60px;
font-size:27px;
border-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-input-group input {
border-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 60px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-input-group textarea {
border-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 168px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-contact-form-submit {
width: 100%;
height: 60px;
font-size: 27px;
border-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
/*FL Contact Form CSS END*/
/*Navigation CSS*/
html body .fl-page-nav-wrap{
border-top-style:solid;
border-top-width:1px;
border-top-color:rgba(119,119,119,1);
border-bottom-style:solid;
border-bottom-color:rgba(119,119,119,1);
border-bottom-width:1px;
}
.fl-page .fl-page-header .fl-page-nav ul.nav li a {
letter-spacing: 2px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 25px;
padding-left: 25px;
line-height: 12px;
border-top-style: none;
}
/*Navigation CSS END*/
/*Container Content CSS*/
.fl-builder .container.fl-content-full {
padding-top: 20px;
}
/*Content Font Weight*/
.fl-page .fl-page-content {
font-weight: 300;
line-height: 24px;
}
/*Content Font Weight END*/
@media screen and (max-width: 667px) { html body .fl-page-nav-wrap { border-style: none!important; } }
@media screen and (max-width: 667px) { html body .fl-page-nav-wrap { padding-bottom: 0px!important; } }
@media screen and (max-width: 480px) { html body .fl-page-nav-wrap { border-style: none!important; } }
@media screen and (max-width: 480px) { html body .fl-page-nav-wrap { padding-bottom: 0px!important; } }
/*
Skin: Christina
WARNING! DO NOT EDIT THEME FILES IF YOU PLAN ON UPDATING!
Theme files will be overwritten and your changes will be lost
when updating. Instead, add custom code in the admin under
Appearance > Theme Settings > Code or create a child theme.
*/
/* Background pattern from subtlepatterns.com */
/* Add your custom styles here... */
/*FL Contact Form CSS*/
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-input-group input{
border-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
height:60px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-input-group textarea{
border-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
height:168px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-contact-form-submit{
width:100%;
height:60px;
font-size:27px;
border-radius:0px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-bottom-left-radius:0px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-input-group input {
border-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 60px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-input-group textarea {
border-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
height: 168px;
}
.fl-builder-content .fl-module-contact-form .fl-contact-form .fl-contact-form-submit {
width: 100%;
height: 60px;
font-size: 27px;
border-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
/*FL Contact Form CSS END*/
html body .fl-page .fl-page-header .fl-page-header-logo .fl-logo-text {
letter-spacing: 3px;
}
/*Nav CSS*/
.fl-page .fl-page-header .fl-page-nav ul.nav li a {
letter-spacing: 1px;
padding-bottom: 20px;
padding-top: 20px;
}
html body .fl-page-nav-wrap {
margin-left: 50px;
margin-right: 50px;
}
html body .fl-page-nav-wrap {
border-bottom: double #ddd;
border-top: double #ddd;
}
.fl-page .fl-page-header .fl-page-nav-search a {
padding-right: 32px;
padding-top: 12px;
}
/*Container Content CSS*/
.fl-builder .container.fl-content-full {
padding: 50px;
}
body .fl-page .fl-page-content {
font-weight: normal;
}
/*Mobile CSS*/
@media screen and (max-width: 667px) { html body .fl-page-nav-wrap { border-style: none!important; } }
@media screen and (max-width: 667px) { html body .fl-page-nav-wrap { padding-bottom: 0px!important; } }
@media screen and (max-width: 480px) { html body .fl-page-nav-wrap { border-style: none!important; } }
@media screen and (max-width: 480px) { html body .fl-page-nav-wrap { padding-bottom: 0px!important; } }
@media screen and (max-width: 667px) { .fl-builder .container.fl-content-full { padding: 20px; } }
@media screen and (max-width: 480px) { .fl-builder .container.fl-content-full { padding: 20px 0 0 0; } }