I am trying to change up the appearance of my WordPress site by replacing the text on page titles with images. Working on a child theme locally, I need to customize each page individually as they will have different images.
The current state is as follows: https://i.sstatic.net/KQLyJ.jpg
My plan is to create unique title designs in Photoshop and save them as Jpg/Png files to replace the existing text.
I believe I have located the relevant part of the CSS
.hestia-title{
}I attempted:
.hestia-title{
font-size: 0px;
background-image:url(assets/img/quick_test.jpg);
}Resulting in this look:
https://i.sstatic.net/ypREi.png
Could anyone provide some guidance on this matter? Thank you
I managed to achieve this look now: https://i.sstatic.net/DG2DL.png
Here is the code used:
.page-id-88 .page-header .hestia-title{
color:transparent;
background-image: url(assets/img/title_mock.png);
}
.page-header.header-small .hestia-title{
background-size:contain;
background-repeat: no-repeat;
}
.home .hestia-title{
display:none;
}This is what the page.php content looks like
<?php
/**
* The template for displaying all single posts and attachments.
*
* @package Hestia
* @since Hestia 1.0
*/
get_header();
do_action( 'hestia_before_single_page_wrapper' );
?>
<div class="<?php echo hestia_layout(); ?>">
<?php
$class_to_add = '';
if ( class_exists( 'WooCommerce' ) && ! is_cart() ) {
$class_to_add = 'blog-post-wrapper';
}
?>
<div class="blog-post <?php esc_attr( $class_to_add ); ?>">
<div class="container">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'page' );
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</div>
</div>
<?php get_footer(); ?>