/** * Process the CSS needed for the grid * * @access public * @since 1.0.0 * @param $css_output String - The incoming CSS output coming from other things using this filter * @param $post_id Int - The post ID of the brick * @param $first_content_type String - The first content type chosen for this brick * @param $second_content_type String - The second content type chosen for this brick * @return $html_output String - A string holding the css the brick */ function mp_stacks_brick_content_output_css_postgrid($css_output, $post_id, $first_content_type, $second_content_type) { if ($first_content_type != 'postgrid' && $second_content_type != 'postgrid') { return $css_output; } //Download per row $postgrid_per_row = mp_core_get_post_meta($post_id, 'postgrid_per_row', '3'); //Post Spacing (padding) $postgrid_post_spacing = mp_core_get_post_meta($post_id, 'postgrid_post_spacing', '20'); //Post Inner Margin (padding) $postgrid_post_inner_margin = mp_core_get_post_meta($post_id, 'postgrid_post_inner_margin', '0'); //Padding inside the featured images $postgrid_featured_images_inner_margin = mp_core_get_post_meta($post_id, 'postgrid_featured_images_inner_margin', '10'); //Image Overlay Color and Opacity $postgrid_images_overlay_color = mp_core_get_post_meta($post_id, 'postgrid_images_overlay_color', '#FFF'); $postgrid_images_overlay_opacity = mp_core_get_post_meta($post_id, 'postgrid_images_overlay_opacity', '0'); //Max Image Width $postgrid_feat_img_max_width = mp_core_get_post_meta($post_id, 'postgrid_feat_img_max_width', '0'); $img_max_width_css = empty($postgrid_feat_img_max_width) ? NULL : '#mp-brick-' . $post_id . ' .mp-stacks-grid-item-image-holder{ max-width: ' . $postgrid_feat_img_max_width . 'px;}'; //Use the Excerpt's Color as the default fallback for all text in the grid $default_text_color = mp_core_get_post_meta($post_id, 'postgrid_excerpt_color'); //Padding for items directly under the image $postgrid_post_below_image_area_inner_margin = mp_core_get_post_meta($post_id, 'postgrid_post_below_image_area_inner_margin', '0'); //Get CSS Output $css_output .= ' #mp-brick-' . $post_id . ' .mp-stacks-grid-item{' . mp_core_css_line('color', $default_text_color) . mp_core_css_line('width', round(100 / $postgrid_per_row, 1), '%') . mp_core_css_line('padding', $postgrid_post_spacing, 'px') . '} #mp-brick-' . $post_id . ' .mp-stacks-grid-item-inner{' . mp_core_css_line('padding', $postgrid_post_inner_margin, 'px') . ' }' . $img_max_width_css . ' #mp-brick-' . $post_id . ' .mp-stacks-grid-item-inner .mp-stacks-grid-item-below-image-holder{' . mp_core_css_line('padding', $postgrid_post_below_image_area_inner_margin, 'px') . ' } /*Below image, remove the padding-top (spacing) from the first text item*/ #mp-brick-' . $post_id . ' .mp-stacks-grid-item-inner .mp-stacks-grid-item-below-image-holder [class*="link"]:first-child [class*="holder"]{ ' . ($postgrid_post_below_image_area_inner_margin != '0' ? 'padding-top:0px!important;' : NULL) . ' } /*Over image, remove the padding-top (spacing) from the first text item*/ #mp-brick-' . $post_id . ' .mp-stacks-grid .mp-stacks-grid-item .mp-stacks-grid-item-inner .mp-stacks-grid-over-image-text-container-table-cell [class*="holder"]:first-child{ padding-top:0px; }'; $css_output .= apply_filters('mp_stacks_postgrid_css', $css_output, $post_id); $css_output .= ' #mp-brick-' . $post_id . ' .mp-stacks-grid-over-image-text-container, #mp-brick-' . $post_id . ' .mp-stacks-grid-over-image-text-container-top, #mp-brick-' . $post_id . ' .mp-stacks-grid-over-image-text-container-middle, #mp-brick-' . $post_id . ' .mp-stacks-grid-over-image-text-container-bottom{' . mp_core_css_line('padding', $postgrid_featured_images_inner_margin, 'px') . '}'; //Get the css output the the isotope button navigation $css_output .= mp_stacks_grid_isotope_nav_btns_css($post_id, 'postgrid'); //Get the css output for the image overlay for mobile $css_output .= mp_stacks_grid_overlay_mobile_css($post_id, 'postgrid_image_overlay_animation_keyframes'); //Get the bg color for each post $css_output .= mp_stacks_grid_bg_color_css($post_id, mp_core_get_post_meta($post_id, 'postgrid_taxonomy_terms', array()), 'taxonomy_bg_color'); return $css_output; }
/** * Create the CSS for the Load More Button and hook it to the grid css * * @access public * @since 1.0.0 * @param Void * @param $post_id Int - The ID of the Brick * @return Array - All of the placement optons needed for Excerpt */ function mp_stacks_grid_load_more_css_output($css_output, $post_id) { //Load More Meta Info $load_more_float = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_float', 'center'); $load_more_button_color = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_button_color', 'NULL'); $load_more_button_text_color = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_button_text_color', 'NULL'); $load_more_button_color_mouse_over = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_button_color_mouse_over', 'NULL'); $load_more_button_text_color_mouse_over = mp_core_get_post_meta($post_id, $this->_meta_prefix . '_load_more_button_text_color_mouse_over', 'NULL'); $css_output .= ' #mp-brick-' . $post_id . ' .mp-stacks-grid-load-more-container{' . mp_core_css_line('text-align', $load_more_float) . '} #mp-brick-' . $post_id . ' .mp-stacks-grid-load-more-button{' . mp_core_css_line('color', $load_more_button_text_color) . mp_core_css_line('background-color', $load_more_button_color) . '} #mp-brick-' . $post_id . ' .mp-stacks-grid-load-more-button:hover{' . mp_core_css_line('color', $load_more_button_text_color_mouse_over) . mp_core_css_line('background-color', $load_more_button_color_mouse_over) . '}'; return $css_output; }
/** * Process and return the CSS needed for Isotope Navigation Buttons. The function decides if the buttons have a background, text, and an icon. * It also processes CSS for the icon size and alignment as well as colors for all button elements. * * @access public * @since 1.0.0 * @param $css_output String - The incoming CSS output coming from other things using this filter * @param $post_id Int - The post ID of the brick * @param $meta_prefix String - The prefix to put before each meta key when get_post_meta-ing * @return $css_output String - The CSS needed to properly style the isotope navigation buttons */ function mp_stacks_grid_isotope_nav_btns_css($post_id, $meta_prefix) { $css_output = NULL; //Get isotope settings $isotope_filtering_on = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope', false); //If Isotope sorting is ON if ($isotope_filtering_on) { //Post Spacing (padding) - we match the post spacing for isotope buttons/dropdowns $post_spacing = mp_core_get_post_meta($post_id, $meta_prefix . '_post_spacing', '20'); $button_text_size = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_text_size', 20); //Isotope Nav Container $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-container{'; $isotope_nav_alignment = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_navigation_align', 'center'); $css_output .= mp_core_css_line('text-align', $isotope_nav_alignment); if ($isotope_nav_alignment == 'left') { $css_output .= mp_core_css_line('margin-left', $post_spacing, 'px'); } if ($isotope_nav_alignment == 'right') { $css_output .= mp_core_css_line('margin-right', $post_spacing, 'px'); } //Line height for the container $css_output .= mp_core_css_line('line-height', $button_text_size * 3.5, 'px'); $css_output .= '}'; //Isotope Button BACKGROUND $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select{'; //Button Background $enable_button_background = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_bg', true); if ($enable_button_background) { $button_bg_color = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_bg_color'); $css_output .= mp_core_css_line('background-color', $button_bg_color); } else { $css_output .= 'background:transparent;'; $css_output .= 'padding:0px;'; } $css_output .= '}'; //LAST Isotope Button with a BACKGROUND $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button:last-child, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select:last-child, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select:last-child{'; //Remove the margin on the right $css_output .= 'margin-right: 0px'; $css_output .= '}'; //Isotope Button BACKGROUND Hover $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button:hover, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select:hover, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select:hover{'; //If the button should have a background if ($enable_button_background) { //Set the background color upon hover $button_bg_color_hover = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_bg_color_hover'); $css_output .= mp_core_css_line('background-color', $button_bg_color_hover); } else { $css_output .= 'background:transparent;'; } $css_output .= '}'; //Isotope Button TEXT $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button .mp-stacks-grid-isotope-btn-text, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select{'; //If the button text should be shown $enable_button_text = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_text', true); if ($enable_button_text) { $button_text_color = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_text_color'); $css_output .= mp_core_css_line('color', $button_text_color); $css_output .= mp_core_css_line('font-size', $button_text_size, 'px'); } else { $css_output .= mp_core_css_line('text-indent', '-99999999px'); $css_output .= mp_core_css_line('overflow', 'hidden'); } $css_output .= '}'; //Isotope Button TEXT HOVER $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-button:hover .mp-stacks-grid-isotope-btn-text, #mp-brick-' . $post_id . ' .mp-stacks-grid-orderby-select:hover .mp-stacks-grid-isotope-btn-text, #mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-sort-select:hover .mp-stacks-grid-isotope-btn-text{'; //If the button text should be shown if ($enable_button_text) { //Text hover color $button_text_color_hover = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_text_color_hover'); $css_output .= mp_core_css_line('color', $button_text_color_hover); } $css_output .= '}'; //Isotope Button ICONS $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon{'; //If the button icons should be shown $enable_button_icons = mp_core_get_post_meta_checkbox($post_id, $meta_prefix . '_isotope_nav_btn_icons', true); if ($enable_button_icons) { //Isotope Icon Alignment on the button - how should the icon sit in relation to the text? $button_icon_alignment = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_icons_alignment', 'left'); //If the icon should be on the left, put a margin on the right if ($button_icon_alignment == 'left' && $enable_button_text) { $css_output .= 'margin-right:10px;'; } else { if ($button_icon_alignment == 'right' && $enable_button_text) { $css_output .= 'margin-left:10px;'; } } //Icon Color $button_icon_color = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_icons_color', '#fff'); $css_output .= mp_core_css_line('color', $button_icon_color); //Icon Size $button_icon_size = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_nav_btn_icons_size', 14); $css_output .= mp_core_css_line('font-size', $button_icon_size, 'px'); //Icon Width and height $css_output .= mp_core_css_line('width', $button_icon_size, 'px'); $css_output .= mp_core_css_line('height', $button_icon_size, 'px'); } $css_output .= '}'; //Isotope "All" Icon styling $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all{'; //If the button icons should be shown if ($enable_button_icons) { //Icon Size $css_output .= mp_core_css_line('width', $button_icon_size, 'px'); $css_output .= mp_core_css_line('height', $button_icon_size, 'px'); } $css_output .= '}'; $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all .mp-stacks-grid-isotope-icon-all-1,'; $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all .mp-stacks-grid-isotope-icon-all-2,'; $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all .mp-stacks-grid-isotope-icon-all-3,'; $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-icon-all .mp-stacks-grid-isotope-icon-all-4{'; //If the button icons should be shown if ($enable_button_icons) { $css_output .= mp_core_css_line('background-color', $button_icon_color); } $css_output .= '}'; //"Filter By" Color and Font Size $filter_by_color = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_filter_by_color'); $filter_by_size = mp_core_get_post_meta($post_id, $meta_prefix . '_isotope_filter_by_textsize', 15); $css_output .= '#mp-brick-' . $post_id . ' .mp-stacks-grid-isotope-filterby-text{'; $css_output .= mp_core_css_line('color', $filter_by_color); $css_output .= mp_core_css_line('font-size', $filter_by_size, 'px'); $css_output .= '}'; return $css_output; } }