/** * Return a CSS line for border by giving just a post id and a meta prefix. The post must have the meta for each of the settings for this to work as expected. * * @access public * @since 1.0.0 * @param $post_id The id of the post where the related meta is saved. * @param $meta_prefix The prefix to put before each post meta string. * @return void */ function mp_core_stroke_css($post_id, $meta_prefix) { //Get the stroke settings $stroke_size = mp_core_get_post_meta($post_id, $meta_prefix . 'stroke_size', 0); $stroke_color = mp_core_get_post_meta($post_id, $meta_prefix . 'stroke_color', '#FFF'); $stroke_color = mp_core_hex2rgb($stroke_color); $stroke_opacity = mp_core_get_post_meta($post_id, $meta_prefix . 'stroke_opacity', '100'); $stroke_opacity = $stroke_opacity / 100; //Set the the RGBA string including the alpha $stroke_color = 'rgba( ' . $stroke_color[0] . ', ' . $stroke_color[1] . ', ' . $stroke_color[2] . ', ' . $stroke_opacity . ')'; //Create the css border string $css_output = 'border: solid ' . $stroke_size . 'px ' . $stroke_color . ';'; return $css_output; }
/** * This function echoes all the values needed for the velocity animation based on the passed-in repeat * * @access public * @since 1.0.0 * @param $repeat array A single animation keyframe containing all of the css changes * @return void */ function mp_core_animation_echo_values($repeat) { $value_counter = 2; $value_forlength = count($repeat); //Loop through each value in this keyframe foreach ($repeat as $id => $value) { //Don't export the animation length parameter because we use that differently altogether if ($id == 'animation_length') { continue; } //Default for the unit $unit = NULL; //If this value is 'opacity' if ($id == 'opacity') { //If it has a value if (mp_core_value_exists($value)) { //Reduce it to a 0 or 1 value $value = $value / 100; } else { $value = 1; } } //If this is a color animation if ($id == 'backgroundColor') { if (!empty($value)) { //This is used in the next iteration $output_background_alpha = true; $rgb_array = mp_core_hex2rgb($value); echo 'backgroundColorRed: "' . $rgb_array[0] . '",'; echo 'backgroundColorGreen: "' . $rgb_array[1] . '",'; echo 'backgroundColorBlue: "' . $rgb_array[2] . '",'; } else { echo 'backgroundColor: function() { if ( $(this).attr("mp-default-bg-color") ){ return $(this).attr("mp-default-bg-color"); } else{ return false; } },'; $value_counter = $value_counter + 1; continue; } } //When creating the meta array, make sure the background alpha is directly after the background color or it won't work right if ($id == 'backgroundColorAlpha') { if (isset($output_background_alpha)) { //If it has a value if (mp_core_value_exists($value)) { //Reduce it to a 0 or 1 value $value = $value / 100; } else { $value = 1; } } else { $value_counter = $value_counter + 1; continue; } } //If this is rotation if ($id == 'rotateZ') { $value = empty($value) ? 0 : $value; $unit = 'deg'; } //If this is X or Y if ($id == 'translateX' || $id == 'translateY') { $value = empty($value) ? 0 : $value; $unit = 'px'; } //If this is scale if ($id == 'scale') { $value = empty($value) ? 1 : $value / 100; } //Output the value for this keyframe value if (mp_core_value_exists($value)) { echo $id . ': "' . $value . $unit . '"'; //If this isn't the last item in the keyframe if ($value_counter < $value_forlength) { echo ','; } } $value_counter = $value_counter + 1; } }
/** * Return the CSS needed for a highlighted background color for text * * Note that for this css to work as expected, the text element must be wrapped in a parent which has its padding set to: * padding: 0px ' . $highlight_padding . 'px; * * @access public * @link http://css-tricks.com/multi-line-padded-text/ * @since 1.0.0 * @param $args Array - An associative array containing information needed to customize the highlight output with these values: * @param $brick_id Int - The id of the brick containing these values * @param $class_name String - The name of the class we want to use for this highlited text. Match it to the class passed to the mp_stacks_highlight_text_html function. * @param $highlight_padding Int - A number value to use for the amount of padding for the highlight * @param $highlight_color String - A color hex code such as #FFFFFF * @param $highlight_opacity Int - A number value from 1 to 100 representing the percentage value for opacity * @return $css_output String - A string holding the css needed for highlighted text */ function mp_stacks_grid_highlight_text_css($args) { //Default args $default_args = array('brick_id' => NULL, 'class_name' => NULL, 'highlight_padding' => NULL, 'highlight_color' => NULL, 'highlight_opacity' => NULL); wp_parse_args($default_args, $args); extract($args, EXTR_SKIP); //Convert hex color to rgb color array $highlight_color = mp_core_hex2rgb($highlight_color); $css_output = '#mp-brick-' . $brick_id . ' .' . $class_name . '-holder .' . $class_name . '{ padding: 0px ' . $highlight_padding . 'px; } #mp-brick-' . $brick_id . ' .' . $class_name . '-holder .' . $class_name . ' .' . $class_name . '-highlight{ padding:' . $highlight_padding . 'px; background-color: rgba(' . $highlight_color[0] . ', ' . $highlight_color[1] . ', ' . $highlight_color[2] . ', ' . $highlight_opacity / 100 . '); box-shadow: ' . $highlight_padding . 'px 0 0 rgba(' . $highlight_color[0] . ', ' . $highlight_color[1] . ', ' . $highlight_color[2] . ', ' . $highlight_opacity / 100 . '), -' . $highlight_padding . 'px 0 0 rgba(' . $highlight_color[0] . ', ' . $highlight_color[1] . ', ' . $highlight_color[2] . ', ' . $highlight_opacity / 100 . '); }'; return $css_output; }
/** * Outputs CSS Output for elements passed-in to this function * * @access public * @since 1.0.0 * @param string $element_id The CSS selector. * @param string $css_arg The CSS arg name. * @param string $theme_mod_value The CSS value. * @return void */ function mp_core_element_css($element_id, $css_arg, $theme_mod_value) { echo $element_id . '{'; //Background Image if ($css_arg == "background-image") { if (!empty($theme_mod_value) || $theme_mod_value != false) { echo $css_arg . ': url(\'' . $theme_mod_value . '\');'; } } elseif ($css_arg == "background-color-opacity") { //Store the opacity value in a global variable so we can use it next time through this on the rgb for the background global $mp_core_customizer_background_opacity; $mp_core_customizer_background_opacity = floatval($theme_mod_value); } elseif ($css_arg == "background-color") { //If we set this up correctly, our opacity is right before our color and has been stored in the global variable global $mp_core_customizer_background_opacity; $mp_core_customizer_background_opacity = !is_numeric($mp_core_customizer_background_opacity) ? 1 : $mp_core_customizer_background_opacity; if (!empty($theme_mod_value) || $theme_mod_value != false) { $rgb = mp_core_hex2rgb($theme_mod_value); echo $css_arg . ': rgba(' . $rgb[0] . ', ' . $rgb[1] . ', ' . $rgb[2] . ', ' . $mp_core_customizer_background_opacity . ');'; } //Now that we've used it, set it to NULL $mp_core_customizer_background_opacity = NULL; } elseif ($css_arg == "background-disabled") { if (!empty($theme_mod_value)) { //<--checked echo 'background-image: none;'; } } elseif ($css_arg == "display") { $display_val = $theme_mod_value == false ? 'none' : 'block'; echo $css_arg . ':' . $display_val . ';'; } elseif ($css_arg == "font-size(px)") { if (!empty($theme_mod_value)) { echo 'font-size' . ':' . $theme_mod_value . 'px;'; } } elseif ($css_arg == "border-width") { if (!empty($theme_mod_value)) { echo 'border-width' . ':' . $theme_mod_value . 'px;'; } } elseif ($css_arg == "border-radius") { if (!empty($theme_mod_value)) { echo 'border-radius' . ':' . $theme_mod_value . 'px;'; } } else { //Make sure it's not empty if (!empty($theme_mod_value) || $theme_mod_value != false) { echo $css_arg . ':' . $theme_mod_value . ';'; } } echo '}'; }
/** * Filter Function which returns the css style lines for a brick background * Parameter: CSS output * Parameter: Post ID */ function mp_stacks_default_brick_bg_css($css_output, $post_id) { //Get background color opacity $brick_bg_color_opacity = get_post_meta($post_id, 'brick_bg_color_opacity', true); $brick_bg_color_opacity = !empty($brick_bg_color_opacity) ? $brick_bg_color_opacity / 100 : 1; //Get background color $brick_bg_color = get_post_meta($post_id, 'brick_bg_color', true); //Convert to rgb from hex $brick_bg_color_rgb_array = mp_core_hex2rgb($brick_bg_color); //If a color has truly been set if (!empty($brick_bg_color_rgb_array)) { //Add style lines to css output $css_output .= 'background-color:rgba(' . $brick_bg_color_rgb_array[0] . ', ' . $brick_bg_color_rgb_array[1] . ' , ' . $brick_bg_color_rgb_array[2] . ', ' . $brick_bg_color_opacity . ');'; } //Return CSS Output return $css_output; }