Skip to content

Instantly share code, notes, and snippets.

@thierrypigot

thierrypigot/frontend.css.php Secret

Last active January 11, 2016 22:10
Download ZIP
Add button Target and position
Raw
frontend.css.php
/*Features Min Height*/
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-features {
min-height: <?php echo $settings->min_height; ?>px;
}
<?php
// Loop through and style each pricing box
for($i = 0; $i < count($settings->pricing_columns); $i++) :
if(!is_object($settings->pricing_columns[$i])) continue;
// Pricing Box Settings
$pricing_column = $settings->pricing_columns[$i];
?>
/*Pricing Box Style*/
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> {
border: 1px solid #<?php echo FLBuilderColor::adjust_brightness($pricing_column->background, 30, 'darken'); ?>;
background: #<?php echo $pricing_column->background; ?>;
margin-top: <?php echo $pricing_column->margin; ?>px;
}
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> .fl-pricing-table-inner-wrap {
background: #<?php echo $pricing_column->foreground; ?>;
border: 1px solid #<?php echo FLBuilderColor::adjust_brightness($pricing_column->background, 30, 'darken'); ?>;
}
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> h2 {
font-size: <?php echo $pricing_column->title_size; ?>px;
}
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> .fl-pricing-table-price {
font-size: <?php echo $pricing_column->price_size; ?>px;
}
/*Pricing Box Highlight*/
<?php if ($settings->highlight == 'price') : ?>
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> .fl-pricing-table-price {
background: #<?php echo $pricing_column->column_background; ?>;
color: #<?php echo $pricing_column->column_color; ?>;
}
<?php elseif ($settings->highlight == 'title') : ?>
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> .fl-pricing-table-title {
background: #<?php echo $pricing_column->column_background; ?>;
color: #<?php echo $pricing_column->column_color; ?>;
}
<?php endif; ?>
/*Fix when price is NOT highlighted*/
<?php if ($settings->highlight == 'title' || $settings->highlight == 'none') : ?>
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> .fl-pricing-table-price {
margin-bottom: 0;
padding-bottom: 0;
}
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> .fl-pricing-table-features {
margin-top: 10px;
}
<?php endif; ?>
/*Fix when NOTHING is highlighted*/
<?php if ($settings->highlight == 'none') : ?>
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> .fl-pricing-table-title {
padding-bottom: 0;
}
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> .fl-pricing-table-price {
padding-top: 0;
}
<?php endif; ?>
/*Button CSS*/
.fl-builder-content .fl-node-<?php echo $id; ?> .fl-pricing-table-column-<?php echo $i; ?> a.fl-button {
<?php if ( empty( $pricing_column->btn_bg_color ) ) : ?>
background-color: #<?php echo $pricing_column->column_background; ?> !important;
border: 1px solid #<?php echo $pricing_column->column_background; ?> !important;
<?php endif; ?>
<?php if ( empty( $pricing_column->btn_width ) ) : ?>
display:block;
margin: 0 30px 5px;
<?php endif; ?>
}
<?php
FLBuilder::render_module_css('button', $id . ' .fl-pricing-table-column-' . $i , array(
'align' => 'center',
'bg_color' => $pricing_column->btn_bg_color,
'bg_hover_color' => $pricing_column->btn_bg_hover_color,
'bg_opacity' => $pricing_column->btn_bg_opacity,
'bg_opacity_hover' => $pricing_column->btn_bg_opacity_hover,
'border_radius' => $pricing_column->btn_border_radius,
'border_size' => $pricing_column->btn_border_size,
'font_size' => $pricing_column->btn_font_size,
'icon' => $pricing_column->btn_icon,
'icon_position' => $pricing_column->btn_icon_position,
'link' => $pricing_column->btn_url,
'link_target' => '_self',
'padding' => $pricing_column->btn_padding,
'style' => $pricing_column->btn_style,
'text_color' => $pricing_column->btn_text_color,
'text_hover_color' => $pricing_column->btn_text_hover_color,
'width' => $pricing_column->btn_width
));
?>
<?php endfor; ?>
Raw
modules\button\includes\frontend.css.php
<?php
// Background Color
if ( ! empty( $settings->bg_color ) && empty( $settings->bg_hover_color ) ) {
$settings->bg_hover_color = $settings->bg_color;
}
// Old Background Gradient Setting
if ( isset( $settings->three_d ) && $settings->three_d ) {
$settings->style = 'gradient';
}
// Background Gradient
if ( ! empty( $settings->bg_color ) ) {
$bg_grad_start = FLBuilderColor::adjust_brightness( $settings->bg_color, 30, 'lighten' );
}
if ( ! empty( $settings->bg_hover_color ) ) {
$bg_hover_grad_start = FLBuilderColor::adjust_brightness( $settings->bg_hover_color, 30, 'lighten' );
}
// Border Size
if ( 'transparent' == $settings->style ) {
$border_size = $settings->border_size;
}
else {
$border_size = 1;
}
// Border Color
if ( ! empty( $settings->bg_color ) ) {
$border_color = FLBuilderColor::adjust_brightness( $settings->bg_color, 12, 'darken' );
}
if ( ! empty( $settings->bg_hover_color ) ) {
$border_hover_color = FLBuilderColor::adjust_brightness( $settings->bg_hover_color, 12, 'darken' );
}
?>
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button,
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:visited {
font-size: <?php echo $settings->font_size; ?>px;
line-height: <?php echo $settings->font_size + 2; ?>px;
padding: <?php echo $settings->padding . 'px ' . ($settings->padding * 2) . 'px'; ?>;
border-radius: <?php echo $settings->border_radius; ?>px;
-moz-border-radius: <?php echo $settings->border_radius; ?>px;
-webkit-border-radius: <?php echo $settings->border_radius; ?>px;
<?php if ( 'custom' == $settings->width ) : ?>
width: <?php echo $settings->custom_width; ?>px;
<?php endif; ?>
<?php if ( ! empty( $settings->bg_color ) ) : ?>
background: #<?php echo $settings->bg_color; ?>;
border: <?php echo $border_size; ?>px solid #<?php echo $border_color; ?>;
<?php if ( 'transparent' == $settings->style ) : // Transparent ?>
background-color: rgba(<?php echo implode( ',', FLBuilderColor::hex_to_rgb( $settings->bg_color ) ) ?>, <?php echo $settings->bg_opacity/100; ?>);
<?php endif; ?>
<?php if( 'gradient' == $settings->style ) : // Gradient ?>
background: -moz-linear-gradient(top, #<?php echo $bg_grad_start; ?> 0%, #<?php echo $settings->bg_color; ?> 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#<?php echo $bg_grad_start; ?>), color-stop(100%,#<?php echo $settings->bg_color; ?>)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #<?php echo $bg_grad_start; ?> 0%,#<?php echo $settings->bg_color; ?> 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #<?php echo $bg_grad_start; ?> 0%,#<?php echo $settings->bg_color; ?> 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #<?php echo $bg_grad_start; ?> 0%,#<?php echo $settings->bg_color; ?> 100%); /* IE10+ */
background: linear-gradient(to bottom, #<?php echo $bg_grad_start; ?> 0%,#<?php echo $settings->bg_color; ?> 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#<?php echo $bg_grad_start; ?>', endColorstr='#<?php echo $settings->bg_color; ?>',GradientType=0 ); /* IE6-9 */
<?php endif; ?>
<?php endif; ?>
}
<?php if ( ! empty( $settings->text_color ) ) : ?>
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button,
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:visited,
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button *,
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:visited * {
color: #<?php echo $settings->text_color; ?>;
}
<?php endif; ?>
<?php if ( ! empty( $settings->bg_hover_color ) ) : ?>
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:hover,
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:focus {
background: #<?php echo $settings->bg_hover_color; ?>;
border: <?php echo $border_size; ?>px solid #<?php echo $border_hover_color; ?>;
<?php if ( 'transparent' == $settings->style ) : // Transparent ?>
background-color: rgba(<?php echo implode( ',', FLBuilderColor::hex_to_rgb( $settings->bg_hover_color ) ) ?>, <?php echo $settings->bg_opacity_hover/100; ?>);
<?php endif; ?>
<?php if ( 'gradient' == $settings->style ) : // Gradient ?>
background: -moz-linear-gradient(top, #<?php echo $bg_hover_grad_start; ?> 0%, #<?php echo $settings->bg_hover_color; ?> 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#<?php echo $bg_hover_grad_start; ?>), color-stop(100%,#<?php echo $settings->bg_hover_color; ?>)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #<?php echo $bg_hover_grad_start; ?> 0%,#<?php echo $settings->bg_hover_color; ?> 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #<?php echo $bg_hover_grad_start; ?> 0%,#<?php echo $settings->bg_hover_color; ?> 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #<?php echo $bg_hover_grad_start; ?> 0%,#<?php echo $settings->bg_hover_color; ?> 100%); /* IE10+ */
background: linear-gradient(to bottom, #<?php echo $bg_hover_grad_start; ?> 0%,#<?php echo $settings->bg_hover_color; ?> 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#<?php echo $bg_hover_grad_start; ?>', endColorstr='#<?php echo $settings->bg_hover_color; ?>',GradientType=0 ); /* IE6-9 */
<?php endif; ?>
}
<?php endif; ?>
<?php if ( ! empty( $settings->text_hover_color ) ) : ?>
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:hover,
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:focus,
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:hover *,
.fl-builder-content .fl-node-<?php echo $id; ?> a.fl-button:focus * {
color: #<?php echo $settings->text_hover_color; ?>;
}
<?php endif; ?>
Raw
pricing-table.php
<?php
/**
* @class FLRichTextModule
*/
class FLPricingTableModule extends FLBuilderModule {
/**
* @method __construct
*/
public function __construct()
{
parent::__construct(array(
'name' => __('Pricing Table', 'fl-builder'),
'description' => __('A simple pricing table generator.', 'fl-builder'),
'category' => __('Advanced Modules', 'fl-builder'),
'partial_refresh' => true
));
}
/**
* @method render_button
*/
public function render_button($column)
{
$btn_settings = array(
'align' => $this->settings->pricing_columns[$column]->align,
'bg_color' => $this->settings->pricing_columns[$column]->btn_bg_color,
'bg_hover_color' => $this->settings->pricing_columns[$column]->btn_bg_hover_color,
'bg_opacity' => $this->settings->pricing_columns[$column]->btn_bg_opacity,
'border_radius' => $this->settings->pricing_columns[$column]->btn_border_radius,
'border_size' => $this->settings->pricing_columns[$column]->btn_border_size,
'font_size' => $this->settings->pricing_columns[$column]->btn_font_size,
'icon' => $this->settings->pricing_columns[$column]->btn_icon,
'icon_position' => $this->settings->pricing_columns[$column]->btn_icon_position,
'link' => $this->settings->pricing_columns[$column]->btn_url,
'link_target' => $this->settings->pricing_columns[$column]->link_target,
'padding' => $this->settings->pricing_columns[$column]->btn_padding,
'style' => $this->settings->pricing_columns[$column]->btn_style,
'text' => $this->settings->pricing_columns[$column]->btn_text,
'text_color' => $this->settings->pricing_columns[$column]->btn_text_color,
'text_hover_color' => $this->settings->pricing_columns[$column]->btn_text_hover_color,
'width' => $this->settings->pricing_columns[$column]->btn_width
);
FLBuilder::render_module_html('button', $btn_settings);
}
}
/**
* Register the module and its form settings.
*/
FLBuilder::register_module('FLPricingTableModule', array(
'columns' => array(
'title' => __('Pricing Boxes', 'fl-builder'),
'sections' => array(
'general' => array(
'title' => '',
'fields' => array(
'pricing_columns' => array(
'type' => 'form',
'label' => __('Pricing Box', 'fl-builder'),
'form' => 'pricing_column_form',
'preview_text' => 'title',
'multiple' => true
),
)
)
)
),
'style' => array(
'title' => __('Style', 'fl-builder'),
'sections' => array(
'general' => array(
'title' => '',
'fields' => array(
'highlight' => array(
'type' => 'select',
'label' => __('Highlight', 'fl-builder'),
'default' => 'price',
'options' => array(
'price' => __('Price', 'fl-builder'),
'title' => __('Title', 'fl-builder'),
'none' => __('None', 'fl-builder')
)
),
'border_radius' => array(
'type' => 'select',
'label' => __('Border Style', 'fl-builder'),
'default' => 'rounded',
'options' => array(
'rounded' => __('Rounded', 'fl-builder'),
'straight' => __('Straight', 'fl-builder')
)
),
'border_size' => array(
'type' => 'select',
'label' => __('Border Size', 'fl-builder'),
'default' => 'wide',
'options' => array(
'large' => _x( 'Large', 'Border size.', 'fl-builder' ),
'medium' => _x( 'Medium', 'Border size.', 'fl-builder' ),
'small' => _x( 'Small', 'Border size.', 'fl-builder' )
)
),
'spacing' => array(
'type' => 'select',
'label' => __('Spacing', 'fl-builder'),
'default' => 'wide',
'options' => array(
'large' => __('Large', 'fl-builder'),
'medium' => __('Medium', 'fl-builder'),
'none' => __('None', 'fl-builder'),
)
),
'min_height' => array(
'type' => 'text',
'label' => __('Features Min Height', 'fl-builder'),
'default' => '0',
'size' => '5',
'description' => 'px',
'help' => __('Use this to normalize the height of your boxes when they have different numbers of features.', 'fl-builder')
)
)
)
)
)
));
FLBuilder::register_settings_form('pricing_column_form', array(
'title' => __( 'Add Pricing Box', 'fl-builder' ),
'tabs' => array(
'general' => array(
'title' => __('General', 'fl-builder'),
'sections' => array(
'title' => array(
'title' => __( 'Title', 'fl-builder' ),
'fields' => array(
'title' => array(
'type' => 'text',
'label' => __('Title', 'fl-builder'),
),
'title_size' => array(
'type' => 'text',
'label' => __('Title Size', 'fl-builder'),
'default' => '24',
'maxlength' => '3',
'size' => '4',
'description' => 'px'
),
),
),
'price-box' => array(
'title' => __( 'Price Box', 'fl-builder' ),
'fields' => array(
'price' => array(
'type' => 'text',
'label' => __('Price', 'fl-builder'),
),
'duration' => array(
'type' => 'text',
'label' => __('Duration', 'fl-builder'),
'placeholder' => __( 'per Year', 'fl-builder' )
),
'price_size' => array(
'type' => 'text',
'label' => __('Price Size', 'fl-builder'),
'default' => '31',
'maxlength' => '3',
'size' => '4',
'description' => 'px'
)
)
),
'features' => array(
'title' => _x( 'Features', 'Price features displayed in pricing box.', 'fl-builder' ),
'fields' => array(
'features' => array(
'type' => 'text',
'label' => '',
'placeholder' => __( 'One feature per line. HTML is okay.', 'fl-builder' ),
'multiple' => true
)
)
)
)
),
'button' => array(
'title' => __('Button', 'fl-builder'),
'sections' => array(
'default' => array(
'title' => '',
'fields' => array(
'btn_text' => array(
'type' => 'text',
'label' => __('Button Text', 'fl-builder'),
'default' => __('Get Started', 'fl-builder'),
),
'btn_url' => array(
'type' => 'link',
'label' => __('Button URL', 'fl-builder')
),
'link_target' => array(
'type' => 'select',
'label' => __('Link Target', 'fl-builder'),
'default' => '_self',
'options' => array(
'_self' => __('Same Window', 'fl-builder'),
'_blank' => __('New Window', 'fl-builder')
),
'preview' => array(
'type' => 'none'
)
),
'btn_icon' => array(
'type' => 'icon',
'label' => __('Button Icon', 'fl-builder'),
'show_remove' => true
),
'btn_icon_position' => array(
'type' => 'select',
'label' => __('Button Icon Position', 'fl-builder'),
'default' => 'before',
'options' => array(
'before' => __('Before Text', 'fl-builder'),
'after' => __('After Text', 'fl-builder')
)
)
)
),
'btn_colors' => array(
'title' => __('Button Colors', 'fl-builder'),
'fields' => array(
'btn_bg_color' => array(
'type' => 'color',
'label' => __('Background Color', 'fl-builder'),
'default' => '',
'show_reset' => true
),
'btn_bg_hover_color' => array(
'type' => 'color',
'label' => __('Background Hover Color', 'fl-builder'),
'default' => '',
'show_reset' => true,
),
'btn_text_color' => array(
'type' => 'color',
'label' => __('Text Color', 'fl-builder'),
'default' => '',
'show_reset' => true
),
'btn_text_hover_color' => array(
'type' => 'color',
'label' => __('Text Hover Color', 'fl-builder'),
'default' => '',
'show_reset' => true,
)
)
),
'btn_style' => array(
'title' => __('Button Style', 'fl-builder'),
'fields' => array(
'btn_style' => array(
'type' => 'select',
'label' => __('Style', 'fl-builder'),
'default' => 'flat',
'options' => array(
'flat' => __('Flat', 'fl-builder'),
'gradient' => __('Gradient', 'fl-builder'),
'transparent' => __('Transparent', 'fl-builder')
),
'toggle' => array(
'transparent' => array(
'fields' => array('btn_bg_opacity', 'btn_bg_opacity_hover', 'btn_border_size')
)
)
),
'align' => array(
'type' => 'select',
'label' => __('Link Target', 'fl-builder'),
'default' => 'center',
'options' => array(
'left' => __('Left', 'fl-builder'),
'center' => __('Center', 'fl-builder'),
'right' => __('Right', 'fl-builder'),
),
'preview' => array(
'type' => 'none'
)
),
'btn_border_size' => array(
'type' => 'text',
'label' => __('Border Size', 'fl-builder'),
'default' => '2',
'description' => 'px',
'maxlength' => '3',
'size' => '5',
'placeholder' => '0'
),
'btn_bg_opacity' => array(
'type' => 'text',
'label' => __('Background Opacity', 'fl-builder'),
'default' => '0',
'description' => '%',
'maxlength' => '3',
'size' => '5',
'placeholder' => '0'
),
'btn_bg_opacity_hover' => array(
'type' => 'text',
'label' => __('Background hover Opacity', 'fl-builder'),
'default' => '100',
'description' => '%',
'maxlength' => '3',
'size' => '5',
'placeholder' => '0'
)
)
),
'btn_structure' => array(
'title' => __('Button Structure', 'fl-builder'),
'fields' => array(
'btn_width' => array(
'type' => 'select',
'label' => __('Button Width', 'fl-builder'),
'default' => 'full',
'options' => array(
'auto' => _x( 'Auto', 'Width.', 'fl-builder' ),
'full' => __('Full Width', 'fl-builder')
)
),
'btn_font_size' => array(
'type' => 'text',
'label' => __('Font Size', 'fl-builder'),
'default' => '14',
'maxlength' => '3',
'size' => '4',
'description' => 'px'
),
'btn_padding' => array(
'type' => 'text',
'label' => __('Padding', 'fl-builder'),
'default' => '12',
'maxlength' => '3',
'size' => '4',
'description' => 'px'
),
'btn_border_radius' => array(
'type' => 'text',
'label' => __('Round Corners', 'fl-builder'),
'default' => '4',
'maxlength' => '3',
'size' => '4',
'description' => 'px'
)
)
)
)
),
'style' => array(
'title' => __('Style', 'fl-builder'),
'sections' => array(
'style' => array(
'title' => 'Style',
'fields' => array(
'background' => array(
'type' => 'color',
'label' => __('Box Border', 'fl-builder'),
'default' => 'F2F2F2'
),
'foreground' => array(
'type' => 'color',
'label' => __('Box Foreground', 'fl-builder'),
'default' => 'ffffff'
),
'column_background' => array(
'type' => 'color',
'default' => '66686b',
'label' => __('Accent Color', 'fl-builder'),
),
'column_color' => array(
'type' => 'color',
'default' => 'ffffff',
'label' => __('Accent Text Color', 'fl-builder')
),
'margin' => array(
'type' => 'text',
'label' => __('Box Top Margin', 'fl-builder'),
'default' => '0',
'maxlength' => '3',
'size' => '3',
'description' => 'px'
)
)
)
)
)
)
));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment