Bold One Word of Site Title - Foundation Theme

Classic Themes
1

Hello,

Is there a way to bold one word of a site title? I’m building a website for a firm and in their letterhead, one name is bolded.

I’m using the Foundation theme.

Thanks,
Traci

2

Have you tried putting the word inside <b></b> tags? I don’t know if that’ll actually work but worth a shot.

3

Yes, that does work.

4

I haven’t been able to get the < b>< /b> tags to work. Is there another suggestion?
Thanks!

5

It may depend on what font and font weight you are using. Technically you should use a span in the h1 and then style it with the font-weight css property. Try using HeaderPro Segments or alternatively use the markdown stack that comes with Stacks. Once you drop in the markdown stack it has some demo stuff in there if you don’t know markdown.

6

You could use Header Pro and enable both extra segments. Put pre bold text in Header area, bold text in segment 1 and select a bold Google font, and then post bold text in segment 2.

7

I was under the assumption that Traci meant the site title in the RW settings. Just to be sure (since it worked for Rob), it would look like this in your settings <b>Boldedword</b>RegularWord

8

You should be using a <strong> tag followed by a closing </strong> tag.
Sample:

this is strong

You could do the span and CSS styling.

As for the <b> tag
Note: According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.

2 Likes
9

I think we need some clarification here.

Are you talking about the Site Title setting in TopBar? If, as I suspect that is the case then you cannot add HTML to the setting and hence why you are having no success. In this case it is probably just better to make your “Site Title” into an SVG and load it into the logo for TopBar.

@teefers Just to play devils advocate :slight_smile: I would argue that in this instance, the <b> tag is appropriate as it is merely a style (or intended presentation as per the HTML5 spec)- trying to emulate the look of a clients logo. It therefore has no semantic meaning and so <strong> is not required.

2 Likes
10

OK I’ve made a png and jpg of the logo with the site title. But when I “hide” the site title in the Topbar settings, then the logo image stretches all the way across the screen. How do I contain that logo image to a certain size? Here’s the code I tried:
.top-bar .title-area .gblogo4b.jpg img{
width: 140p!important;
}

That didn’t work. ?

THANKS!

Traci

11

If you add the image to the custom logo setting in TopBar you should not need any CSS if you make the image the correct size.

If you do need to override the width for any reason, your code should not have the image name in the CSS selector e.g. just:

.top-bar .title-area img{
width: 140px!important;
}

You also have the x missing from px

12

Thank you! Question: I can’t find the custom logo setting in Topbar. Where is it?

THANKS!

Traci

13

Set the title area to Custom Data and then you will see it.

top-bar

1 Like