FacebookTwitter

How To Darken Post Background Images in Fable Theme 1.7.4

The default background image is too bright to read the white text. This is a little tweak you can apply, so you don’t have to edit the image every time you upload.

By on Apr 12, 2016 in Geek | 0 comments

Share On GoogleShare On FacebookShare On Twitter

The theme I’m currently using for this site is Fable Theme by Elegant Theme.

One of the issues I recently dealt was how I have to be picky about selecting featured images for each post. The featured image is used as the background image for each post on homepage and archive pages. And by default, when there is an featured image assigned to a post, the font color of the post title and its summary is white.

Initially, I darken the text shadow to make the text more readable. But depending on the image I picked, it wasn’t an effective solution for some posts.

So I decided to apply linear gradient over the post background/featured image to make it little darker to give little more contrast between the text and the image.

Unfortunately, you can’t simply overwrite style.css in this case. The themes uses a function, et_fable_get_background(), to insert background-image property in the section in content.php

So in order to make the change, you need to modify two files in the child theme folder.

Step 1: Add your customized version of et_fable_get_background() function in the child theme’s functions.php

I copied the original et_fable_get_background() from the original theme’s functions.php and renamed the function to et_custom_fable_get_background(). Then I made the change to the line where it printout the background-image stylesheet property (line 31):

<?php
//functions.php in your child theme folder

if ( ! function_exists( 'et_custom_fable_get_background' ) ) :
function et_custom_fable_get_background() {
	if ( has_post_format( 'gallery' ) ) return '';

	$style = '';
	$post_bg_color     = ( $bg_color = get_post_meta( get_the_ID(), '_et_post_bg_color', true ) ) &amp;amp;&amp;amp; '' !== $bg_color
		? $bg_color
		: '#ffffff';
	$post_use_bg_color = 'on' === get_post_meta( get_the_ID(), '_et_use_bg_color', true )
		? true
		: false;
	$background = array();

	$thumb = '';
	$width = (int) apply_filters( 'et_blog_image_width', 9999 );
	$height = (int) apply_filters( 'et_blog_image_height', 9999 );
	$classtext = '';
	$titletext = get_the_title();
	$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Indeximage' );
	$thumb = $thumbnail["thumb"];

	// Gallery posts use featured image for the picture in the video container
	// so don't allow it to use the featured image for background
	if ( '' !== $thumb &amp;amp;&amp;amp; ! has_post_format( 'video' ) )
		$background['image'] = $thumb;

	if ( isset( $background['image'] ) )
		$style = sprintf( ' style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(%s);"', esc_attr( $background['image'] ) );
		//ORIGINAL CODE: $style = sprintf( ' style="background: url(%s);"', esc_attr( $background['image'] ) );

	// Attaches solid background color to the post if the featured image is not set
	// or 'Background Color instead of the Featured Image' is enabled
	if ( '' === $style || $post_use_bg_color )
		$style = sprintf( ' style="background-color: %s;"', esc_attr( $post_bg_color ) );

	return $style;
}
endif;

Step 2: copy content.php in Fable theme to your child theme folder and update the file to use your custom function to output the custom css code

Now that you created the custom function to apply linear gradient to the background, replace the original function with the new one in content.php (line 3) :

//content.php



<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?><?php echo et_custom_fable_get_background(); ?>>


<div class="container clearfix">


<header class="entry-title">
		<?php if ( is_single() ) : ?>


<h1><?php the_title(); ?></h1>




<div style="text-align: center;"><?php the_excerpt(); ?></div>


		<?php else : ?>


<h2>
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			</h2>


		<?php endif; ?>

			<?php et_fable_post_meta(); ?>
		</header>



	<?php if ( ! is_single() ) : ?>


<div class="entry-content clearfix">


<?php truncate_post( 600 ); ?>

		</div>


 <!-- .entry-content -->



<footer class="entry-footer">
			<a href="<?php the_permalink(); ?>" class="read-more"><span><?php esc_html_e( 'Read More', 'Fable' ); ?></span></a>
		</footer>


	<?php endif; ?>
	</div>


 <!-- .container -->

	<?php if ( is_single() ) : ?>
		<?php get_template_part( 'includes/share', get_post_format() ); ?>
	<?php endif; ?>
</article>


 <!-- .entry-->

Step 3: Overwrite style.css to re-enforce background-related property values

Since we changed the CSS property from “background-image” to “background”, you must re-enforce other CSS background properties in your child to theme to restore the rest of background-related values:

/* child theme's style.css */
.entry {
  	background-repeat: no-repeat !important;
  	background-position: top center !important;
  	-moz-background-size: cover !important;
  	-webkit-background-size: cover !important;
  	background-size: cover !important; 
  }

Leave a Reply