Hi there! I see you’ve got the white background box beneath the black title now, so maybe you’re all set?
Feel free to pop back in if it’s still giving you any trouble! 🙂
Thread Starter
faila
(@faila)
Hi Sarah, thank you for your concern. I want to learn how to increase the size of this box.
Thank you!
Oh, okay. I see what you mean. 🙂 Since that background is for the text itself expanding it can be tricky, as you’ve discovered. I tried out some border and padding options, but they didn’t work very well (left gaps in the white box).
As a workaround, maybe you could use this CSS to hide the existing title & description:
.site-title, .site-description {
display: none;
}
Then edit your Header Image to include the white box & text you want, then upload the new version of the header. If you don’t have software for that, Canva.com would allow you to make those edits and save a new version to upload to your site.
Let me know how it goes! (Or if you discover a CSS edit that you like the look of without adjusting your header, be sure to let us know!)
One note on adding CSS to your site, just in case — When adding CSS, don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated to the latest version.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. Then you can add your CSS in Appearance > Edit CSS. (As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.)
Thread Starter
faila
(@faila)
Hi Sarah,
I am already using Jetpack to edit CSS and I had been meaning to create a child theme for some time. Thank you for the reminder :]
Having created the child theme, I finally came up with a solution after a few try-outs.
I replaced the following on header.php :
<div class="site-branding">
<?php sela_the_site_logo(); ?>
<h4 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php if ( '' != get_bloginfo( 'description' ) ) : ?>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div><!-- .site-branding -->
with this:
<div class="site-branding">
<div style="border:1px solid #f25f70; padding: 5px; margin-top:90px; margin-left:335px; margin-right:335px; background: rgba(255, 255, 255, 0.7);">
<?php sela_the_site_logo(); ?>
<h4 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php if ( '' != get_bloginfo( 'description' ) ) : ?>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
</div><!-- .site-branding -->
So I basically added a border with a background opacity of 70% around the site-title and site-description.
I really worked hard on this so I hope this would be of help to others as well!
Thank you again!
Oooh, very nice work! Love the 70% opacity on there. Looks really nice layered over your image. 🙂
Thanks for sharing!
