function custom_post_css()
{
$post_id = get_the_ID();
$css = array();
$style = '';
$rules = array('.section-post.post-' . $post_id => array(array('prop' => 'font-size', 'key' => array('font_size', 'font_size_unit')), array('prop' => 'font-family', 'key' => 'font_family'), array('prop' => 'color', 'key' => 'font_color'), array('prop' => 'background-color', 'key' => 'background_color')), '.section-post.post-' . $post_id . ' a' => array(array('prop' => 'color', 'key' => 'link_color')));
foreach ($rules as $selector => $property) {
foreach ($property as $val) {
$prop = $val['prop'];
$key = $val['key'];
if (is_array($key)) {
if ('font-size' == $prop && themify_check($key[0])) {
$css[$selector][$prop] = $prop . ': ' . themify_get($key[0]) . themify_get($key[1]);
}
if ('background-position' == $prop && themify_check($key[0])) {
$css[$selector][$prop] = $prop . ': ' . themify_get($key[0]) . ' ' . themify_get($key[1]);
}
} elseif (themify_check($key) && 'default' != themify_get($key)) {
if ('color' == $prop || stripos($prop, 'color')) {
$css[$selector][$prop] = $prop . ': #' . themify_get($key);
} elseif ('background-image' == $prop) {
$css[$selector][$prop] = $prop . ': url(' . themify_get($key) . ')';
} elseif ($prop == 'font-family') {
$font = themify_get($key);
$css[$selector][$prop] = $prop . ': ' . $font;
if (!in_array($font, themify_get_web_safe_font_list(true))) {
$this->google_fonts .= str_replace(' ', '+', $font . '|');
}
} else {
$css[$selector][$prop] = $prop . ': ' . themify_get($key);
}
}
}
if (!empty($css[$selector])) {
$style .= "{$selector} {\n\t" . implode(";\n\t", $css[$selector]) . "\n}\n";
}
}
if ('' != $style) {
echo "\n<!-- #{$post_id} Style -->\n<style>\n{$style}</style>\n<!-- #{$post_id} Style -->\n";
}
}
/**
* Print the field based on field type
* @param array $field
*/
public static function print_field($field)
{
$field = wp_parse_args($field, array('id' => '', 'name' => '', 'class' => ''));
switch ($field['type']) {
case 'text':
?>
<input id="<?php
echo esc_attr($field['id']);
?>
" name="<?php
echo esc_attr($field['id']);
?>
" type="text" value="" class="<?php
echo esc_attr($field['class']);
?>
tfb_lb_option">
<?php
if (isset($field['description'])) {
echo wp_kses_post($field['description']);
}
break;
case 'separator':
if (isset($field['meta']['html']) && '' != $field['meta']['html']) {
echo wp_kses_post($field['meta']['html']);
} else {
?>
<hr class="meta_fields_separator" />
<?php
}
break;
case 'image':
?>
<input id="<?php
echo esc_attr($field['id']);
?>
" name="<?php
echo esc_attr($field['id']);
?>
" placeholder="<?php
if (isset($field['value'])) {
echo esc_attr($field['value']);
}
?>
" class="<?php
echo esc_attr($field['class']);
?>
themify-builder-uploader-input tfb_lb_option" type="text" /><br />
<input type="hidden" name="<?php
echo esc_attr($field['id'] . '_attach_id');
?>
" class="themify-builder-uploader-input-attach-id" value="">
<div class="small">
<?php
if (is_multisite() && !is_upload_space_available()) {
?>
<?php
echo sprintf(__('Sorry, you have filled your %s MB storage quota so uploading has been disabled.', 'themify'), get_space_allowed());
?>
<?php
} else {
?>
<div class="themify-builder-plupload-upload-uic hide-if-no-js tf-upload-btn" id="<?php
echo esc_attr($field['id']);
?>
themify-builder-plupload-upload-ui">
<input id="<?php
echo esc_attr($field['id']);
?>
themify-builder-plupload-browse-button" type="button" value="<?php
esc_attr_e(__('Upload', 'themify'));
?>
" class="builder_button" />
<span class="ajaxnonceplu" id="ajaxnonceplu<?php
echo wp_create_nonce($field['id'] . 'themify-builder-plupload');
?>
"></span>
</div> <?php
_e('or', 'themify');
?>
<a href="#" class="themify-builder-media-uploader tf-upload-btn" data-uploader-title="<?php
esc_attr_e('Upload an Image', 'themify');
?>
" data-uploader-button-text="<?php
esc_attr_e('Insert file URL', 'themify');
?>
"><?php
_e('Browse Library', 'themify');
?>
</a>
<?php
}
?>
</div>
<p class="thumb_preview">
<span class="img-placeholder"></span>
<a href="#" class="themify_builder_icon small delete themify-builder-delete-thumb"></a>
</p>
<?php
break;
case 'select':
?>
<select id="<?php
echo esc_attr($field['id']);
?>
" name="<?php
echo esc_attr($field['id']);
?>
" class="tfb_lb_option <?php
echo esc_attr($field['class']);
?>
">
<?php
if (isset($field['default'])) {
?>
<option value="<?php
echo esc_attr($field['default']);
?>
"><?php
echo esc_html($field['default']);
?>
</option>
<?php
}
foreach ($field['meta'] as $option) {
?>
<option value="<?php
echo esc_attr($option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</option>
<?php
}
?>
</select>
<?php
if (isset($field['description'])) {
echo wp_kses_post($field['description']);
}
?>
<?php
break;
case 'font_select':
$fonts = array_merge(themify_get_web_safe_font_list(), themify_get_google_web_fonts_list());
?>
<select id="<?php
echo esc_attr($field['id']);
?>
" name="<?php
echo esc_attr($field['id']);
?>
" class="tfb_lb_option <?php
echo esc_attr($field['class']);
?>
">
<?php
if (isset($field['default'])) {
?>
<option value="<?php
echo esc_attr($field['default']);
?>
"><?php
echo esc_html($field['default']);
?>
</option>
<?php
}
foreach ($fonts as $option) {
?>
<option value="<?php
echo esc_attr($option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</option>
<?php
}
?>
</select>
<?php
if (isset($field['description'])) {
echo wp_kses_post($field['description']);
}
?>
<?php
break;
case 'color':
?>
<span class="builderColorSelect"><span></span></span>
<input type="text" class="<?php
echo esc_attr($field['class']);
?>
colordisplay"/>
<input id="<?php
echo esc_attr($field['id']);
?>
" name="<?php
echo esc_attr($field['id']);
?>
" value="" class="builderColorSelectInput tfb_lb_option" type="text" />
<?php
break;
case 'radio':
foreach ($field['meta'] as $option) {
?>
<input type="radio" id="<?php
echo esc_attr($field['id'] . '_' . $option['value']);
?>
" name="<?php
echo esc_attr($field['id']);
?>
" value="<?php
echo esc_attr($option['value']);
?>
" class="tfb_lb_option" <?php
checked(isset($option['selected']) ? $option['selected'] : false, true);
?>
> <label for="<?php
echo esc_attr($field['id'] . '_' . $option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</label>
<?php
}
break;
case 'textarea':
if (!array_key_exists('rows', $field) || empty($field['rows'])) {
$field['rows'] = '3';
}
?>
<textarea id="<?php
echo esc_attr($field['id']);
?>
" name="<?php
echo esc_attr($field['id']);
?>
" class="<?php
echo esc_attr($field['class']);
?>
tfb_lb_option" rows="<?php
echo esc_attr($field['rows']);
?>
"></textarea>
<?php
if (isset($field['description'])) {
?>
<small>
<br>
<small>
<?php
echo wp_kses_post($field['description']);
?>
</small>
</small>
<?php
}
break;
}
}
/**
* Get custom style
*
* @since 2.2.5 New parameter $format to return output enclosed in style tags or not.
*
* @param string $style_id
* @param string $mod_name
* @param array $settings
* @param boolean $array
* @param string $format Use 'tag' to return the CSS enclosed in <style> tags. This mode is used while user is logged in and Builder is active. Use 'css' to return only the CSS. This mode is used on stylesheet generation.
*
* @return string|array
*/
function get_custom_styling_legacy($style_id, $mod_name, $settings, $array = false, $format = 'tag')
{
global $themify;
if (!isset($themify->builder_google_fonts)) {
$themify->builder_google_fonts = '';
}
$rules_arr = array('font_size' => array('prop' => 'font-size', 'key' => array('font_size', 'font_size_unit')), 'font_family' => array('prop' => 'font-family', 'key' => 'font_family'), 'line_height' => array('prop' => 'line-height', 'key' => array('line_height', 'line_height_unit')), 'text_align' => array('prop' => 'text-align', 'key' => 'text_align'), 'color' => array('prop' => 'color', 'key' => 'font_color'), 'link_color' => array('prop' => 'color', 'key' => 'link_color'), 'text_decoration' => array('prop' => 'text-decoration', 'key' => 'text_decoration'), 'background_color' => array('prop' => 'background-color', 'key' => 'background_color'), 'background_image' => array('prop' => 'background-image', 'key' => 'background_image'), 'background_repeat' => array('prop' => 'background-repeat', 'key' => 'background_repeat'), 'background_position' => array('prop' => 'background-position', 'key' => array('background_position_x', 'background_position_y')), 'padding' => array('prop' => 'padding', 'key' => array('padding_top', 'padding_right', 'padding_bottom', 'padding_left')), 'margin' => array('prop' => 'margin', 'key' => array('margin_top', 'margin_right', 'margin_bottom', 'margin_left')), 'border_top' => array('prop' => 'border-top', 'key' => array('border_top_color', 'border_top_width', 'border_top_style')), 'border_right' => array('prop' => 'border-right', 'key' => array('border_right_color', 'border_right_width', 'border_right_style')), 'border_bottom' => array('prop' => 'border-bottom', 'key' => array('border_bottom_color', 'border_bottom_width', 'border_bottom_style')), 'border_left' => array('prop' => 'border-left', 'key' => array('border_left_color', 'border_left_width', 'border_left_style')));
if ($mod_name != 'row') {
$styles_selector = Themify_Builder_Model::$modules[$mod_name]->get_css_selectors();
} else {
$styles_selector = array('.module_row' => array('background_image', 'background_color', 'font_family', 'font_size', 'line_height', 'text_align', 'color', 'padding', 'margin', 'border_top', 'border_right', 'border_bottom', 'border_left'), '.module_row a' => array('link_color', 'text_decoration'), '.module_row h1' => array('color'), '.module_row h2' => array('color'), '.module_row h3:not(.module-title)' => array('color'), '.module_row h4' => array('color'), '.module_row h5' => array('color'), '.module_row h6' => array('color'));
}
$rules = array();
$css = array();
$style = '';
foreach ($styles_selector as $selector => $properties) {
$property_arr = array();
foreach ($properties as $property) {
array_push($property_arr, $rules_arr[$property]);
}
$rules[$style_id . $selector] = $property_arr;
}
foreach ($rules as $selector => $property) {
foreach ($property as $val) {
$prop = $val['prop'];
$key = $val['key'];
if (is_array($key)) {
if ($prop == 'font-size' && isset($settings[$key[0]]) && '' != $settings[$key[0]]) {
$css[$selector][$prop] = $prop . ': ' . $settings[$key[0]] . $settings[$key[1]];
} else {
if ($prop == 'line-height' && isset($settings[$key[0]]) && '' != $settings[$key[0]]) {
$css[$selector][$prop] = $prop . ': ' . $settings[$key[0]] . $settings[$key[1]];
} else {
if ($prop == 'background-position' && isset($settings[$key[0]]) && '' != $settings[$key[0]]) {
$css[$selector][$prop] = $prop . ': ' . $settings[$key[0]] . ' ' . $settings[$key[1]];
} else {
if ($prop == 'padding') {
$padding['top'] = isset($settings[$key[0]]) && '' != $settings[$key[0]] ? $settings[$key[0]] : '';
$padding['right'] = isset($settings[$key[1]]) && '' != $settings[$key[1]] ? $settings[$key[1]] : '';
$padding['bottom'] = isset($settings[$key[2]]) && '' != $settings[$key[2]] ? $settings[$key[2]] : '';
$padding['left'] = isset($settings[$key[3]]) && '' != $settings[$key[3]] ? $settings[$key[3]] : '';
foreach ($padding as $k => $v) {
if ('' == $v) {
continue;
}
$unit = isset($settings["padding_{$k}_unit"]) ? $settings["padding_{$k}_unit"] : 'px';
$css[$selector]['padding-' . $k] = 'padding-' . $k . ' : ' . $v . $unit;
}
} else {
if ($prop == 'margin') {
$margin['top'] = isset($settings[$key[0]]) && '' != $settings[$key[0]] ? $settings[$key[0]] : '';
$margin['right'] = isset($settings[$key[1]]) && '' != $settings[$key[1]] ? $settings[$key[1]] : '';
$margin['bottom'] = isset($settings[$key[2]]) && '' != $settings[$key[2]] ? $settings[$key[2]] : '';
$margin['left'] = isset($settings[$key[3]]) && '' != $settings[$key[3]] ? $settings[$key[3]] : '';
foreach ($margin as $k => $v) {
if ('' == $v) {
continue;
}
$unit = isset($settings["margin_{$k}_unit"]) ? $settings["margin_{$k}_unit"] : 'px';
$css[$selector]['margin-' . $k] = 'margin-' . $k . ' : ' . $v . $unit;
}
} else {
if (in_array($prop, array('border-top', 'border-right', 'border-bottom', 'border-left'))) {
$border['color'] = isset($settings[$key[0]]) && '' != $settings[$key[0]] ? '#' . $settings[$key[0]] : '';
$border['width'] = isset($settings[$key[1]]) && '' != $settings[$key[1]] ? $settings[$key[1]] . 'px' : '';
$border['style'] = isset($settings[$key[2]]) && '' != $settings[$key[2]] ? $settings[$key[2]] : '';
$css[$selector][$prop] = $this->build_color_props(array('color_opacity' => $border['color'], 'property' => $prop, 'border_width' => $border['width'], 'border_style' => $border['style']));
if (empty($border['color']) && empty($border['width']) && empty($border['style'])) {
unset($css[$selector][$prop]);
}
}
}
}
}
}
}
} elseif (isset($settings[$key]) && 'default' != $settings[$key] && '' != $settings[$key]) {
if ($prop == 'color' || stripos($prop, 'color')) {
$css[$selector][$prop] = $this->build_color_props(array('color_opacity' => $settings[$key], 'property' => $prop));
} elseif ($prop == 'background-image' && 'default' != $settings[$key]) {
$css[$selector][$prop] = $prop . ': url(' . $settings[$key] . ')';
if (isset($settings['background_type']) && 'video' == $settings['background_type']) {
$css[$selector][$prop] .= ";\n\tbackground-size: cover";
}
} elseif ($prop == 'font-family') {
$font = $settings[$key];
$css[$selector][$prop] = $prop . ': ' . $font;
if (!in_array($font, themify_get_web_safe_font_list(true))) {
$themify->builder_google_fonts .= str_replace(' ', '+', $font . '|');
}
} else {
$css[$selector][$prop] = $prop . ': ' . $settings[$key];
}
}
}
if (!empty($css[$selector])) {
$style .= "{$selector} {\n\t" . implode(";\n\t", $css[$selector]) . "\n}\n";
}
}
if (!$array) {
if ('' != $style) {
if ('tag' == $format) {
return "\n<!-- {$style_id} Style -->\n<style>\n{$style}</style>\n<!-- End {$style_id} Style -->\n";
} else {
return "/* {$style_id} Style */\n{$style}\n";
}
}
} else {
if ($array) {
return $css;
}
}
}
/**
* Displays the controls to setup the font.
*
* @param object $values
*/
function render_fonts($values, $args = array())
{
$defaults = array('show_size' => true, 'show_family' => true, 'show_lineheight' => true, 'show_decoration' => true, 'show_transform' => true, 'show_align' => true);
$args = wp_parse_args($args, $defaults);
// Font family
$font_family = '';
if (isset($values->family)) {
$font_family = !empty($values->family->name) ? $values->family->name : '';
}
// Font styles and decoration
$font_weight = !empty($values->bold) ? $values->bold : '';
$font_italic = !empty($values->italic) ? $values->italic : '';
$font_underline = !empty($values->underline) ? $values->underline : '';
$font_linethrough = !empty($values->linethrough) ? $values->linethrough : '';
$font_normal = !empty($values->normal) ? $values->normal : '';
$font_nostyle = !empty($values->nostyle) ? $values->nostyle : '';
// Text transform
$text_transform = !empty($values->texttransform) ? $values->texttransform : '';
// Text align
$font_align = !empty($values->align) ? $values->align : '';
$font_noalign = !empty($values->noalign) ? $values->noalign : '';
// Font size
$font_size_num = isset($values->sizenum) ? $values->sizenum : '';
$font_size_unit = isset($values->sizeunit) ? $values->sizeunit : 'px';
// Line height
$font_line_num = isset($values->linenum) ? $values->linenum : '';
$font_line_unit = isset($values->lineunit) ? $values->lineunit : 'px';
$units = array('px', '%', 'em');
$value = $name = '';
?>
<!-- FONT SIZE -->
<div class="themify-customizer-brick">
<?php
if ($args['show_size']) {
?>
<input type="text" class="font_size_num" value="<?php
echo esc_attr(empty($font_size_num) ? '' : $font_size_num);
?>
" />
<div class="custom-select">
<select class="font_size_unit">
<?php
foreach ($units as $unit) {
?>
<option value="<?php
echo esc_attr($unit);
?>
" <?php
selected($unit, $font_size_unit);
?>
><?php
echo esc_html($unit);
?>
</option>
<?php
}
?>
</select>
</div>
<?php
}
// show_size
?>
<?php
if ($args['show_family']) {
?>
<!-- FONT FAMILY -->
<div class="custom-select themify_combobox font-family-select">
<?php
if (empty(self::$webfonts)) {
?>
<?php
global $themify_gfonts;
$f = themify_get_web_safe_font_list();
unset($f[0], $f[1]);
foreach ($f as $v) {
self::$webfonts[$v['value']] = array('name' => $v['name'], 'value' => $v['value']);
}
if (!empty($themify_gfonts)) {
foreach ($themify_gfonts as $v) {
self::$googlefonts[$v['family']] = array('name' => $v['family'], 'subsets' => isset($v['subsets']) ? $v['subsets'] : '');
}
}
?>
<input id="themify_fonts_hidden" type="hidden" value="<?php
esc_attr_e(wp_json_encode(array('google' => array_values(self::$googlefonts), 'fonts' => array_values(self::$webfonts))));
?>
" />
<?php
}
?>
<?php
if ($font_family) {
?>
<?php
$value = isset(self::$webfonts[$font_family]) ? self::$webfonts[$font_family] : (isset(self::$googlefonts[$font_family]) ? self::$googlefonts[$font_family] : false);
?>
<?php
}
?>
<select class="themify_font_family" id="<?php
echo esc_attr($this->id . '_font_family');
?>
" data-selected="<?php
echo $font_family ? esc_attr($font_family) : '';
?>
">
<optgroup label="<?php
_e('Web Safe Fonts', 'themify');
?>
">
<?php
if ($value && isset(self::$webfonts[$font_family])) {
?>
<?php
$value['fonttype'] = 'websafe';
?>
<option value="<?php
esc_attr_e(wp_json_encode($value));
?>
"><?php
echo $value['name'];
?>
</option>
<?php
}
?>
</optgroup>
<optgroup label="<?php
_e('Google Fonts', 'themify');
?>
">
<?php
if ($value && isset(self::$googlefonts[$font_family])) {
?>
<?php
$value['fonttype'] = 'google';
?>
<option value="<?php
esc_attr_e(wp_json_encode($value));
?>
"><?php
echo $value['name'];
?>
</option>
<?php
}
?>
</optgroup>
</select>
</div>
<?php
if (isset($args['font_family_label']) && !empty($args['font_family_label'])) {
?>
<label for="<?php
echo esc_attr($this->id . '_font_family');
?>
" class="font-family-label"><?php
echo esc_html($args['font_family_label']);
?>
</label>
<?php
}
?>
<?php
}
// show_family
?>
</div>
<?php
if ($args['show_lineheight']) {
?>
<div class="themify-customizer-brick">
<!-- LINE HEIGHT -->
<input type="text" class="font_line_num" value="<?php
echo esc_attr(empty($font_line_num) ? '' : $font_size_num);
?>
" />
<div class="custom-select">
<select class="font_line_unit">
<?php
foreach ($units as $unit) {
?>
<option value="<?php
echo esc_attr($unit);
?>
" <?php
selected($unit, $font_line_unit);
?>
><?php
echo esc_html($unit);
?>
</option>
<?php
}
?>
</select>
</div>
<label><?php
_e('Line Height', 'themify');
?>
</label>
</div>
<?php
}
// show_lineheight
?>
<?php
if ($args['show_decoration']) {
?>
<!-- TEXT STYLE & DECORATION -->
<div class="themify_font_style themify-customizer-brick">
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_italic, 'italic'));
?>
" data-style="italic"><?php
_e('i', 'themify');
?>
</button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_normal, 'normal'));
?>
" data-style="normal"><?php
_e('N', 'themify');
?>
</button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_weight, 'bold'));
?>
" data-style="bold"><?php
_e('B', 'themify');
?>
</button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_underline, 'underline'));
?>
" data-style="underline"><?php
_e('U', 'themify');
?>
</button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_linethrough, 'linethrough'));
?>
" data-style="linethrough"><?php
_e('S', 'themify');
?>
</button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_nostyle, 'nostyle'));
?>
" data-style="nostyle"><?php
_e('×', 'themify');
?>
</button>
</div>
<?php
}
// show_decoration
?>
<?php
if ($args['show_transform']) {
?>
<!-- TEXT TRANSFORM -->
<div class="themify_text_transform themify-customizer-brick">
<button type="button" class="button <?php
echo esc_attr($this->style_is($text_transform, 'uppercase'));
?>
" data-texttransform="uppercase"><?php
_e('AA', 'themify');
?>
</button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($text_transform, 'lowercase'));
?>
" data-texttransform="lowercase"><?php
_e('ab', 'themify');
?>
</button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($text_transform, 'capitalize'));
?>
" data-texttransform="capitalize"><?php
_e('Ab', 'themify');
?>
</button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($text_transform, 'notexttransform'));
?>
" data-texttransform="notexttransform"><?php
_e('×', 'themify');
?>
</button>
</div>
<?php
}
// show_transform
?>
<?php
if ($args['show_align']) {
?>
<!-- TEXT ALIGN -->
<div class="themify_font_align themify-customizer-brick">
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_align, 'left'));
?>
" data-align="left"><span class="ti-align-left"></span></button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_align, 'center'));
?>
" data-align="center"><span class="ti-align-center"></span></button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_align, 'right'));
?>
" data-align="right"><span class="ti-align-right"></span></button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_align, 'justify'));
?>
" data-align="justify"><span class="ti-align-justify"></span></button>
<button type="button" class="button <?php
echo esc_attr($this->style_is($font_noalign, 'noalign'));
?>
" data-align="noalign"><?php
_e('×', 'themify');
?>
</button>
</div>
<?php
}
// show_align
?>
<?php
}
/**
* Outputs custom post CSS at the end of a post
* @since 1.0.0
*/
function themify_theme_custom_post_css()
{
global $themify;
$post_id = '.section-post.post-' . get_the_ID();
$css = array();
$style = '';
if (!isset($themify->google_fonts)) {
$themify->google_fonts = '';
}
$rules = array("{$post_id}, {$post_id} h1, {$post_id} h2, {$post_id} h3, {$post_id} h4, {$post_id} h5, {$post_id} h6" => array(array('prop' => 'font-size', 'key' => array('font_size', 'font_size_unit')), array('prop' => 'font-family', 'key' => 'font_family'), array('prop' => 'color', 'key' => 'font_color')), "{$post_id} .section-title" => array(array('prop' => 'font-size', 'key' => array('title_font_size', 'font_size_unit')), array('prop' => 'font-family', 'key' => 'title_font_family'), array('prop' => 'color', 'key' => 'title_font_color')), $post_id => array(array('prop' => 'background-color', 'key' => 'background_color'), array('prop' => 'background-image', 'key' => 'background_image'), array('prop' => 'background-repeat', 'key' => 'background_repeat'), array('prop' => 'background-position', 'key' => array('background_position_x', 'background_position_y'))), "{$post_id} a" => array(array('prop' => 'color', 'key' => 'link_color')));
foreach ($rules as $selector => $property) {
foreach ($property as $val) {
$prop = $val['prop'];
$key = $val['key'];
if (is_array($key)) {
if ($prop == 'font-size' && themify_check($key[0])) {
$css[$selector][$prop] = $prop . ': ' . themify_get($key[0]) . themify_get($key[1]);
}
if ($prop == 'background-position' && themify_check($key[0])) {
$css[$selector][$prop] = $prop . ': ' . themify_get($key[0]) . ' ' . themify_get($key[1]);
}
} elseif (themify_check($key) && 'default' != themify_get($key)) {
if ($prop == 'color' || stripos($prop, 'color')) {
$css[$selector][$prop] = $prop . ': #' . themify_get($key);
} elseif ($prop == 'background-image') {
$css[$selector][$prop] = $prop . ': url(' . themify_get($key) . ')';
} elseif ($prop == 'font-family') {
$font = themify_get($key);
$css[$selector][$prop] = $prop . ': ' . $font;
if (!in_array($font, themify_get_web_safe_font_list(true))) {
$themify->google_fonts .= str_replace(' ', '+', $font . '|');
}
} else {
$css[$selector][$prop] = $prop . ': ' . themify_get($key);
}
}
}
if (!empty($css[$selector])) {
$style .= "{$selector} {\n\t" . implode(";\n\t", $css[$selector]) . "\n}\n";
}
}
if ('' != $style) {
echo "\n<!-- {$post_id} Style -->\n<style>\n{$style}</style>\n<!-- End {$post_id} Style -->\n";
}
}
/**
* Module Styling Fields
* @param array $styling
* @return string
*/
function themify_builder_styling_field($styling)
{
switch ($styling['type']) {
case 'text':
?>
<input id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" type="text" value="" class="<?php
echo esc_attr($styling['class']);
?>
tfb_lb_option">
<?php
if (isset($styling['description'])) {
echo '<small>' . wp_kses_post($styling['description']) . '</small>';
}
?>
<?php
break;
case 'textarea':
?>
<textarea id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" class="<?php
echo esc_attr($styling['class']);
?>
tfb_lb_option"><?php
if (isset($styling['value'])) {
echo esc_textarea($styling['value']);
}
?>
</textarea>
<?php
if (isset($styling['description'])) {
echo '<small>' . wp_kses_post($styling['description']) . '</small>';
}
?>
<?php
break;
case 'separator':
echo isset($styling['meta']['html']) && '' != $styling['meta']['html'] ? $styling['meta']['html'] : '<hr class="meta_fields_separator" />';
break;
case 'image':
?>
<input id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" placeholder="<?php
if (isset($styling['value'])) {
echo esc_attr($styling['value']);
}
?>
" class="<?php
echo esc_attr($styling['class']);
?>
themify-builder-uploader-input tfb_lb_option" type="text" /><br />
<div class="small">
<?php
if (is_multisite() && !is_upload_space_available()) {
?>
<?php
echo sprintf(__('Sorry, you have filled your %s MB storage quota so uploading has been disabled.', 'themify'), get_space_allowed());
?>
<?php
} else {
?>
<div class="themify-builder-plupload-upload-uic hide-if-no-js tf-upload-btn" id="<?php
echo esc_attr($styling['id']);
?>
themify-builder-plupload-upload-ui">
<input id="<?php
echo esc_attr($styling['id']);
?>
themify-builder-plupload-browse-button" type="button" value="<?php
esc_attr_e(__('Upload', 'themify'));
?>
" class="builder_button" />
<span class="ajaxnonceplu" id="ajaxnonceplu<?php
echo wp_create_nonce($styling['id'] . 'themify-builder-plupload');
?>
"></span>
</div> <?php
_e('or', 'themify');
?>
<a href="#" class="themify-builder-media-uploader tf-upload-btn" data-uploader-title="<?php
esc_attr_e('Upload an Image', 'themify');
?>
" data-uploader-button-text="<?php
esc_attr_e('Insert file URL', 'themify');
?>
"><?php
_e('Browse Library', 'themify');
?>
</a>
<?php
}
?>
</div>
<p class="thumb_preview">
<span class="img-placeholder"></span>
<a href="#" class="themify_builder_icon small delete themify-builder-delete-thumb"></a>
</p>
<?php
break;
case 'video':
?>
<input id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" placeholder="<?php
if (isset($styling['value'])) {
echo esc_attr($styling['value']);
}
?>
" class="<?php
echo esc_attr($styling['class']);
?>
themify-builder-uploader-input tfb_lb_option" type="text" /><br />
<div class="small">
<?php
if (is_multisite() && !is_upload_space_available()) {
?>
<?php
echo sprintf(__('Sorry, you have filled your %s MB storage quota so uploading has been disabled.', 'themify'), get_space_allowed());
?>
<?php
} else {
?>
<div class="themify-builder-plupload-upload-uic hide-if-no-js tf-upload-btn" id="<?php
echo esc_attr($styling['id']);
?>
themify-builder-plupload-upload-ui" data-extensions="<?php
echo esc_attr(implode(',', wp_get_video_extensions()));
?>
">
<input id="<?php
echo esc_attr($styling['id']);
?>
themify-builder-plupload-browse-button" type="button" value="<?php
esc_attr_e(__('Upload', 'themify'));
?>
" class="builder_button" />
<span class="ajaxnonceplu" id="ajaxnonceplu<?php
echo wp_create_nonce($styling['id'] . 'themify-builder-plupload');
?>
"></span>
</div> <?php
_e('or', 'themify');
?>
<a href="#" class="themify-builder-media-uploader tf-upload-btn" data-uploader-title="<?php
_e('Upload a Video', 'themify');
?>
" data-uploader-button-text="<?php
esc_attr_e('Insert file URL', 'themify');
?>
" data-library-type="video"><?php
_e('Browse Library', 'themify');
?>
</a>
<?php
}
?>
</div>
<?php
if (isset($styling['description'])) {
echo '<small>' . wp_kses_post($styling['description']) . '</small>';
}
?>
<?php
break;
case 'select':
?>
<select id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option <?php
echo isset($styling['class']) ? esc_attr($styling['class']) : '';
?>
">
<?php
if (isset($styling['default'])) {
?>
<option value="<?php
echo esc_attr($styling['default']);
?>
"><?php
echo esc_html($styling['default']);
?>
</option>
<?php
}
foreach ($styling['meta'] as $option) {
?>
<option value="<?php
echo esc_attr($option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</option>
<?php
}
?>
</select>
<?php
if (isset($styling['description'])) {
echo wp_kses_post($styling['description']);
}
?>
<?php
break;
case 'animation_select':
?>
<?php
$class = isset($styling['class']) ? $styling['class'] : '';
?>
<select id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option <?php
echo esc_attr($class);
?>
">
<option value=""></option>
<?php
$animation = Themify_Builder_model::get_preset_animation();
foreach ($animation as $group) {
?>
<optgroup label="<?php
echo esc_attr($group['group_label']);
?>
">
<?php
foreach ($group['options'] as $opt) {
?>
<option value="<?php
echo esc_attr($opt['value']);
?>
"><?php
echo esc_html($opt['name']);
?>
</option>
<?php
}
?>
</optgroup>
<?php
}
?>
</select>
<?php
if (isset($styling['description'])) {
echo wp_kses_post($styling['description']);
}
?>
<?php
break;
case 'font_select':
$fonts = array_merge(themify_get_web_safe_font_list(), themify_get_google_web_fonts_list());
?>
<select id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option <?php
echo esc_attr($styling['class']);
?>
">
<?php
if (isset($styling['default'])) {
?>
<option value="<?php
echo esc_attr($styling['default']);
?>
"><?php
echo esc_html($styling['default']);
?>
</option>
<?php
}
foreach ($fonts as $option) {
?>
<option value="<?php
echo esc_attr($option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</option>
<?php
}
?>
</select>
<?php
if (isset($styling['description'])) {
echo wp_kses_post($styling['description']);
}
?>
<?php
break;
case 'color':
?>
<span class="builderColorSelect"><span></span></span>
<input type="text" class="<?php
echo esc_attr($styling['class']);
?>
colordisplay"/>
<input id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" value="" class="builderColorSelectInput tfb_lb_option" type="hidden" />
<?php
break;
case 'checkbox':
if (isset($styling['before'])) {
echo wp_kses_post($styling['before']);
}
?>
<div id="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option themify-checkbox">
<?php
foreach ($styling['options'] as $opt) {
?>
<?php
$checkbox_checked = '';
if (isset($styling['default']) && is_array($styling['default'])) {
$checkbox_checked = in_array($opt['name'], $styling['default']) ? 'checked="checked"' : '';
} elseif (isset($styling['default'])) {
$checkbox_checked = checked($styling['default'], $opt['name'], false);
}
?>
<input id="<?php
echo esc_attr($styling['id'] . '_' . $opt['name']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" type="checkbox" class="tfb_lb_option tf-checkbox" value="<?php
echo esc_attr($opt['name']);
?>
" <?php
echo $checkbox_checked;
?>
/>
<label for="<?php
echo esc_attr($styling['id'] . '_' . $opt['name']);
?>
" class="pad-right"><?php
echo wp_kses_post($opt['value']);
?>
</label>
<?php
if (isset($opt['help'])) {
?>
<small><?php
echo wp_kses_post($opt['help']);
?>
</small>
<?php
}
?>
<?php
if (!isset($styling['new_line']) || $styling['new_line'] == true) {
?>
<br />
<?php
}
?>
<?php
}
?>
</div>
<?php
if (isset($styling['after'])) {
echo wp_kses_post($styling['after']);
}
break;
case 'radio':
$option_js = isset($styling['option_js']) && $styling['option_js'] == true ? 'tf-option-checkbox-js' : '';
$option_js_wrap = isset($styling['option_js']) && $styling['option_js'] == true ? 'tf-option-checkbox-enable' : '';
?>
<div id="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option tf-radio-input-container <?php
echo esc_attr($option_js_wrap);
?>
">
<?php
foreach ($styling['meta'] as $option) {
$checked = isset($option['selected']) && $option['selected'] == true ? 'checked="checked"' : '';
$data_el = isset($styling['option_js']) && $styling['option_js'] == true ? 'data-selected="tf-group-element-' . $option['value'] . '"' : '';
?>
<input type="radio" id="<?php
echo esc_attr($styling['id'] . '_' . $option['value']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" value="<?php
echo esc_attr($option['value']);
?>
" class="tfb_lb_option <?php
echo esc_attr($option_js);
?>
" <?php
echo $checked . ' ' . $data_el;
?>
> <label for="<?php
echo esc_attr($styling['id'] . '_' . $option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</label>
<?php
}
?>
<?php
if (isset($styling['description'])) {
echo '<br/><small>' . wp_kses_post($styling['description']) . '</small>';
}
?>
</div>
<?php
break;
}
}
/**
* Theme Appearance Tab for Themify Custom Panel
*
* @since 1.0.0
*
* @param array $args
*
* @return array
*/
function themify_theme_page_theme_design_meta_box($args = array())
{
return array(array('name' => 'body_background_color', 'title' => __('Body Background', 'themify'), 'description' => '', 'type' => 'color', 'meta' => array('default' => null)), array('name' => 'body_background_image', 'title' => '', 'type' => 'image', 'description' => '', 'meta' => array(), 'before' => '', 'after' => ''), array('name' => 'body_background_repeat', 'title' => '', 'description' => __('Background Repeat', 'themify'), 'type' => 'dropdown', 'meta' => array(array('value' => 'fullcover', 'name' => __('Fullcover', 'themify')), array('value' => 'repeat', 'name' => __('Repeat', 'themify')), array('value' => 'no-repeat', 'name' => __('No Repeat', 'themify')), array('value' => 'repeat-x', 'name' => __('Repeat horizontally', 'themify')), array('value' => 'repeat-y', 'name' => __('Repeat vertically', 'themify')))), array('name' => 'color_scheme_mode', 'title' => __('Accent Color', 'themify'), 'description' => '', 'type' => 'radio', 'show_title' => true, 'meta' => array(array('value' => 'color-presets', 'name' => __('Presets', 'themify'), 'selected' => true), array('value' => 'color-custom', 'name' => __('Custom', 'themify'))), 'enable_toggle' => true), array('name' => 'color_design', 'title' => '', 'description' => '', 'type' => 'layout', 'show_title' => true, 'meta' => $args['color_design_options'], 'toggle' => 'color-presets-toggle'), array('name' => 'scheme_color', 'title' => '', 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'after' => __('Accent Font Color', 'themify'), 'toggle' => 'color-custom-toggle'), array('name' => 'scheme_link', 'title' => '', 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'after' => __('Accent Link Color', 'themify'), 'toggle' => 'color-custom-toggle'), array('name' => 'scheme_background', 'title' => '', 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'after' => __('Accent Background Color', 'themify'), 'toggle' => 'color-custom-toggle'), array('name' => 'typography_mode', 'title' => __('Typography', 'themify'), 'description' => '', 'type' => 'radio', 'show_title' => true, 'meta' => array(array('value' => 'typography-presets', 'name' => __('Presets', 'themify'), 'selected' => true), array('value' => 'typography-custom', 'name' => __('Custom', 'themify'))), 'enable_toggle' => true), array('name' => 'font_design', 'title' => '', 'description' => '', 'type' => 'layout', 'show_title' => true, 'meta' => $args['font_design_options'], 'toggle' => 'typography-presets-toggle'), array('name' => 'body_font', 'title' => '', 'description' => '', 'type' => 'dropdown', 'meta' => array_merge(themify_get_web_safe_font_list(), themify_get_google_web_fonts_list()), 'after' => ' ' . __('Body Font', 'themify'), 'toggle' => 'typography-custom-toggle'), array('name' => 'body_text_color', 'title' => '', 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'after' => __('Body Font Color', 'themify'), 'toggle' => 'typography-custom-toggle'), array('name' => 'body_link_color', 'title' => '', 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'after' => __('Body Link Color', 'themify'), 'toggle' => 'typography-custom-toggle'), array('name' => 'heading_font', 'title' => '', 'description' => '', 'type' => 'dropdown', 'meta' => array_merge(themify_get_web_safe_font_list(), themify_get_google_web_fonts_list()), 'after' => ' ' . __('Heading (h1 to h6)', 'themify'), 'toggle' => 'typography-custom-toggle'), array('name' => 'heading_color', 'title' => '', 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'after' => __('Heading Font Color', 'themify'), 'toggle' => 'typography-custom-toggle'), array('name' => 'header_design', 'title' => __('Header Design', 'themify'), 'description' => '', 'type' => 'layout', 'show_title' => true, 'meta' => $args['header_design_options'], 'hide' => 'none header-leftpane header-minbar boxed-content'), array('name' => 'fixed_header', 'title' => __('Sticky Header', 'themify'), 'description' => '', 'type' => 'radio', 'meta' => themify_ternary_options(), 'class' => 'hide-if none header-leftpane header-minbar boxed-content'), array('name' => 'full_height_header', 'title' => __('Full Height Header', 'themify'), 'description' => __('Full height will display the container in 100% viewport height', 'themify'), 'type' => 'radio', 'meta' => themify_ternary_options(), 'class' => 'hide-if none header-horizontal header-leftpane header-minbar boxed-content'), array('name' => '_multi_header_elements', 'title' => __('Header Elements', 'themify'), 'description' => '', 'type' => 'multi', 'class' => 'hide-if none', 'meta' => array('fields' => array(array('name' => 'exclude_site_logo', 'description' => '', 'title' => __('Show Site Logo', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_site_tagline', 'description' => '', 'title' => __('Show Site Tagline', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_search_form', 'description' => '', 'title' => __('Show Search Form', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_rss', 'description' => '', 'title' => __('Show RSS Link', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_header_widgets', 'description' => '', 'title' => __('Show Header Widgets', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_social_widget', 'description' => '', 'title' => __('Show Social Widget', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_menu_navigation', 'description' => '', 'title' => __('Show Menu Navigation', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>')), 'description' => '', 'before' => '', 'after' => '<div class="clear"></div>', 'separator' => '')), array('name' => 'header_wrap', 'title' => __('Header Background', 'themify'), 'description' => '', 'type' => 'radio', 'show_title' => true, 'meta' => array(array('value' => 'solid', 'name' => __('Solid Background', 'themify'), 'selected' => true), array('value' => 'transparent', 'name' => __('Transparent Background', 'themify')), array('value' => 'slider', 'name' => __('Slider', 'themify')), array('value' => 'video', 'name' => __('Video', 'themify')), array('value' => 'colors', 'name' => __('Animating Colors', 'themify'))), 'enable_toggle' => true, 'class' => 'hide-if none clear'), array('name' => '_animated_colors', 'title' => __('Animating Colors', 'themify'), 'description' => sprintf(__('Animating Colors can be configured at <a href="%s">Themify > Settings > Theme Settings</a>', 'themify'), esc_url(add_query_arg('page', 'themify', admin_url('admin.php')))), 'type' => 'post_id_info', 'toggle' => 'colors-toggle'), array('name' => 'background_gallery', 'title' => __('Header Slider', 'themify'), 'description' => '', 'type' => 'gallery_shortcode', 'toggle' => 'slider-toggle'), array('type' => 'multi', 'name' => '_video_select', 'title' => __('Video', 'themify'), 'meta' => array('fields' => array(array('name' => 'video_file', 'title' => __('Video File', 'themify'), 'description' => '', 'type' => 'video', 'meta' => array())), 'description' => __('Video format: mp4. Note: video background does not play on mobile, background image will be used as fallback.', 'themify'), 'before' => '', 'after' => '', 'separator' => ''), 'toggle' => 'video-toggle'), array('name' => 'background_color', 'title' => '', 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'toggle' => array('solid-toggle', 'slider-toggle', 'video-toggle'), 'class' => 'hide-if none'), array('name' => 'background_image', 'title' => '', 'type' => 'image', 'description' => '', 'meta' => array(), 'before' => '', 'after' => '', 'toggle' => array('solid-toggle', 'video-toggle'), 'class' => 'hide-if none'), array('name' => 'background_repeat', 'title' => '', 'description' => __('Background Repeat', 'themify'), 'type' => 'dropdown', 'meta' => array(array('value' => 'fullcover', 'name' => __('Fullcover', 'themify')), array('value' => 'repeat', 'name' => __('Repeat', 'themify')), array('value' => 'no-repeat', 'name' => __('No Repeat', 'themify')), array('value' => 'repeat-x', 'name' => __('Repeat horizontally', 'themify')), array('value' => 'repeat-y', 'name' => __('Repeat vertically', 'themify'))), 'toggle' => array('solid-toggle', 'video-toggle'), 'class' => 'hide-if none'), array('name' => 'headerwrap_text_color', 'title' => __('Header Text Color', 'themify'), 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'class' => 'hide-if none'), array('name' => 'headerwrap_link_color', 'title' => __('Header Link Color', 'themify'), 'description' => '', 'type' => 'color', 'meta' => array('default' => null), 'class' => 'hide-if none'), array('name' => 'footer_design', 'title' => __('Footer Design', 'themify'), 'description' => '', 'type' => 'layout', 'show_title' => true, 'meta' => $args['footer_design_options'], 'hide' => 'none'), array('name' => '_multi_footer_elements', 'title' => __('Footer Elements', 'themify'), 'description' => '', 'type' => 'multi', 'class' => 'hide-if none', 'meta' => array('fields' => array(array('name' => 'exclude_footer_site_logo', 'description' => '', 'title' => __('Show Site Logo', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_footer_widgets', 'description' => '', 'title' => __('Show Footer Widgets', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_footer_menu_navigation', 'description' => '', 'title' => __('Show Menu Navigation', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_footer_texts', 'description' => '', 'title' => __('Show Footer Text', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>'), array('name' => 'exclude_footer_back', 'description' => '', 'title' => __('Show Back to Top Arrow', 'themify'), 'type' => 'dropdownbutton', 'states' => themify_ternary_states(array('icon_no' => THEMIFY_URI . '/img/ddbtn-check.png', 'icon_yes' => THEMIFY_URI . '/img/ddbtn-cross.png')), 'class' => 'hide-if none', 'after' => '<div class="clear"></div>')), 'description' => '', 'before' => '', 'after' => '<div class="clear"></div>', 'separator' => '')));
}
/**
* Outputs custom post CSS at the end of a post
*
* @since 1.0.0
*/
function themify_theme_custom_post_css()
{
global $themify;
if (in_array(get_post_type(), array('post', 'page', 'portfolio'))) {
$post_id = get_the_ID();
if (is_page()) {
$entry_id = '.page-id-' . $post_id;
$archive_entry_id = '.page-' . $post_id;
} else {
$entry_id = '.postid-' . $post_id;
$archive_entry_id = '.post-' . $post_id;
}
$headerwrap = $entry_id . ' #headerwrap';
$site_logo = $entry_id . ' #site-logo';
$site_description = $entry_id . ' #site-description';
$main_nav = $entry_id . ' #main-nav';
$header_widget = $entry_id . ' .header-widget';
$social_widget = $entry_id . ' .social-widget';
$header_search = $entry_id . ' #searchform-wrap';
$css = array();
$style = '';
$rules = array();
$header_type = themify_get('header_wrap');
if ('transparent' != $header_type) {
$rules = array("{$entry_id} #site-logo span:after, {$entry_id} #headerwrap #searchform, {$entry_id} #main-nav .current_page_item a, {$entry_id} #main-nav .current-menu-item a" => array(array('prop' => 'border-color', 'key' => 'headerwrap_text_color')));
if ('solid' === $header_type) {
$rules[$headerwrap] = array(array('prop' => 'background-color', 'key' => 'background_color'), array('prop' => 'background-image', 'key' => 'background_image'), array('prop' => 'background-repeat', 'key' => 'background_repeat', 'dependson' => array('prop' => 'background-image', 'key' => 'background_image')));
}
}
if (is_singular()) {
$rules = array_merge($rules, array('.skin-styles' => array(array('prop' => 'background-color', 'key' => 'body_background_color'), array('prop' => 'background-image', 'key' => 'body_background_image'), array('prop' => 'background-repeat', 'key' => 'body_background_repeat', 'dependson' => array('prop' => 'background-image', 'key' => 'body_background_image')), array('prop' => 'font-family', 'key' => 'body_font'), array('prop' => 'color', 'key' => 'body_text_color')), '.skin-styles .post-meta, .skin-styles #site-description, .skin-styles .post-date .year, .skin-styles .post-date .month, .skin-styles .post-date .day, .skin-styles .loops-wrapper .entry-content' => array(array('prop' => 'font-family', 'key' => 'body_font'))));
// No space between .skin-styles and $main_nav because the latter has the body classes prepended.
$rules[".skin-styles a, .skin-styles .post-nav .arrow"] = array(array('prop' => 'color', 'key' => 'body_link_color'));
$rules['.skin-styles h1, .skin-styles h2, .skin-styles h3, .skin-styles h4, .skin-styles h5, .skin-styles h6'] = array(array('prop' => 'color', 'key' => 'heading_color'), array('prop' => 'font-family', 'key' => 'heading_font'));
// Accent Background Color
$rules['.skin-styles #headerwrap,.skin-styles #footerwrap,.skin-styles input[type=reset],.skin-styles input[type=submit],.skin-styles button,.skin-styles #respond #cancel-comment-reply-link,.skin-styles .commentlist .comment-reply-link,.skin-styles.footer-horizontal-left .back-top .arrow-up a,.skin-styles.footer-horizontal-right .back-top .arrow-up a,.skin-styles.footer-left-col .back-top .arrow-up a,.skin-styles.footer-right-col .back-top .arrow-up a,.skin-styles.woocommerce #content input.button,.skin-styles.woocommerce #respond input#submit,.skin-styles.woocommerce a.button,.skin-styles.woocommerce button.button,.skin-styles.woocommerce input.button,.skin-styles.woocommerce-page #content input.button,.skin-styles.woocommerce-page #respond input#submit,.skin-styles.woocommerce-page a.button,.skin-styles.woocommerce-page button.button,.skin-styles.woocommerce-page input.button,.skin-styles.woocommerce #content input.button.alt,.skin-styles.woocommerce #respond input#submit.alt,.skin-styles.woocommerce a.button.alt,.skin-styles.woocommerce button.button.alt,.skin-styles.woocommerce input.button.alt,.skin-styles.woocommerce-page #content input.button.alt,.skin-styles.woocommerce-page #respond input#submit.alt,.skin-styles.woocommerce-page a.button.alt,.skin-styles.woocommerce-page button.button.alt,.skin-styles.woocommerce-page input.button.alt,.skin-styles.woocommerce ul.products li.product .add_to_cart_button,.skin-styles.woocommerce-page ul.products li.product .add_to_cart_button,.skin-styles.woocommerce ul.products li.product .button[data-product_id],.skin-styles.woocommerce-page ul.products li.product .button[data-product_id],.skin-styles.woocommerce span.onsale,.skin-styles.woocommerce-page span.onsale,.skin-styles.woocommerce ul.products li.product .onsale,.skin-styles.woocommerce-page ul.products li.product .onsale,.skin-styles.woocommerce-checkout #payment div.payment_box,.skin-styles.woocommerce #content nav.woocommerce-pagination ul li a:focus,.skin-styles.woocommerce #content nav.woocommerce-pagination ul li a:hover,.skin-styles.woocommerce #content nav.woocommerce-pagination ul li span.current,.skin-styles.woocommerce nav.woocommerce-pagination ul li a:focus,.skin-styles.woocommerce nav.woocommerce-pagination ul li a:hover,.skin-styles.woocommerce nav.woocommerce-pagination ul li span.current,.skin-styles.woocommerce-page #content nav.woocommerce-pagination ul li a:focus,.skin-styles.woocommerce-page #content nav.woocommerce-pagination ul li a:hover,.skin-styles.woocommerce-page #content nav.woocommerce-pagination ul li span.current,.skin-styles.woocommerce-page nav.woocommerce-pagination ul li a:focus,.skin-styles.woocommerce-page nav.woocommerce-pagination ul li a:hover,.skin-styles.woocommerce-page nav.woocommerce-pagination ul li span.current,.skin-styles.woocommerce #content table.cart a.remove:hover,.skin-styles.woocommerce table.cart a.remove:hover,.skin-styles.woocommerce-page #content table.cart a.remove:hover,.skin-styles.woocommerce-page table.cart a.remove:hover'] = array(array('prop' => 'background-color', 'key' => 'scheme_background'));
// Accent Font Color
$rules['.skin-styles #headerwrap,.skin-styles #footerwrap,.footer-widgets .widgettitle,.skin-styles #site-description,.skin-styles input[type=reset],.skin-styles input[type=submit],.skin-styles button,.skin-styles #respond #cancel-comment-reply-link,.skin-styles .commentlist .comment-reply-link,.skin-styles .post-title a,.skin-styles #main-nav > li > a,.skin-styles #main-nav > .current_page_item > a,.skin-styles #main-nav > .current-menu-item > a,.skin-styles #main-nav > li > a:hover,.skin-styles.footer-horizontal-left .back-top .arrow-up a,.skin-styles.footer-horizontal-right .back-top .arrow-up a,.skin-styles.footer-left-col .back-top .arrow-up a,.skin-styles.footer-right-col .back-top .arrow-up a,.skin-styles.woocommerce #content input.button,.skin-styles.woocommerce #respond input#submit,.skin-styles.woocommerce a.button,.skin-styles.woocommerce button.button,.skin-styles.woocommerce input.button,.skin-styles.woocommerce-page #content input.button,.skin-styles.woocommerce-page #respond input#submit,.skin-styles.woocommerce-page a.button,.skin-styles.woocommerce-page button.button,.skin-styles.woocommerce-page input.button,.skin-styles.woocommerce #content input.button.alt,.skin-styles.woocommerce #respond input#submit.alt,.skin-styles.woocommerce a.button.alt,.skin-styles.woocommerce button.button.alt,.skin-styles.woocommerce input.button.alt,.skin-styles.woocommerce-page #content input.button.alt,.skin-styles.woocommerce-page #respond input#submit.alt,.skin-styles.woocommerce-page a.button.alt,.skin-styles.woocommerce-page button.button.alt,.skin-styles.woocommerce-page input.button.alt,.skin-styles.woocommerce ul.products li.product .add_to_cart_button,.skin-styles.woocommerce-page ul.products li.product .add_to_cart_button,.skin-styles.woocommerce ul.products li.product .button[data-product_id],.skin-styles.woocommerce-page ul.products li.product .button[data-product_id],.skin-styles.woocommerce span.onsale,.skin-styles.woocommerce-page span.onsale,.skin-styles.woocommerce ul.products li.product .onsale,.skin-styles.woocommerce-page ul.products li.product .onsale,.skin-styles.woocommerce-checkout #payment div.payment_box,.skin-styles.woocommerce #content nav.woocommerce-pagination ul li a:focus,.skin-styles.woocommerce #content nav.woocommerce-pagination ul li a:hover,.skin-styles.woocommerce #content nav.woocommerce-pagination ul li span.current,.skin-styles.woocommerce nav.woocommerce-pagination ul li a:focus,.skin-styles.woocommerce nav.woocommerce-pagination ul li a:hover,.skin-styles.woocommerce nav.woocommerce-pagination ul li span.current,.skin-styles.woocommerce-page #content nav.woocommerce-pagination ul li a:focus,.skin-styles.woocommerce-page #content nav.woocommerce-pagination ul li a:hover,.skin-styles.woocommerce-page #content nav.woocommerce-pagination ul li span.current,.skin-styles.woocommerce-page nav.woocommerce-pagination ul li a:focus,.skin-styles.woocommerce-page nav.woocommerce-pagination ul li a:hover,.skin-styles.woocommerce-page nav.woocommerce-pagination ul li span.current,.skin-styles.woocommerce #content table.cart a.remove:hover,.skin-styles.woocommerce table.cart a.remove:hover,.skin-styles.woocommerce-page #content table.cart a.remove:hover,.skin-styles.woocommerce-page table.cart a.remove:hover'] = array(array('prop' => 'color', 'key' => 'scheme_color'));
// Accent Link Color
$rules['.skin-styles #headerwrap a, .skin-styles #footerwrap a, .skin-styles .sidemenu a, .skin-styles .post-nav .arrow, .skin-styles .widget .social-links a, .skin-styles .widget .social-links a:hover, .skin-styles .footer-nav li a'] = array(array('prop' => 'color', 'key' => 'scheme_link'));
$rules['.skin-styles.woocommerce .woocommerce-error,.skin-styles.woocommerce .woocommerce-info,.skin-styles.woocommerce .woocommerce-message,.skin-styles.woocommerce-page .woocommerce-error,.skin-styles.woocommerce-page .woocommerce-info,.skin-styles.woocommerce-page .woocommerce-message'] = array(array('prop' => 'border-top-color', 'key' => 'scheme_background'));
$rules['.skin-styles.woocommerce-checkout #payment div.payment_box:after'] = array(array('prop' => 'border-bottom-color', 'key' => 'scheme_background'));
$rules['.skin-styles .post-title a:hover'] = array(array('prop' => 'color', 'key' => 'scheme_background'));
}
$rules["{$headerwrap}, {$site_logo}, {$site_description}"] = array(array('prop' => 'color', 'key' => 'headerwrap_text_color'));
$rules["{$site_logo} a, {$site_description} a, {$header_widget} a, {$social_widget} a, {$social_widget} .rss a, {$main_nav} > li > a"] = array(array('prop' => 'color', 'key' => 'headerwrap_link_color'));
foreach ($rules as $selector => $property) {
foreach ($property as $val) {
$prop = $val['prop'];
$key = $val['key'];
if (is_array($key)) {
if ($prop == 'font-size' && themify_check($key[0])) {
$css[$selector][$prop] = $prop . ': ' . themify_get($key[0]) . themify_get($key[1]);
}
} elseif (themify_check($key) && 'default' != themify_get($key)) {
if ($prop == 'color' || stripos($prop, 'color')) {
$css[$selector][$prop] = $prop . ': #' . themify_get($key);
} elseif ($prop == 'background-image' && 'default' != themify_get($key)) {
$css[$selector][$prop] = $prop . ': url(' . themify_get($key) . ')';
} elseif ($prop == 'background-repeat' && 'fullcover' == themify_get($key)) {
if (isset($val['dependson'])) {
if ($val['dependson']['prop'] == 'background-image' && (themify_check($val['dependson']['key']) && 'default' != themify_get($val['dependson']['key']))) {
$css[$selector]['background-size'] = 'background-size: cover; background-attachment:fixed;';
}
} else {
$css[$selector]['background-size'] = 'background-size: cover; background-attachment:fixed;';
}
} elseif ($prop == 'font-family') {
$font = themify_get($key);
$css[$selector][$prop] = $prop . ': ' . $font;
if (!in_array($font, themify_get_web_safe_font_list(true))) {
$themify->google_fonts .= str_replace(' ', '+', $font . '|');
}
} else {
$css[$selector][$prop] = $prop . ': ' . themify_get($key);
}
}
}
if (!empty($css[$selector])) {
$style .= "{$selector} {\n\t" . implode(";\n\t", $css[$selector]) . "\n}\n";
}
}
if ('' != $style) {
echo "\n<!-- Entry Style -->\n<style>\n{$style}</style>\n<!-- End Entry Style -->\n";
}
}
}
/**
* Section Meta Box Options
* @param array $args
* @return array
* @since 1.0.7
*/
function themify_theme_section_meta_box($args = array())
{
extract($args);
return array(array('name' => 'separator_section_title_font', 'title' => '', 'description' => '', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Section Title Font', 'themify') . '</h4><hr class="meta_fields_separator"/>')), array('type' => 'multi', 'name' => '_font_title', 'title' => __('Font', 'themify'), 'meta' => array('fields' => array(array('name' => 'title_font_size', 'label' => '', 'description' => '', 'type' => 'textbox', 'meta' => array('size' => 'small'), 'before' => '', 'after' => ''), array('name' => 'title_font_size_unit', 'label' => '', 'type' => 'dropdown', 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify'), 'selected' => true), array('value' => 'em', 'name' => __('em', 'themify'))), 'before' => '', 'after' => ''), array('name' => 'title_font_family', 'label' => '', 'type' => 'dropdown', 'meta' => array_merge(themify_get_web_safe_font_list(), themify_get_google_web_fonts_list()), 'before' => '', 'after' => '')), 'description' => '', 'before' => '', 'after' => '', 'separator' => '')), array('name' => 'title_font_color', 'title' => __('Font Color', 'themify'), 'description' => '', 'type' => 'color', 'meta' => array('default' => null)), array('name' => 'separator_font', 'title' => '', 'description' => '', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Section Font', 'themify') . '</h4><hr class="meta_fields_separator"/>')), array('type' => 'multi', 'name' => '_font', 'title' => __('Font', 'themify'), 'meta' => array('fields' => array(array('name' => 'font_size', 'label' => '', 'description' => '', 'type' => 'textbox', 'meta' => array('size' => 'small'), 'before' => '', 'after' => ''), array('name' => 'font_size_unit', 'label' => '', 'type' => 'dropdown', 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify'), 'selected' => true), array('value' => 'em', 'name' => __('em', 'themify'))), 'before' => '', 'after' => ''), array('name' => 'font_family', 'label' => '', 'type' => 'dropdown', 'meta' => array_merge(themify_get_web_safe_font_list(), themify_get_google_web_fonts_list()), 'before' => '', 'after' => '')), 'description' => '', 'before' => '', 'after' => '', 'separator' => '')), array('name' => 'font_color', 'title' => __('Font Color', 'themify'), 'description' => '', 'type' => 'color', 'meta' => array('default' => null)), array('name' => 'link_color', 'title' => __('Link Color', 'themify'), 'description' => '', 'type' => 'color', 'meta' => array('default' => null)), array('name' => 'separator', 'title' => '', 'description' => '', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Section Background', 'themify') . '</h4><hr class="meta_fields_separator"/>')), array('name' => 'background_color', 'title' => __('Background Color', 'themify'), 'description' => '', 'type' => 'color', 'meta' => array('default' => null)), array('name' => 'background_image', 'title' => '', 'type' => 'image', 'description' => '', 'meta' => array(), 'before' => '', 'after' => ''), array('name' => 'background_repeat', 'title' => __('Background Repeat', 'themify'), 'description' => '', 'type' => 'dropdown', 'meta' => array(array('value' => 'default', 'name' => '', 'selected' => true), array('value' => 'repeat', 'name' => __('Repeat', 'themify')), array('value' => 'repeat-x', 'name' => __('Repeat horizontally', 'themify')), array('value' => 'repeat-y', 'name' => __('Repeat vertically', 'themify')), array('value' => 'no-repeat', 'name' => __('Do not repeat', 'themify')))), array('type' => 'multi', 'name' => '_multi_bg_position', 'title' => __('Background Position', 'themify'), 'meta' => array('fields' => array(array('name' => 'background_position_x', 'label' => '', 'description' => '', 'type' => 'dropdown', 'meta' => array(array('value' => '', 'name' => '', 'selected' => true), array('value' => 'left', 'name' => __('Left', 'themify')), array('value' => 'center', 'name' => __('Center', 'themify')), array('value' => 'right', 'name' => __('Right', 'themify'))), 'before' => '', 'after' => ''), array('name' => 'background_position_y', 'label' => '', 'description' => '', 'type' => 'dropdown', 'meta' => array(array('value' => '', 'name' => '', 'selected' => true), array('value' => 'top', 'name' => __('Top', 'themify')), array('value' => 'center', 'name' => __('Center', 'themify')), array('value' => 'bottom', 'name' => __('Bottom', 'themify'))), 'before' => '', 'after' => '')), 'description' => '', 'before' => '', 'after' => '', 'separator' => '')));
}
$web_safe_font_names = array('Arial, Helvetica, sans-serif', 'Verdana, Geneva, sans-serif', 'Georgia, \'Times New Roman\', Times, serif', '\'Times New Roman\', Times, serif', 'Tahoma, Geneva, sans-serif', '\'Trebuchet MS\', Arial, Helvetica, sans-serif', 'Palatino, \'Palatino Linotype\', \'Book Antiqua\', serif', '\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif');
if (!$only_names) {
$web_safe_fonts = array(array('value' => 'default', 'name' => '', 'selected' => true), array('value' => '', 'name' => '--- ' . __('Web Safe Fonts', 'themify') . ' ---'));
foreach ($web_safe_font_names as $font) {
$web_safe_fonts[] = array('value' => $font, 'name' => str_replace('\'', '"', $font));
}
} else {
$web_safe_fonts = $web_safe_font_names;
}
return apply_filters('themify_get_web_safe_font_list', $web_safe_fonts);
}
}
// Return Google Web Fonts list
$google_fonts_list = themify_get_google_web_fonts_list();
// Return Web Safe Fonts list
$fonts_list = themify_get_web_safe_font_list();
///////////////////////////////////////
// Setup Write Panel Options
///////////////////////////////////////
/** Definition for tri-state hide meta buttons
* @var array */
$states = array(array('name' => __('Hide', 'themify'), 'value' => 'yes', 'icon' => THEMIFY_URI . '/img/ddbtn-check.png', 'title' => __('Hide this meta', 'themify')), array('name' => __('Do not hide', 'themify'), 'value' => 'no', 'icon' => THEMIFY_URI . '/img/ddbtn-cross.png', 'title' => __('Show this meta', 'themify')), array('name' => __('Theme default', 'themify'), 'value' => '', 'icon' => THEMIFY_URI . '/img/ddbtn-blank.png', 'title' => __('Use theme settings', 'themify'), 'default' => true));
// Common Fields ///////////////////////////////////////
$post_image = array('name' => 'post_image', 'title' => __('Featured Image', 'themify'), 'description' => '', 'type' => 'image', 'meta' => array());
$featured_image_size = array('name' => 'feature_size', 'title' => __('Image Size', 'themify'), 'description' => __('Image sizes can be set at <a href="options-media.php">Media Settings</a> and <a href="admin.php?page=themify_regenerate-thumbnails">Regenerated</a>', 'themify'), 'type' => 'featimgdropdown');
$external_link = array('name' => 'external_link', 'title' => __('External Link', 'themify'), 'description' => __('Link Featured Image and Post Title to external URL', 'themify'), 'type' => 'textbox', 'meta' => array());
$post_image_dimensions = array(array('name' => 'image_width', 'label' => __('width', 'themify'), 'description' => '', 'type' => 'textbox', 'meta' => array('size' => 'small'), 'before' => '', 'after' => ''), array('name' => 'image_height', 'label' => __('height', 'themify'), 'type' => 'textbox', 'meta' => array('size' => 'small'), 'before' => '', 'after' => ''));
$nav_menus = array(array('name' => '', 'value' => '', 'selected' => true));
foreach (get_terms('nav_menu') as $menu) {
$nav_menus[] = array('name' => $menu->name, 'value' => $menu->slug);
}
/**
* Displays the controls to setup the font.
*
* @param object $values
*/
function render_fonts($values)
{
// Font family
$font_family = '';
if (isset($values->family)) {
$font_family = !empty($values->family->name) ? $values->family->name : '';
$font_variant = !empty($values->family->variant) ? $values->family->variant : '';
}
// Font styles and decoration
$font_weight = !empty($values->bold) ? $values->bold : '';
$font_italic = !empty($values->italic) ? $values->italic : '';
$font_underline = !empty($values->underline) ? $values->underline : '';
$font_linethrough = !empty($values->linethrough) ? $values->linethrough : '';
$font_nostyle = !empty($values->nostyle) ? $values->nostyle : '';
// Text transform
$text_transform = !empty($values->texttransform) ? $values->texttransform : '';
$text_notransform = !empty($values->notexttransform) ? $values->notexttransform : '';
// Text align
$font_align = !empty($values->align) ? $values->align : '';
$font_noalign = !empty($values->noalign) ? $values->noalign : '';
// Font size
$font_size_num = isset($values->sizenum) ? $values->sizenum : '';
$font_size_unit = isset($values->sizeunit) ? $values->sizeunit : 'px';
// Line height
$font_line_num = isset($values->linenum) ? $values->linenum : '';
$font_line_unit = isset($values->lineunit) ? $values->lineunit : 'px';
$units = array('px', '%', 'em');
?>
<!-- FONT SIZE -->
<div class="themify-customizer-brick">
<input type="text" class="font_size_num" value="<?php
echo empty($font_size_num) ? '' : $font_size_num;
?>
" />
<div class="custom-select">
<select class="font_size_unit">
<?php
foreach ($units as $unit) {
?>
<option value="<?php
echo $unit;
?>
" <?php
selected($unit, $font_size_unit);
?>
><?php
echo $unit;
?>
</option>
<?php
}
?>
</select>
</div>
<!-- FONT FAMILY -->
<div class="custom-select font-family-select">
<select class="themify_font_family">
<option value=""></option>
<optgroup label="<?php
_e('Web Safe Fonts', 'themify');
?>
">
<?php
$fonts = themify_get_web_safe_font_list();
unset($fonts[0]);
unset($fonts[1]);
foreach ($fonts as $font) {
$value = "'" . json_encode(array('name' => esc_attr($font['value']), 'variant' => 'normal,bold,italic,bold italic', 'fonttype' => 'websafe')) . "'";
if ($font_family == $font['family']) {
$font_variants = array('normal', 'bold', 'italic', 'bold italic');
}
echo '<option value=' . $value . ' ' . selected($font_family, $font['value'], false) . '>' . $font['name'] . '</option>';
}
?>
</optgroup>
<optgroup label="<?php
_e('Google Fonts', 'themify');
?>
">
<?php
if (!isset($GLOBALS['themify_customizer_gfonts']) || '' == $GLOBALS['themify_customizer_gfonts']) {
$fonts = themify_get_google_font_lists();
foreach ($fonts as $font) {
$value = "'" . json_encode(array('name' => isset($font['family']) ? esc_attr($font['family']) : '', 'variant' => isset($font['variant']) ? $font['variant'] : '', 'subsets' => isset($font['subsets']) ? $font['subsets'] : '', 'fonttype' => 'google')) . "'";
$GLOBALS['themify_customizer_gfonts'] .= '<option class="google_font" value=' . $value . ' ' . selected($font_family, $font['family'], false) . '>' . $font['family'] . '</option>';
}
}
echo $GLOBALS['themify_customizer_gfonts'];
?>
</optgroup>
</select>
</div>
</div>
<div class="themify-customizer-brick">
<!-- LINE HEIGHT -->
<input type="text" class="font_line_num" value="<?php
echo empty($font_line_num) ? '' : $font_size_num;
?>
" />
<div class="custom-select">
<select class="font_line_unit">
<?php
foreach ($units as $unit) {
?>
<option value="<?php
echo $unit;
?>
" <?php
selected($unit, $font_line_unit);
?>
><?php
echo $unit;
?>
</option>
<?php
}
?>
</select>
</div>
<label><?php
_e('Line Height', 'themify');
?>
</label>
</div>
<div>
<!-- FONT VARIANT -->
<select class="themify_font_variant" style="display:none">
<option value=""></option>
<?php
foreach ($font_variants as $variant) {
echo '<option value=' . $variant . ' ' . selected($variant, $font_variant, false) . '>' . $variant . '</option>';
}
?>
</select>
</div>
<!-- TEXT STYLE & DECORATION -->
<div class="themify_font_style themify-customizer-brick">
<button type="button" class="button <?php
echo $this->style_is($font_italic, 'italic');
?>
" data-style="italic"><?php
_e('i', 'themify');
?>
</button>
<button type="button" class="button <?php
echo $this->style_is($font_weight, 'bold');
?>
" data-style="bold"><?php
_e('B', 'themify');
?>
</button>
<button type="button" class="button <?php
echo $this->style_is($font_underline, 'underline');
?>
" data-style="underline"><?php
_e('U', 'themify');
?>
</button>
<button type="button" class="button <?php
echo $this->style_is($font_linethrough, 'linethrough');
?>
" data-style="linethrough"><?php
_e('S', 'themify');
?>
</button>
<button type="button" class="button <?php
echo $this->style_is($font_nostyle, 'nostyle');
?>
" data-style="nostyle"><?php
_e('×', 'themify');
?>
</button>
</div>
<!-- TEXT TRANSFORM -->
<div class="themify_text_transform themify-customizer-brick">
<button type="button" class="button <?php
echo $this->style_is($text_transform, 'uppercase');
?>
" data-texttransform="uppercase"><?php
_e('AA', 'themify');
?>
</button>
<button type="button" class="button <?php
echo $this->style_is($text_transform, 'lowercase');
?>
" data-texttransform="lowercase"><?php
_e('ab', 'themify');
?>
</button>
<button type="button" class="button <?php
echo $this->style_is($text_transform, 'capitalize');
?>
" data-texttransform="capitalize"><?php
_e('Ab', 'themify');
?>
</button>
<button type="button" class="button <?php
echo $this->style_is($text_notransform, 'notexttransform');
?>
" data-texttransform="notexttransform"><?php
_e('×', 'themify');
?>
</button>
</div>
<!-- TEXT ALIGN -->
<div class="themify_font_align themify-customizer-brick">
<button type="button" class="button <?php
echo $this->style_is($font_align, 'left');
?>
" data-align="left"><span class="ti-align-left"></span></button>
<button type="button" class="button <?php
echo $this->style_is($font_align, 'center');
?>
" data-align="center"><span class="ti-align-center"></span></button>
<button type="button" class="button <?php
echo $this->style_is($font_align, 'right');
?>
" data-align="right"><span class="ti-align-right"></span></button>
<button type="button" class="button <?php
echo $this->style_is($font_align, 'justify');
?>
" data-align="justify"><span class="ti-align-justify"></span></button>
<button type="button" class="button <?php
echo $this->style_is($font_noalign, 'noalign');
?>
" data-align="noalign"><?php
_e('×', 'themify');
?>
</button>
</div>
<?php
}
