LightningのPR Blockのfontawesomeについて

LightningのインラインCSSで

.prBlock_icon {
    color: #337ab7;
}

が定義されていて
VK All in One Expansion Unitのstyle.cssで

.prBlock_icon {
    color: #fff;
}

が定義されています。

私の環境では
①LightningのインラインCSS
②VK All in One Expansion Unitのstyle.css
の順に読み込まれていて、

.prBlock_icon {
    color: #fff;
}

の方が採用されました。

該当箇所はLightning トップページ PR Blockです。
ExUnit のウィジェットの PR Blockについては試していません。

cssの順番をまとめたり変更したりはしています。
あと、使用しているプラグインがcssを追加したりしています。
参考までに私がCSSやJSに行った機能を書いておきます。
また、状況を再現したサイトはhttps://test02.rick-addison.com/です。

/**
 * アクションを操作
 */
function lightning_change_action() {
	remove_action( 'wp_enqueue_scripts', 'lightning_addJs' );
	remove_action( 'wp_enqueue_scripts', 'lightning_css' );
	remove_action( 'wp_head', 'lightning_output_keycolor_css', 1 );
	remove_action( 'wp_head', 'lightning_print_css_common', 2 );
}
add_action( 'after_setup_theme', 'lightning_change_action' );

/**
 * フィルタを操作
 */
function lightning_change_filter() {
	add_filter( 'jetpack_enable_open_graph', '__return_false' );
}
add_action( 'after_setup_theme', 'lightning_change_filter' );

/**
 * テーマのCSSを読み込む
 */
function lightning_enqueue_styles() {
	
	// 不要なCSSを削除.
	wp_deregister_style( 'wp-jquery-ui-dialog' );
	wp_deregister_style( 'font-awesome' );

	// CSSを読み込む.
	wp_enqueue_style( 'jquery-ui-core', get_stylesheet_directory_uri() . '/library/jquery/css/jquery-ui.min.css', array(), '1.12.1' );
	if ( '5_WebFonts_CSS' === get_option( 'vk_font_awesome_version' ) ) {
		wp_enqueue_style( 'font-awesome', get_stylesheet_directory_uri() . '/library/fontawesome/5.6.3/css/all.min.css', array(), '5.6.3' );
	}
	if ( '4.7' === get_option( 'vk_font_awesome_version' ) ) {
		wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/inc/font-awesome/versions/4.7.0/css/font-awesome.min.css', array(), '4.7.0' );
	}
	wp_enqueue_style( 'icomoon', get_stylesheet_directory_uri() . '/library/icomoon/style.css', array(), '5.6.3' );
	wp_enqueue_style( 'prism.js', get_stylesheet_directory_uri() . '/library/prism.js/css/prism.css', array(), LIGHTNING_THEME_VERSION );
	wp_enqueue_style( 'lightning-common-style', get_template_directory_uri()  . '/assets/css/common.css', array(), LIGHTNING_THEME_VERSION );
	wp_enqueue_style( 'lightning-theme-style', get_template_directory_uri() . '/style.css', array( 'lightning-design-style' ), LIGHTNING_THEME_VERSION );
	wp_enqueue_style( 'lightning-child-theme-style', get_stylesheet_directory_uri() . '/style.css', array( 'lightning-woo-style' ), LIGHTNING_THEME_VERSION );
}
add_action( 'wp_enqueue_scripts', 'lightning_enqueue_styles' );

/**
 * テーマのJavaScriptを読み込む
 */
function lightning_enqueue_scripts() {
	// 不要なJavaScriptを削除.
	wp_deregister_script( 'jquery' );
	wp_deregister_script( 'jquery-migrate' );
	wp_deregister_script( 'jquery-ui-core' );
	wp_deregister_script( 'jquery-ui-widget' );

	// JavaScriptを読み込む.
	wp_enqueue_script( 'jquery', get_stylesheet_directory_uri() . '/library/jquery/js/jquery.min.js', array(), '3.3.1', true );
	wp_enqueue_script( 'jquery-migrate', get_stylesheet_directory_uri() . '/library/jquery/js/jquery-migrate.min.js', array( 'jquery' ), '3.0.1', true );
	wp_enqueue_script( 'jquery-ui-core', get_stylesheet_directory_uri() . '/library/jquery/js/jquery-ui.min.js', array( 'jquery' ), '1.12.1', true );
	if ( '5_SVG_JS' === get_option( 'vk_font_awesome_version' ) ) {
		wp_enqueue_script( 'font-awesome', get_stylesheet_directory_uri() . '/library/fontawesome/5.6.3/js/all.min.js', array(), '5.6.3' );
	}
	wp_enqueue_script( 'lightning-js', get_template_directory_uri() . '/assets/js/lightning.min.js', array( 'jquery' ), LIGHTNING_THEME_VERSION, true );
	wp_enqueue_script( 'clipboard.js', get_stylesheet_directory_uri() . '/library/clipboard.js/js/clipboard.min.js', array(), '2.0.0', true );
	wp_enqueue_script( 'prism.js', get_stylesheet_directory_uri() . '/library/prism.js/js/prism.js', array( 'clipboard.js' ), '1.15.0', true );
}
add_action( 'wp_enqueue_scripts', 'lightning_enqueue_scripts' );

/*-------------------------------------------*/
/*	Lightning custom color Print head
/*	* This is used for Contents and Plugins and others
/*-------------------------------------------*/
function lightning_child_output_keycolor_css() {
	$options        = get_option( 'lightning_theme_options' );
	$colors_default = array(
		'color_key'      => empty( $options['color_key'] ) ? '#337ab7' : $options['color_key'],
		'color_key_dark' => empty( $options['color_key_dark'] ) ? '#2e6da4' : $options['color_key_dark'],
	);
	$colors         = apply_filters( 'lightning_keycolors', $colors_default );
	$types          = array(
		'_bg'     => 'background-color',
		'_txt'    => 'color',
		'_border' => 'border-color',
	);
	reset( $colors );
	$dynamic_css = '/* ltg theme common */';
	foreach ( $colors as $k => $v ) {
		reset( $types );
		foreach ( $types as $kk => $vv ) {
			$dynamic_css .= ".{$k}{$kk},.{$k}{$kk}_hover:hover{{$vv}: {$v};}";
		}
	}
	// delete before after space
	$dynamic_css = trim( $dynamic_css );
	// convert tab and br to space
	$dynamic_css = preg_replace( '/[\n\r\t]/', '', $dynamic_css );
	// Change multiple spaces to single space
	$dynamic_css = preg_replace( '/\s(?=\s)/', '', $dynamic_css );
	wp_add_inline_style( 'lightning-design-style', $dynamic_css );
}
add_action( 'wp_head', 'lightning_child_output_keycolor_css', 1 );

/*-------------------------------------------*/
/*	Print head
/*-------------------------------------------*/
function lightning_child_print_css_common() {
	$options     = get_option( 'lightning_theme_options' );
	$dynamic_css = '';
	// 全幅ウィジェット等を使用した際にWindowsで横スクロールバーが出る対策( Charm 2.2.2 / Variety 2.3.2 以降リリースしたら削除)
	$dynamic_css = 'html, body { overflow-x: hidden; }';

	if ( isset( $options['color_key'] ) && isset( $options['color_key_dark'] ) ) {
		$color_key      = ( ! empty( $options['color_key'] ) ) ? esc_html( $options['color_key'] ) : '#337ab7';
		$color_key_dark = ( ! empty( $options['color_key_dark'] ) ) ? esc_html( $options['color_key_dark'] ) : '#2e6da4';
		$dynamic_css   .= '
		.bbp-submit-wrapper .button.submit,
		.woocommerce a.button.alt:hover,
		.woocommerce-product-search button:hover,
		.woocommerce button.button.alt { background-color:' . $color_key_dark . ' ; }
		.bbp-submit-wrapper .button.submit:hover,
		.woocommerce a.button.alt,
		.woocommerce-product-search button,
		.woocommerce button.button.alt:hover { background-color:' . $color_key . ' ; }
		.woocommerce ul.product_list_widget li a:hover img { border-color:' . $color_key . '; }
		.veu_color_txt_key { color:' . $color_key_dark . ' ; }
		.veu_color_bg_key { background-color:' . $color_key_dark . ' ; }
		.veu_color_border_key { border-color:' . $color_key_dark . ' ; }
		.btn-default { border-color:' . $color_key . ';color:' . $color_key . ';}
		.btn-default:focus,
		.btn-default:hover { border-color:' . $color_key . ';background-color: ' . $color_key . '; }
		.btn-primary { background-color:' . $color_key . ';border-color:' . $color_key_dark . '; }
		.btn-primary:focus,
		.btn-primary:hover { background-color:' . $color_key_dark . ';border-color:' . $color_key . '; }
		';
	} // if ( isset($options['color_key'] && isset($options['color_key_dark'] ) {

	/*  Child list hidden
	/*-------------------------------------------*/
	if ( isset( $options['sidebar_child_list_hidden'] ) && $options['sidebar_child_list_hidden'] ) {
		$dynamic_css .= '/* sidebar child menu display */
		.localNav ul ul.children	{ display:none; }
		.localNav ul li.current_page_ancestor	ul.children,
		.localNav ul li.current_page_item ul.children,
		.localNav ul li.current-cat ul.children{ display:block; }';
	}

	if ( $dynamic_css ) {
		// delete br
		$dynamic_css = str_replace( PHP_EOL, '', $dynamic_css );
		// delete tab
		$dynamic_css = preg_replace( '/[\n\r\t]/', '', $dynamic_css );
		// multi space convert to single space
		$dynamic_css = preg_replace( '/\s(?=\s)/', '', $dynamic_css );

		wp_add_inline_style( 'lightning-design-style', $dynamic_css );

	}

}
add_action( 'wp_head', 'lightning_child_print_css_common', 2 );

/**
 * レンダリングブロックしているJavascriptの読み込みを遅らせる by 寝ログ
 */
function move_scripts_head_to_footer_ex() {
	// ヘッダーのスクリプトを取り除く.
	remove_action( 'wp_head', 'wp_print_scripts' );
	remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
	remove_action( 'wp_head', 'wp_enqueue_scripts', 1 );

	// フッターにスクリプトを移動する.
	add_action( 'wp_footer', 'wp_print_scripts', 5 );
	add_action( 'wp_footer', 'wp_print_head_scripts', 5 );
	add_action( 'wp_footer', 'wp_enqueue_scripts', 5 );
}
add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );

スキンはLightning Skin SampleをベースにLightning Skin Varietyの要素を取り入れたものを使用しています。
siteContent セクションの記述は概ね削除しています。
(col-md-xxとmainSectionやsubSectionのdivをネスト化することでbootstrap側のマージンを確保しているため)

使用しているbootstrapのバージョンは3.3.7です。bootstrapのjsはスキン側に統合しました。

P.S.
Lightning bbPress Extensionを有効化したり無効化したりすると表示されなかったり表示されたりします。

P.P.S.
bootstrap 3.4.0をベースにするとスライドショーが概ね動こかなくなり
bootstrap 4.2.xをベースにするとスライドショー等のデザインが崩れました。

P.P.P.S.
このテーマではフッターでJQuery UIが読み込まれますが、使用しているのでしょうか？
私が使用している他のテーマでは読み込まれませんでした。

• この返信は5年、 10ヶ月前にDRILL LANCERが編集しました。
• この返信は5年、 10ヶ月前にDRILL LANCERが編集しました。

私の環境でもこちらの環境でも
VK All in One Expansion Unitのstyle.cssよりも後に

lightning-pro/assets/css/common.css
が読み込まれるようなので、Lightning トップページ PR BlockのCSSは

/**
 * LightningのPR Blockのスタイル.
 */
function lightning_child_front_pr_blocks_styles() {
	global $lightning_theme_options;
	$options = $lightning_theme_options;
	if ( isset( $options['front_pr_display'] ) && $options['front_pr_display'] ) {
		if ( isset( $options['color_key'] ) && $options['color_key'] ) {
			$color_key = $options['color_key'];
		} else {
			$color_key = '#337ab7';
		}
		$custom_css = "
			.prBlock_icon_outer { border:1px solid {$color_key}; }
			.prBlock_icon { color:{$color_key}; }
		";
		wp_add_inline_style( 'lightning-common-style', $custom_css );
	}
}
add_action( 'wp_enqueue_scripts', 'lightning_child_front_pr_blocks_styles' );

のようにlightning-common-styleに引っ掛けるのが有効だと思われます。

参考までに私の環境でも試しました。
https://test02.rick-addison.com

• この返信は5年、 9ヶ月前にDRILL LANCERが編集しました。

LiteningのPR BlockとVK All in One Expansion UnitのPR Blockでは微妙に違いが有るようです。
LiteningのPR Block

<div class="prBlocks prBlocks-default row">
	<article class="prBlock prBlock_lighnt col-sm-4">
		<a href="（略）">
			<div class="prBlock_icon_outer">
				<i class="fas fa-check font_icon prBlock_icon"></i>
			</div>
			<h1 class="prBlock_title">タイトル</h1>
			<p class="prBlock_summary">説明</p>
		</a>
	</article>
	（略）
</div>

VK All in One Expansion UnitのPR Block

<article class="veu_prBlocks prBlocks row">
	<div class="prBlock col-sm-4">
		<div class="prBlock_icon_outer" style="（略）">
			<i class="far fa-file-alt font_icon prBlock_icon" style="（略）"></i>
		</div>
		<h1 class="prBlock_title">タイトル</h1>
		<p class="prBlock_summary">説明</p>
	</div>
	（略）
</article>

そう考えれば、
LiteningのPR Blockのセレクタの指定はSASSぽく書けば
.prBlocks.prBlocks-default .prBlock{（中身のアイコン等のスタイル）}
と指定でき、VK All in One Expansion UnitのPR Blockは
.prBlocks.veu_prBlocks .prBlock{（中身のアイコン等のスタイル）}
と指定できます。
これを利用して２つのPR Blockのスタイリングを完全に分けてしまうのも手かもしれません。

P.S.
個人的には.prBlocks-defaultクラスを使わずに.ltg_prBlocksクラスを使いたいですね。
.prBlocks.ltg_prBlocks .prBlock{（中身のアイコン等のスタイル）}
.prBlocks.veu_prBlocks .prBlock{（中身のアイコン等のスタイル）}
となって美しい（？）ですから

• この返信は5年、 9ヶ月前にDRILL LANCERが編集しました。