Storefront Masthead Title Text

Excuse me if this is a bump. I found a way to center the Site Title/Branding Text. But does anyone know if there is a way to mix bold and normal text within it?

Hi @mnatseah624,

That’s a great question. Unfortunately, there isn’t a “first-word” selector in CSS that we could use to style the words differently. Also in the site title, there isn’t a way to add HTML markup that we could use to style it. If that was possible we could just add a <span></span> around one of the words and use that to change the font-weight.

That leaves us two options. You could create an image logo in a tool like Photoshop and style the words individually. That’s the best way to have the greatest control over your site’s title.

The second option is to use a bit of JavaScript to add the HTML markup for styling the logo differently. To add it, you can use a plugin like Simple Custom CSS and JS. Then add this JavaScript:

jQuery('.site-title a').each(function() {
    var word = jQuery(this).html();
    var index = word.indexOf(' ');
    if(index == -1) {
        index = word.length;
    }
    jQuery(this).html('<span class="first-word">' + word.substring(0, index) + '</span>' + word.substring(index, word.length));
});

Then you’ll need to add this to the Additional CSS:

.site-branding .site-title a {
    font-weight: 400;
}

span.first-word {
    font-weight: 700;
}

When I applied that to the site, I ended up with this:

If you want the bold/regular reversed, you would swap the font weights in that last snippet.

Take care,

Many thanks @3sonsdevelopment. That’s really helpful. First off, I’ll try the graphic text in image option. Tho I’ll need to see how responsive it is.

But your suggestions lead me to another couple of questions tho.
(1) Does this Simple Custom CSS and JS plugin take the place of a Child Theme. Or can it be used with a Child Theme. I’m new to WP and only using Additional CSS. I don’t want to add any more than I have to.
(2) Blocks> Common> Cover allows just the kind of text insertion and editing that I want. But to do that, the Cover Block would need to completely replace the Masthead image, with the menu and cart showing on top. Is that possible?

Hi @mnatseah624,

Great questions there. Let’s take a look at them.

Does this Simple Custom CSS and JS plugin take the place of a Child Theme.

The reason I mentioned this plugin is there isn’t a simple built-in way to add JavaScript to the front end of the site. That exists for CSS, but not as easily for JS. This plugin makes that possible without too much fuss.

Working with a child theme can be more efficient than using the Additional CSS or the Simple Custom plugin. But those are easier to use to get things set like you want them. You might consider using them to get things looking great on your site and then move their content to a child theme.

To add the JavaScript you’d need to either write a PHP function to include it or create a header.php or footer.php in your child them and add the JavaScript there.

Blocks> Common> Cover allows just the kind of text insertion and editing that I want. But to do that, the Cover Block would need to completely replace the Masthead image, with the menu and cart showing on top. Is that possible?

It is not possible to replace the site’s header with the cover block. It’s a good idea, but there’s not a built-in mechanism to do that.

Best,

Hi @3sonsdevelopment, Thank you again. I’ve tried the graphic text, but it doesn’t work so well on tablet or phone. So I’ll be giving your great JS coding a try tomorrow.
Best wishes

• This reply was modified 5 years, 3 months ago by mnatseah624.

Hi @3sonsdevelopment Thanks for your tips and the code. Well I installed Simple Custom CSS and JS. I entered your JS Code and then the CSS code in Additional CS. The CSS code does a good job of controlling font weight to anything I might want. But the second line of code

span.first-word {
    font-weight: 700;
}

doesn’t seem to be working for me, because the whole title is all still the same font weight.
Any ideas?

• This reply was modified 5 years, 3 months ago by mnatseah624.

The JavaScript isn’t applying to the title. That’s keeping the CSS from being able to work.

Try editing that JS snippet and set it to print to the footer instead of the header and see if it works for you then.

Best,

Thanks. But you’re dealing with a real js beginner here.
I’ve no idea how to make it apply to the header or the footer, or anywhere else for that matter.
(And why should applying it to the footer make it work for the header?)

Beginners are welcome. I noticed in reading the description of the plugin, that one of the options is to print the script to the footer. Try editing it in the WordPress dashboard and look for an option to use the footer for that script.

The load order can make a difference. By moving it to the footer, other things are loaded and hopefully that’ll help out. I made a copy of the HTML of your site’s front page, moved the script to the bottom and it worked then.

Wow. Well I found it and it works. I’m very grateful to you. (Tho I still don’t see how applying it to the footer can impact the header, but I’ll trust you on that.)

Can I please ask another question?
Do you please have some code to…
(1) Adjust the height of the masthead image from 100% downwards?
(2) To move the higher and lower within the masthead image?
(3) To adjust the size of the title font?

I’m glad to hear that worked!

Could I get you to open up separate topics for the other questions? Part of the advantage of having support in a forum is that it enables others to find the answers. When there are multiple questions in one topic, it doesn’t work as well.

Thanks!

Will do.