How to add span to certain elements?

Thanks for using Tracks!

The code you’re looking for is on line 5 of the footer.php file. Right now, the footer uses the title of the blog using a WordPress function ( bloginfo() ), but you can replace that with the name of your site with the span tags included.

Make sure to use a child theme for a customization like this. We have a child theme tutorial you can follow on our site here: https://www.competethemes.com/help/child-theme-tracks/

Okay. Thanks for this.
I’ll try it and will let you know in about 15 minutes. ??

First, there is no footer.php file in the child theme.
So, I copied that from the parent theme and pasted into child’s directory.
After that I edited

<a>"><?php bloginfo('title'); ?></a>

to

"><?php All Of It - Think <span class="footer-title">LESS</span>, Think <span class="footer-title">BIG</span>; ?>

The thing is, the whole footer from the website is gone now! It’s not even visible.

Check out:

Okay that is causing a PHP syntax error which is breaking the footer.

This is what line 5 currently has:

<a href="<?php echo esc_url(home_url()); ?>"><?php bloginfo('title'); ?></a>

And this is how you can update it:

<a href="<?php echo esc_url(home_url()); ?>">All of it - Think <span class="footer-title">LESS</span>, Think <span class="footer-title">BIG</span></a>

Thanks for the reply.
The code is working fine now.
But I can’t make it the spanned text bold by using CSS.
I’ve tried:

.footer-title{
font-weight: bold;
}

and

.footer-title.bold{
font-weight: bold;
}

None of these are working. Help!!

Bold isn’t a valid value for the “font-weight” property. With CSS, font weights are declared on a scale of 100-900 with 100 point intervals, so 100, 200, 300, etc.

If you want to make the font bold, a value of 700 will work nicely:

.footer-title {
  font-weight: 700;
}

Okay. Gotcha!
Applied it in the Custom CSS but still ain’t working. ??

View post on imgur.com

is it possible that my font can’t go add more weight ?
FYI, I am using Open Sans from Google Fonts.

Yes that sounds like it must be the remaining issue. Are you using a child theme to add the Open Sans font? You just need to modify the URL to include the Bold font weight like this:

//fonts.googleapis.com/css?family=Open+Sans:400,700'>

According to the Customiser the font already supports the different font weights

View post on imgur.com

I am sorry if I am wasting your precious time.

It’s no trouble, don’t worry about it ??

I see what you mean – it looks like it should be loading the 700 font weight then. To find out exactly what is going wrong I’ll need to check out the site. Could you share a link?

I don’t know which site you are asking but here’s mine:
https://allofit.in
and here’s the link to Open Sans font
https://www.google.com/fonts/specimen/Open+Sans

That’s perfect thanks.

It looks like the font weight is not being loaded. In the page source code, you can see that the google fonts request from the easy google fonts plugin does not include the 700 weight: https://pics.competethemes.com/image/3Y1x3z0q1A2p

I just tested out the plugin and got it to work properly, so I’m not quite sure what is going wrong. I would make sure you are on the latest version of the easy google fonts plugin and double-check that the 700 font weight has been saved in the Customizer.

Otherwise, are you using any caching plugins? If so, try emptying the cache.

Yes, it is up to date. And I clear the cache every time I make changes to the website.

I don’t know PHP but I know HTML. So, if it was only HTML thing, then I could change the Related Font Stylesheet. But I don’t; so, can you tell me exactly which file do I need to edit to add it and how?

According to the source code, the CSS file is not loading the 700 weight but in the Customise option under Themes section; I can change the font weight of <h3> to 700.
I’m confused!!