Execute Customizer CSS To External File and Enque
-
Hello I want Execute my current Customizer CSS to external file and enqueue instead of execute it as Inline css in wp-head section.
Is there any Way to do it?
Please Suggest me. My Idea is to make header more clean.
Below is Code that executed CSS from Customizer to header/<?php function bluth_custom_css() { global $blu_css_options; $blu_css_options = array( 'custom_css' => html_entity_decode(of_get_option('custom_css')), ); ?> <style type="text/css"> <?php /* BACKGROUND */ // If there's a background image if(bl_utilities::get_option('bl_background_image')){ $background_styling = 'url("' . bl_utilities::get_option('bl_background_image') . '") no-repeat fixed right top;'; $background_size = 'cover'; } // If there's a custom pattern elseif(bl_utilities::get_option('bl_background_pattern_custom')){ $background_styling = 'url("' . bl_utilities::get_option('bl_background_pattern_custom') . '") repeat;'; $background_size = 'auto'; } // If there's a pattern elseif(bl_utilities::get_option('bl_background_pattern')){ $background_styling = 'url("' . get_template_directory_uri() . '/assets/img/pattern/large/' . bl_utilities::get_option('bl_background_pattern') . '.png") repeat;'; $background_size = 'auto'; } // If there's nothing, then use the color else{ $background_styling = bl_utilities::get_option('bl_background_color'); $background_size = 'auto'; } ?> /* CSS */ blockquote{ width: <?php echo get_theme_mod('bquote_width', '92%'); ?> !important; color: <?php echo get_theme_mod('bquote_text_color', '#505050'); ?>; background:<?php echo get_theme_mod('bquote_bg_color', '#eeeeee'); ?> !important; } blockquote p{ font-size: <?php echo get_theme_mod('bquote_font_size', '14px'); ?> !important; color: <?php echo get_theme_mod('bquote_text_color', '#505050'); ?>;} blockquote.style1 { font-style: italic; width: <?php echo get_theme_mod('blockquote_width', '200px'); ?> !important; margin: 0.25em 0; padding: 1.25em 20px !important; line-height: 1.45 !important; position: relative; color: <?php echo get_theme_mod('blockquote_text_color', '#fff'); ?>; background:<?php echo get_theme_mod('blockquote_bg_color', '#fff'); ?> !important; margin-left:20px; margin-right: 0; } blockquote.style1 p{ font-size: <?php echo get_theme_mod('blockquote_font_size', '18px'); ?> !important; font-style: italic; line-height: 1.45 !important; position: relative; color: <?php echo get_theme_mod('blockquote_text_color', '#fff'); ?>;} @media screen and (min-width: 824px) { .mwidget{ display:none !important; } } @media all and (max-width:824px) { .adlinks { display:none !important; } } .mwidget, .mwidget p { color:<?php echo bl_utilities::get_option('bl_mwidget_text_color');?> !important; width:98%; display: block; margin: 20px 0 0 20px; } .mwidget a, .mwidget a:hover { color:<?php echo bl_utilities::get_option('bl_miwdget_link_color');?> !important ; text-decoration:<?php bl_utilities::get_option('bl_miwdget_link_decoration');?> !important; } body{ background: <?php echo $background_styling; ?>; background-size: <?php echo $background_size; ?>; } h1, h2, h3, h4, h5, h6, .widget_calendar table > caption{ letter-spacing: <?php echo bl_utilities::get_option('bl_heading_font_letter_spacing'); ?>; } a.menu-brand:hover, a.brand-image:hover{ background-color:<?php echo bl_utilities::get_option('bl_brand_bg_color'); ?> !important; } .brand-text span, .brand-text, .brand-image { color:<?php echo bl_utilities::get_option('bl_brand_color'); ?> !important; background-color:<?php echo bl_utilities::get_option('bl_brand_bg_color'); ?> !important; } .header-bg{ background:url("<?php echo bl_utilities::get_option('bl_header_background_image'); ?>"); background-repeat: no-repeat; background-position: center center; background-size: cover; width:100%; margin-top: 50px; } .box { background:<?php echo bl_utilities::get_option('bl_widget_bg_color'); ?> !important; } #side-bar .widget-head, #footer-body .widget-head{line-height:<?php echo bl_utilities::get_option('bl_widget_head_line_height'); ?> !important;} #side-bar .widget-head { background-color:<?php echo bl_utilities::get_option('bl_widget_titlebg_color'); ?> !important; } #side-bar ul li { background:url("<?php echo bl_utilities::get_option('bl_sidebar_bullet_img'); ?>"); background-repeat:no-repeat; padding: 0px 0 0px 20px; margin: 0.5em 0 0.5em 0; line-height: 1.5em; background-position: 4px 8px; } #side-bar ul li:hover { background:url("<?php echo bl_utilities::get_option('bl_sidebar_bullethover_img'); ?>")"; background-repeat:no-repeat; padding: 0px 0 0px 20px; } .container{ width: <?php echo bl_utilities::get_option('bl_layout_width'); ?>px; } #masthead a, .menu-main, .menu-main ul, .menu-main a, .menu a{ color: <?php echo bl_utilities::get_option('bl_menu_color'); ?> !important; } #masthead .menu-main a:hover, .menu a:hover{ background: <?php echo bl_utilities::get_option('bl_header_hover_background_color'); ?>; border-color: <?php echo bl_utilities::get_option('bl_header_hover_background_color'); ?> !important; color: <?php echo bl_utilities::get_option('bl_header_hover_font_color'); ?> !important; } /* THEME COLOR */ .nav > li.open > a, .nav > li > a:hover, .nav > li.open > a:hover, .nav > li > a:focus, .nav > li.open > a:focus, .nav > li.open > a:focus, .nav > li.open > a span, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color:<?php echo bl_utilities::get_option('bl_menu_color'); ?>!important; } .nav li a:hover .caret, .nav li.open a .caret, .nav li.open a:hover .caret, .nav li.open a:focus .caret{ border-bottom-color:<?php echo bl_utilities::get_option('bl_menu_color'); ?>; border-top-color:<?php echo bl_utilities::get_option('bl_menu_color'); ?>!important; } .top-color, .top-line, .nav-line,.widget_tag_cloud .tagcloud,.gallery-item a:after,article.type-portfolio .moretag, article.type-portfolio .more-link{ background-color:<?php echo bl_utilities::get_option('bl_sidebar_link_color'); ?>!important; } .top-color, .top-line, .nav-line,.widget_tag_cloud .tagcloud a:hover,.gallery-item a:after,article.type-portfolio .moretag:hover,article.type-portfolio .more-link:hover{ background-color:<?php echo bl_utilities::get_option('bl_sidebar_linkhover_color'); ?>!important; } .site-footer a, #footer-body a, .site-footer a:hover, #footer-body a:hover{ color:<?php echo bl_utilities::get_option('bl_footer_link_color'); ?>!important; } .dropdown-menu{ border-top: 2px solid <?php echo bl_utilities::get_option('bl_menu_color'); ?>!important; } .entry-content a, .entry-container a{ text-decoration:<?php echo bl_utilities::get_option('bl_main_link_decoration'); ?>!important; } .entry-content a, .entry-container a{ text-decoration:<?php echo bl_utilities::get_option('bl_main_link_decoration'); ?>!important; color: <?php echo bl_utilities::get_option('bl_contentarea_link_color'); ?>!important; } .entry-content a:hover, .entry-container a:hover, .entry-container a:hover, a:hover, a:focus { text-decoration:<?php echo bl_utilities::get_option('bl_main_linkhover_decoration');?> !important; color: <?php echo bl_utilities::get_option('bl_contentarea_linkhover_color'); ?>!important; } .pagination > a{ border-color: <?php echo bl_utilities::get_option('bl_theme_color'); ?>!important; } .bl_tabs ul li .tab_text a, .bl_tabs ul li .tab_text a, .textwidget ul li a{ text-decoration:<?php echo bl_utilities::get_option('bl_sidebar_link_decoration'); ?> !important; color: <?php echo bl_utilities::get_option('bl_sidebar_link_color'); ?> !important; } .bl_tabs ul li .tab_text a:hover, .bl_tabs ul li .tab_text a:focus, .textwidget ul li a:hover{ text-decoration:<?php echo bl_utilities::get_option('bl_sidebar_linkhover_decoration'); ?> !important; color: <?php echo bl_utilities::get_option('bl_sidebar_linkhover_color'); ?> !important; } .bl_tabs ul li .tab_text a span, a{ color: <?php echo bl_utilities::get_option('bl_sidebar_link_color'); ?>!important; } .custom-logo span{ font-size:<?php echo bl_utilities::get_option('bl_custom_logo_size'); ?>!important; color:<?php echo bl_utilities::get_option('bl_customlogo_font_color'); ?> !important; opacity:<?php echo bl_utilities::get_option('bl_custom_logo_opacity'); ?>!important; } .entry-content h1{font-size:<?php echo bl_utilities::get_option('bl_h1_size'); ?>!important; color:<?php echo bl_utilities::get_option('bl_h1_font_color'); ?>!important; } .entry-content h2, .widget-body h2{font-size:<?php echo bl_utilities::get_option('bl_h2_size'); ?>!important; color:<?php echo bl_utilities::get_option('bl_h2_font_color'); ?>!important; } .entry-content h3{font-size:<?php echo bl_utilities::get_option('bl_h3_size'); ?>!important; color:<?php echo bl_utilities::get_option('bl_h3_font_color'); ?>!important; } .entry-content h4{font-size:<?php echo bl_utilities::get_option('bl_h4_size'); ?>!important; color:<?php echo bl_utilities::get_option('bl_h4_font_color'); ?>!important; } h3.widget-head, .textwidget h3, .widget-body h3, #footer-widget h3{ font-size:<?php echo bl_utilities::get_option('bl_sidebar_title_size'); ?>!important;} .textwidget h3, .widget-body h3, #footer-widget h3{font-weight:normal; text-align: left; padding-left: 15px; } .widget-body h2{ text-align: left; padding-left: 15px;} #side-bar ul li a, .widget_recent_entries li a, .widget_nav_menu ul li a, .widget_categories li a, .widget_recent_comments li a, .widget_pages li a, .widget_meta li a, .widget_rss li a, .widget_archive li a { font-size:<?php echo bl_utilities::get_option('bl_sidebar_link_size'); ?>!important; color:<?php echo bl_utilities::get_option('bl_sidebar_link_color'); ?>!important; text-decoration:<?php echo bl_utilities::get_option('bl_sidebar_link_decoration'); ?>!important; } #side-bar ul li a:hover, .widget_recent_entries li a:hover, .widget_nav_menu ul li a:hover, .widget_categories li a:hover, .widget_recent_comments li a:hover, .widget_pages li a:hover, .widget_meta li a:hover, .widget_rss li a:hover, .widget_archive li a:hover { text-decoration:<?php echo bl_utilities::get_option('bl_sidebar_linkhover_decoration'); ?>!important; } .entry-content{ font-size: <?php echo bl_utilities::get_option('bl_main_font_size'); ?>; line-height:<?php echo bl_utilities::get_option('bl_main_font_line_height'); ?>; } .entry-content, .entry-content p, p{ color: <?php echo bl_utilities::get_option('bl_p_font_color'); ?>; } .widget-head, .textwidget h3, #footer-widget h3 { color: <?php echo bl_utilities::get_option('bl_widget_header_font_color'); ?> !important; } /* HEADER SIZE */ .menu-main{ height: <?php echo bl_utilities::get_option('bl_menu_height'); ?>px; } .brand, .menu-brand, .open-menu{ line-height: <?php echo bl_utilities::get_option('bl_menu_height'); ?>px; } .menu-wrapper{ top: <?php echo bl_utilities::get_option('bl_menu_height'); ?>px; } /* #main{ padding-top: <?php echo bl_utilities::get_option('bl_menu_height')+30; ?>px; } */ /* HEADER BACKGROUND COLOR */ .menu-main, .menu-main ul, .menu-wrapper, .menu-search .searchform input{ background-color:<?php echo bl_utilities::get_option('bl_header_color'); ?>; } .comments{ background: <?php echo bl_utilities::get_option('bl_comments_background_color'); ?>; } .comments h3{ color: <?php echo bl_utilities::get_option('bl_comments_title_font_color'); ?>; } .site-footer{ background: <?php echo bl_utilities::get_option('bl_footer_background_color'); ?> !important; } #footer-body p, .site-footer p{ color: <?php echo bl_utilities::get_option('bl_footer_font_color'); ?> !important; } .site-footer .widget-head{ color: <?php echo bl_utilities::get_option('bl_footer_header_font_color'); ?> !important; } <?php if(bl_utilities::get_option('bl_standard_post_color')){ $post_format_color['standard'] = bl_utilities::get_option('bl_standard_post_color'); $post_format_color['gallery'] = bl_utilities::get_option('bl_gallery_post_color'); $post_format_color['quote'] = bl_utilities::get_option('bl_quote_post_color'); $post_format_color['link'] = bl_utilities::get_option('bl_link_post_color'); $post_format_color['audio'] = bl_utilities::get_option('bl_audio_post_color'); $post_format_color['video'] = bl_utilities::get_option('bl_video_post_color'); $post_format_color['status'] = bl_utilities::get_option('bl_status_post_color'); $post_format_color['sticky'] = bl_utilities::get_option('bl_sticky_post_color'); foreach($post_format_color as $name => $color){ ?> .post-format-<?php echo $name ?>, .format-<?php echo $name ?> .post-meta ~ * a, .format-<?php echo $name ?> .post-meta a:hover, .format-<?php echo $name ?> .entry-title a:hover, .format-<?php echo $name ?> a.moretag, .format-<?php echo $name ?> a.more-link{ color: <?php echo $color ?>; } .tab_<?php echo $name ?>, .format-<?php echo $name ?> a.moretag:hover, .format-<?php echo $name ?> a.more-link:hover, .format-<?php echo $name ?> .entry-image .entry-category a, .format-<?php echo $name ?> .entry-image > a:after, .format-<?php echo $name ?> .page-links > a:hover, .format-<?php echo $name ?> .page-links > span{ background-color: <?php echo $color ?>; } .format-<?php echo $name ?> *::selection{ color: #FFFFFF; background-color: <?php echo $color ?>; } .format-<?php echo $name ?> *::-moz-selection{ color: #FFFFFF; background-color: <?php echo $color ?>; } .format-<?php echo $name ?> a.moretag, .format-<?php echo $name ?> a.more-link, .format-<?php echo $name ?> .page-links > a:hover, .format-<?php echo $name ?> .page-links > span{ border-color: <?php echo $color; ?>; } .format-<?php echo $name ?> footer.entry-meta .post-tags li a:hover, .post-format-badge.post-format-<?php echo $name; ?>{ color: <?php echo $color ?>; } article.type-post.format-<?php echo $name ?> p a, article.type-post.format-<?php echo $name ?> p a:hover span:before, article.type-post.format-<?php echo $name ?> p a:focus span:before{ color: <?php echo $color ?>; } <?php } ?> /* sticky post */ article.sticky:before{ border-color: <?php echo bl_utilities::get_option('bl_sticky_post_color'); ?> <?php echo bl_utilities::get_option('bl_sticky_post_color'); ?> transparent; } <?php if(!empty($blu_css_options['sticky_post_color'])){ echo '.sticky .post-format-badge{color: '.$blu_css_options['sticky_post_color'].'};'; echo '.sticky .post-meta ~ * a, .sticky .post-meta a:hover, .sticky .entry-title a:hover{color: '.$blu_css_options['sticky_post_color'].';}'; } } /* CUSTOM CSS */ echo bl_utilities::get_option('bl_custom_css'); ?> .brd, img.brd { padding: 2px !important; border: 2px solid #ccc !important; float: left !important; margin: 4px 10px 5px 0 !important; } .bread-l {float: left;} .bread-c {text-align:center; font-size: 12px;} .bread-r {float: right;} </style> <?php if(1 == 2){ ?> <style type="text/css"> <?php if(!empty($blu_css_options['background_color'])){ ?> body{ }<?php } if(!empty($blu_css_options['post_header_color'])){ ?> .entry-title a{ color:<?php echo $blu_css_options['post_header_color']; ?>; } <?php } if(!empty($blu_css_options['h1_font_color'])){ ?> #masthead h1, #masthead h1 small{ color:<?php echo $blu_css_options['h1_font_color']; ?>; } .nav a .caret{ border-bottom-color:<?php echo $blu_css_options['h1_font_color']; ?>; border-top-color:<?php echo $blu_css_options['h1_font_color']; ?>; } <?php } ?> </style> <?php } } add_action( 'wp_head', 'bluth_custom_css', 100 ); ?>
- The topic ‘Execute Customizer CSS To External File and Enque’ is closed to new replies.