When Changing One Web Page Element Requires Rethinking the Others - Montana Webmaster

When Changing One Web Page Element Requires Rethinking the Others

What Will Changing the Banner Image Affect?

What I Wanted to Change

Screenshot of WordPress Kahuna theme banner
The Kahuna theme banner has two text areas, which are layers over the image, so the text you enter is searchable.

I made the decision to use a slider for my home page banner, instead of the static image supplied by the theme. The theme had branding text as a layer over the static image. With the change to a slider the branding (logo or business name) that was part of the original theme options is gone.  The theme actually comes with it’s own built-in slider, but  that slider didn’t have all the functionality I wanted  So, I used a different plugin with the features I wanted. But, now, I need to compensate for the lost branding.

Your logo is an important part of the branding on your site. The theme provides for a small site title and tagline in the row above the slider, but the name is very small (see asterisk). That would make sense if I were going to use the business name in large text on the slider images, but I’m not. So, I need to rethink the size of the branding information in the top row!

Screenshot of home page banner image options in Kahuna theme
The WordPress Kahuna theme allows for options for your banner image.

How Did I Change the Font Size?

Step 1

Since WordPress added the Customizer function in 2015, themes have been adding new areas of the posts and pages that can be formatted through the Customizer. So, the first step is to check whether changing the formatting of the site-title can be done in the customizer. Note that this post assumes you are not using a builder theme, such as Divi, Avada, etc.

There is no option in the customizer for changing the font size in the top row, so I have use a different method.

Step 2

An aside: Changing formatting in the Customizer puts that code in the database, instead of in your style sheet. For that reason, I often do those changes in code to keep my stylesheet the authority source for formatting.

It’s easy enough to make the text in the top row larger with a simple CSS change. There are several ways to change the CSS in a WordPress website, but the best practice is to create a child theme. I already have a  Kahuna child theme started for an earlier change, so that step is finished. In this case, I will go to the style.css file in the child theme and add some CSS code.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.