container -> content CSS cascade $val = weaverx_getopt_default("content{$option}", $default); // content 1st if ( $val != $default ) return $val; $val = weaverx_getopt_default("container{$option}", $default ); // then container if ( $val != $default ) return $val; return weaverx_getopt_default("wrapper{$option}", $default); // wrapper or default last } //-- /** * Set the font size multiplier for title fonts * * @since 4.0 * * @param string $font_size The name of the font size * * @returns float The title font multiplier * */ function weaverx_fontsize_mult( $font_size, $type = 'standard' ) { // font multiplier for titles // uses same font size tags as normal, but with different multipliers switch ( $font_size ) { // find conversion factor case 'xxs-font-size': $title_fontmult = 0.875; $std_fontmult = 0.625; break; case 'xs-font-size': $title_fontmult = 1; $std_fontmult = 0.75; break; case 's-font-size': $title_fontmult = 1.25; $std_fontmult = 0.875; break; case 'm-font-size': $title_fontmult = 1.5; $std_fontmult = 1.0; break; case 'l-font-size': $title_fontmult = 1.875; $std_fontmult = 1.125; break; case 'xl-font-size': $title_fontmult = 2.25; $std_fontmult = 1.25; break; case 'xxl-font-size': $title_fontmult = 2.625; $std_fontmult = 1.5; break; default: $title_fontmult = 2.25; $std_fontmult = 1; break; } if ( $type == 'standard') return $std_fontmult; return $title_fontmult; } /** * Generate the CSS for the tinyMCE and Gutenberg fixup CSS files. * * This function does all the work to generate tinyMCE or gutenberg specific editor CSS * so the editor's visual mode matches the actual styling to match the theme's styling. * * @since 4.0 * * @param string #editor The name of the editor to generate CSS for * * @returns string The generated CSS * * @todo @@@@@ Add content header (h1-h6) styling * */ function weaverx_output_edit_style( $editor='mce' ) { $put = sprintf("/* WARNING: Do not edit this file. It is dynamically generated. Any edits you make will be overwritten. */ /* This file generated using %s %s subtheme: %s */\n",WEAVERX_THEMENAME, WEAVERX_VERSION, weaverx_getopt('themename')); if ($editor == 'mce') { $content_body = '.mceContentBody '; $selector = ".mce-content-body,body"; $selector_tr = ".mce-content-body,body,tr,td,label,th,thead th"; $selector_font = $selector_tr; $selector_bg = $selector; } else { $content_body = '.mce-content-body '; $selector = ".mce-content-body, *[class^='wp-block-'],.mce-content-body p "; $selector_tr = ".mce-content-body,.mce-content-body *[class^='wp-block-'],.mce-content-body p,.mce-content-body tr,.mce-content-body td,.mce-content-body label,.mce-content-body th,.mce-content-body thead th "; $selector_font = $selector_tr . ',.editor-block-list__block:not(.is-multi-selected) .wp-block-paragraph,.edit-post-visual-editor,.edit-post-visual-editor p'; $selector_bg = '.edit-post-visual-editor'; } // ====== WIDTHS ====== if ( ( $twidth = weaverx_getopt_default( 'theme_width_int', WEAVERX_THEME_WIDTH ) ) ) { /* figure out a good width - we will please most of the users, most of the time We're going to assume that mostly people will use the default layout - we can't actually tell if the editor will be for a page or a post at this point. And let's just assume the default sidebar widths. */ if ( $editor == 'mce') { // calculate theme width based on default layout and width of sidebars. $sb_layout = weaverx_getopt_default('layout_default', 'right'); switch ( $sb_layout ) { case 'left': case 'left-top': $sb_width = weaverx_getopt_default( 'left_sb_width_int', 25 ); break; case 'split': case 'split-top': $sb_width = weaverx_getopt_default( 'left_split_sb_width_int', 25 ) + weaverx_getopt_default( 'right_split_sb_width_int', 25 ); break; case 'one-column': $sb_width = 0; break; default: // right $sb_width = weaverx_getopt_default( 'right_sb_width_int', 25 ); break; } $content_w = $twidth - ( $twidth * (float)( $sb_width / 95.0 ) ); // .95 by trial and error $put .= "html {$content_body}{max-width:96%;width:" . $content_w . "px;}\n"; $put .= "#content html {$content_body} {max-width:96%;width:96%;}\n"; } else { $twidth_wide = $twidth + 200; // work around for Gutenberg's wide formatting in the editor. $put .= "@media screen and ( min-width: 770px ) { .edit-post-visual-editor .editor-post-title,.edit-post-visual-editor .editor-block-list__block{max-width:{$twidth}px;} .edit-post-visual-editor .editor-block-list__block[data-align='wide'] {max-width:{$twidth_wide}px;}}\n"; } } // ====== FONTS ====== // ** FONT FAMILY $font_family = weaverx_get_cascade_opt('_font_family', 'inherit'); if ( $font_family != 'inherit' ) { // found a font { // these are not translatable - the values are used to define the actual font definition $fonts = weaverx_get_font_family(); if ( isset($fonts[$font_family]) ) { $font = $fonts[$font_family]; } else { $font = "Arial,'Helvetica Neue',Helvetica,sans-serif"; // fallback // scan Google Fonts $gfonts = weaverx_getopt_array('fonts_added'); if ( !empty($gfonts) ) { foreach ($gfonts as $gfont) { $slug = sanitize_title($gfont['name']); if ( $slug == $font_family ) { $font = str_replace('font-family:','',$gfont['family']); break; } } } } $put .= "{$selector_font}{font-family:{$font};}\n"; } // ** FONT SIZE ** if (($base_font_px = weaverx_getopt('site_fontsize_int')) == '' ) $base_font_px = 16; if ( $editor == 'mce' ) { $base_font_px = (float)$base_font_px; $font_size = weaverx_get_cascade_opt('_font_size', 'default'); $fontmult = weaverx_fontsize_mult( $font_size, 'standard' ); $em_font_size = ( $base_font_px / 16.0) * $fontmult ; $put .= "{$selector_font}{font-size:" . $em_font_size . "em;}\n"; } else { $put .= "{$selector_font}{font-size:{$base_font_px}px;}\n"; } // ** FONT STYLE / WEIGHT ** // valusew will be 'on' or 'off' or '', unless checkbox // wrapper_bold, wrapper_italic, container_bold, container_italic, content_bold, content_italic, page_title_italic, page_title_nomral (weight - checkbox) // content_h_italic, content_h_nomral (weight, checkbox) $font_style = weaverx_get_cascade_opt('_italic', ''); if ( $font_style != '' ) { $italic = ($font_style == 'on') ? 'italic' : 'normal'; $put .= "{$selector_font}{font-style:{$italic};}\n"; } $font_style = weaverx_get_cascade_opt('_bold', ''); if ( $font_style != '' ) { $italic = ($font_style == 'on') ? 'bold' : 'normal'; $put .= "{$selector_font}{font-weight:{$italic};}\n"; } // ====== BG COLOR ==== /* need to handle bg color of content area - need to do the cascade */ $bg = ''; if ( ($val = weaverx_getopt_default('editor_bgcolor','inherit')) && $val != 'inherit') { /* alt bg color */ $bg = $val; } else if ( ($val = weaverx_getopt_default('content_bgcolor','inherit')) && $val != 'inherit') { /* #content */ $bg = $val; } else if ( ($val = weaverx_getopt_default('container_bgcolor','inherit') ) && $val != 'inherit') { /* #container */ $bg = $val; } else if (($val = weaverx_getopt_default('wrapper_bgcolor','inherit')) && $val != 'inherit') { /* #wrapper */ $bg = $val; } else if (($val = weaverx_getopt_default('body_bgcolor','inherit')) && $val != 'inherit') { /* Outside BG */ $bg = $val; } if ($bg != '') { $put .= "{$selector_bg}{background:" . $bg . ";padding:10px;}\n"; // now decide if we need to add alternate styling for the editor icons if ( $editor == 'gutenberg' ) { $need_alt = $bg[0] != '#'; // always use alt styling for non-hex bg colors if ( !$need_alt ) { // Normalize a proper hex string with length 6 = but assume started as a #hex $hex = preg_replace("/[^0123456789abcdef]/", '',strtolower($bg)); if ( strlen( $hex ) == 3 ) $hex = preg_replace("/(.)(.)(.)/", '\1\1\2\2\3\3', $hex); if ( preg_match('/^[0123456789abcdef]{6}$/', $hex) ) { // have a valid hex string if ( hexdec($hex) < hexdec( '888888' ) ) // hex values less than #888888 are "dark" $need_alt = true; } } if ( $need_alt ) { $put .= ".editor-block-mover__control,.editor-block-settings-menu,.editor-inserter-with-shortcuts,.editor-block-list__empty-block-inserter{background:#C0C0C0;} .editor-block-list__insertion-point-inserter::before{border:1px solid #909090;background:#444444;}\n"; } } } // ==== text color ==== $text_color = weaverx_get_cascade_opt( '_color','inherit'); // text color if ( $val != 'inherit' ) $put .= "{$selector_tr}{color:" . $text_color . ";}\n"; // Headings - gutenberg only // conteht_h_font_family // ** header font size ** // content_h_font_size (font size name) // ** FONT STYLE / WEIGHT ** // valusew will be 'on' or 'off' or '', unless checkbox // wrapper_bold, wrapper_italic, container_bold, container_italic, content_bold, content_italic, page_title_italic, page_title_nomral (weight - checkbox) // content_h_italic, content_h_nomral (weight, checkbox) if ( $editor == 'gutenberg' ) { // ---- font family $font_family = weaverx_getopt_default('content_h_font_family', 'inherit'); if ( $font_family != 'inherit' ) { // found a font { $fonts = weaverx_get_font_family(); if ( isset($fonts[$font_family]) ) { // overide default $font = $fonts[$font_family]; $put .= ".wp-block-heading,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6,.mce-content-body h1,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4,.mce-content-body h5,.mce-content-body h6{font-family:{$font};}\n"; } } // we will just use the default font size for the headings - not worth it to calcuate 6 sizes here... // ---- bold if ( weaverx_getopt_checked('content_h_normal')) // bold off? $put .= ".wp-block-heading h1,.wp-block-heading h2,.wp-block-heading h3,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6,.mce-content-body h1,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4,.mce-content-body h5,.mce-content-body h6{font-weight:normal;}\n"; // ---- italic $italic = weaverx_getopt( 'content_h_italic' ); if ( $italic == 'off' ) $put .= ".wp-block-heading h1,.wp-block-heading h2,.wp-block-heading h3,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6,.mce-content-body h1,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4,.mce-content-body h5,.mce-content-body h6{font-style:normal;}\n"; else if ( $italic == 'on' ) $put .= ".wp-block-heading h1,.wp-block-heading h2,.wp-block-heading h3,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6,.mce-content-body h1,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4,.mce-content-body h5,.mce-content-body h6{font-style:italic;}\n"; // ---- text color $color = weaverx_getopt_default('content_h_color', 'inherit'); if ($color != 'inherit') { $put .= ".wp-block-heading h1,.wp-block-heading h2,.wp-block-heading h3,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6,.mce-content-body h1,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4,.mce-content-body h5,.mce-content-body h6{color: {$color};}\n"; } $bgcolor = weaverx_getopt_default('content_h_bgcolor', 'inherit'); if ($bgcolor != 'inherit') { $put .= ".wp-block-heading h1,.wp-block-heading h2,.wp-block-heading h3,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6,.mce-content-body h1,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4,.mce-content-body h5,.mce-content-body h6{background-color: {$bgcolor};}\n"; } $css = $color = weaverx_getopt('content_h_bgcolor_css'); if ($css) { $put .= ".wp-block-heading h1,.wp-block-heading h2,.wp-block-heading h3,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6,.mce-content-body h1,.mce-content-body h2,.mce-content-body h3,.mce-content-body h4,.mce-content-body h5,.mce-content-body h6{$css}\n"; } // ---- editor spacing fix-up - not perfect, but closer to reality $put .= ".wp-block-heading h1,.wp-block-heading h2,.wp-block-heading h3,.wp-block-heading h4,.wp-block-heading h5,.wp-block-heading h6{line-height:1;margin-bottom:-.5em;margin-top:0;}\n"; } // ====== PAGE TITLE (Don't use post values) ====== // page_title_bgcolor, page_title_color, page_title_font_size, page_title_font_family, page_title_normal (weight/checkbox), page_title_italic if ( $editor == 'gutenberg' ) { // Gutenberg shows the page title $font_family = weaverx_getopt_default('page_title_font_family', 'inherit'); if ( $font_family != 'inherit' ) { $fonts = weaverx_get_font_family(); if ( isset($fonts[$font_family]) ) { $font = $fonts[$font_family]; $put .= ".edit-post-layout .editor-post-title textarea{font-family:{$font} !important;}\n"; } } $title_color = weaverx_getopt_default('page_title_color', 'inherit'); if ( $title_color == 'inherit' ) $title_color = $text_color; $put .= ".edit-post-layout .editor-post-title textarea{color:{$title_color} !important;}\n"; $title_bgcolor = weaverx_getopt_default('page_title_bgcolor', 'inherit'); if ($title_bgcolor != 'inherit') $put .= ".edit-post-layout .editor-post-title textarea{background-color:{$title_bgcolor} !important;}\n"; $title_css = weaverx_getopt('page_title_bgcolor_css'); if ($title_css) $put .= ".edit-post-layout .editor-post-title textarea{$title_css}\n"; $font_size = weaverx_getopt_default( 'page_title_font_size', 'xl-font-size-title'); $em_fontmult = weaverx_fontsize_mult($font_size, 'title'); $em_font_size = ( $base_font_px / 16.0) * $em_fontmult ; $put .= ".edit-post-layout .editor-post-title{font-size:" . $em_font_size . "em;} /* size: {$font_size} mult:{$em_fontmult} em-size:{$em_font_size} */\n"; if ( weaverx_getopt_checked('page_title_normal')) // bold off? $put .= ".edit-post-layout .editor-post-title{font-weight:normal;}\n"; $italic = weaverx_getopt( 'page_title_italic' ); if ( $italic == 'off' ) $put .= ".edit-post-layout .editor-post-title{font-style:normal;}\n"; else if ( $italic == 'on' ) $put .= ".edit-post-layout .editor-post-title{font-style:italic;}\n"; // bar under some titles if ( ( $val = (int)weaverx_getopt('page_title_underline_int') ) ) { if ( $title_color == ''|| $title_color == 'inherit' ) $title_color = '#222'; /* if they want a border, this is the fallback color */ $put .= ".edit-post-layout .editor-post-title{border-bottom: {$val}px solid {$title_color};}\n"; } } // ====== OTHER ELEMENTS ====== if (($val = weaverx_getopt('input_bgcolor')) ) { // input area $put .= "input, textarea, ins, pre{background:" . $val . ";}\n"; } if (($val = weaverx_getopt('input_color')) ) { $put .= "input, textarea, ins, del, pre {color:" . $val . ";}\n"; } if (($val = weaverx_getopt('contentlink_color')) ) { // link $put .= "a {color:" . $val . ";}\n"; } if (($val = weaverx_getopt('contentlink_hover_color')) ) { $put .= "a:hover {color:" . $val . ";}\n"; } // ====== TABLES ====== /* weaverx_tables */ $table = weaverx_getopt('weaverx_tables'); if ($table == 'wide') { // make backward compatible with 1.4 and before when Twenty Ten was default $put .= "{$content_body}table {border: 1px solid #e7e7e7 !important;margin: 0 -1px 24px 0;text-align: left;width: 100%%;} tr th, thead th {color: #888;font-size: 12px;font-weight: bold;line-height: 18px;padding: 9px 24px;} {$content_body} tr td {border-style:none !important; border-top: 1px solid #e7e7e7 !important; padding: 6px 24px;} tr.odd td {background: rgba(0,0,0,0.1);}\n"; } elseif ($table == 'bold') { $put .= "{$content_body}table {border: 2px solid #888 !important;} tr th, thead th {font-weight: bold;} {$content_body}tr td {border: 1px solid #888 !important;}\n"; } elseif ($table == 'noborders') { $put .= "{$content_body}table {border-style:none !important;} {$content_body}tr th, {$content_body}thead th {font-weight: bold;border-bottom: 1px solid #888 !important;background-color:transparent;} {$content_body}tr td {border-style:none !important;}\n"; } elseif ($table == 'fullwidth') { $put .= "table {width:100%%;} tr th, thead th {font-weight:bold;}\n"; } elseif ($table == 'plain') { $put .= "{$content_body}table {border: 1px solid #888 !important;text-align:left;margin: 0 0 0 0;width:auto;} tr th, thead th {color: inherit;background:none;font-weight:normal;line-height:normal;padding:4px;} {$content_body}tr td {border: 1px solid #888 !important; padding:4px;}\n"; } // ====== LISTS ====== if (($val = weaverx_getopt('contentlist_bullet')) ) { // list bullet if ($val != '' && $val != 'disc') { if ($val != 'custom') { $put .= "ul {list-style-type:{$val};}\n"; } } } // ====== images ====== // these work for both tinyMCD and Gutenberg if (($val = weaverx_getopt('caption_color')) ) { // image caption, border color, width $put .= ".wp-caption p.wp-caption-text,.wp-caption-dd {color:{$val};}\n"; } if (($val = weaverx_getopt('media_lib_border_color')) ) { $put .= ".wp-caption, img {background:{$val};}\n"; } if (($val = weaverx_getopt('media_lib_border_int')) ) { $caplr = $val - 5; if ($caplr < 0) $caplr = 0; $put .= "img {padding:{$val}px;}\n"; $put .= sprintf(".wp-caption {padding: %dpx %dpx %dpx %dpx;}\n", $val, $caplr, $val, $caplr); } if ( weaverx_getopt_checked('show_img_shadows') ) { $put .= 'img {box-shadow: 0 0 2px 1px rgba(0,0,0,0.25) !important;}'."\n"; } // ======