Blog

Just vertically center one specific flex item

Posted on

The CSS align-items: center lets you center flex items which are next to each other, so that their horizontal midpoint is on one horizontal line. But recently I had two flex items and only wanted to center the right one, if the left is higher, but not the left one if the right is higher. For that, I cannot use align-items: center, but the solution is not much more complex:

.center-flex-item {
	margin-bottom: auto;
	margin-top: auto;
}
Code language: CSS (css)

With that, the flex item .center-flex-item will be centered if a higher item sits beneath it, but the other item will not be centered if .center-flex-item is greater.

Update from June 9, 2017: Easier and with the probably more correct CSS rule for the scenario, it looks like that:

.center-flex-item {
	align-self: center;
}

Thanks to Matthias for the hint!

WordPress weekly recap #22: Proposal of the WordPress community conduct project and more

Posted on

On Make/Updates, there was a proposal this week to create a WordPress Community Code of Conduct (CCoC), which promotes safety and inclusion for all community members in community spaces — like the WordCamp Code of Conduct already does it for WordCamps.

Continue reading "WordPress weekly recap #22: Proposal of the WordPress community conduct project and more"

Adapt CSS for right-to-left languages with Gulp

Posted on

If a website is displayed in a language which goes from right to left, we need to modify a few CSS rules if the CSS was written for left-to-right languages — for example, we would need to adjust left and right spaces and flip floats. We could make these Adjustments manually, but that can be time-consuming. With the help of Gulp, it is easier and faster.

Continue reading "Adapt CSS for right-to-left languages with Gulp"

Modifying an existing customizer control

Posted on

This post shows you how to modify an existing customizer control — helpful for the solution was a Gist by Marcio Duarte.

In my case, I wanted to add an active_callback to the header image control to only show it if the user is on a static front page. To get this done, we only need one line of code:

/**
 * Set active callback for the header image control.
 */
$wp_customize->get_control( 'header_image' )->active_callback = 'slug_is_static_front_page';
Code language: PHP (php)

You can modify the other control properties accordingly — a few examples can be found in the above-linked Gist. For the sake of completeness here is the callback function:

/**
 * Check if we are on a static front page.
 *
 * @param WP_Customize_Control $control Control object.
 *
 * @return bool
 */
function slug_is_static_front_page( $control ) {
	/**
	 * Return true if is static front page.
	 */
	if ( is_front_page() && is_page() ) {
		return true;
	} else {
		return false;
	}
}
Code language: PHP (php)