css 实用工具栏 - http://www.carriedils.com/widget-area-above-header-genesis/

Posted 2021-05-13

/** Register Utility Bar Widget Areas. */

genesis_register_sidebar( array(
	'id' => 'utility-bar-left',
	'name' => __( 'Utility Bar Left', 'theme-prefix' ),
	'description' => __( 'This is the left utility bar above the header.', 'theme-prefix' ),
) );

genesis_register_sidebar( array(
	'id' => 'utility-bar-right',
	'name' => __( 'Utility Bar Right', 'theme-prefix' ),
	'description' => __( 'This is the right utility bar above the header.', 'theme-prefix' ),
) );

add_action( 'genesis_before_header', 'utility_bar' );
/**
* Add utility bar above header.
*
* @author Carrie Dils
* @copyright Copyright (c) 2013, Carrie Dils
* @license GPL-2.0+
*/
function utility_bar() {

	echo '<div class="utility-bar"><div class="wrap">';

	genesis_widget_area( 'utility-bar-left', array(
		'before' => '<div class="utility-bar-left">',
		'after' => '</div>',
	) );

	genesis_widget_area( 'utility-bar-right', array(
		'before' => '<div class="utility-bar-right">',
		'after' => '</div>',
	) );

	echo '</div></div>';

}

/* Utility Bar
--------------------------------------------- */

.utility-bar {
	background-color: #333;
	border-bottom: 1px solid #ddd;
	color: #ddd;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 10px 0;
	padding: 1rem;
}

.utility-bar a {
	color: #ccff33;
}

.utility-bar a:hover {
	text-decoration: underline;
}

.utility-bar-left,
.utility-bar-right {
	width: 50%;
}

.utility-bar-left p,
.utility-bar-right p {
	margin-bottom: 0;
}

.utility-bar-left {
	float: left;
}

.utility-bar-right {
	float: right;
	text-align: right;
}

.utility-bar input[type="search"] {
	background: inherit;
	padding: 10px 0 0;
	padding: 1.0rem 0 0;
}