[Resolved] Text Not Bold Or Using The Inline Code Features

[jm1991]

Hey there,

So I noticed that text I want to bold and select for the Inline Code rich text feature, doesn’t render properly in the browser.

For example, this is what I see in the editing interface: https://imgur.com/Qhim2zD

You can see that [[:punct:]] is bolded and has the Inline Code rich text feature enabled; however, that’s not reflected in the browser, as seen here https://imgur.com/A9WYqul

I’m sure this was working before, so I’m not sure if there could be some rogue CSS causing issues?

Your help would be much appreciated, as always.

[Leo]

Hi there,

That’s normal as it’s inside the <code> block.

Are you wanting all the content in side the <code> to be bold?

If so try this CSS:

code {
    font-weight: 700;
}

[jm1991]

Hey leo,

Thanks for the response. I want some text built with the paragraph module wrapped with the Inline Code rich text feature to be bolded; however, I also want that text to have the subtle grey background similar to when I build a section using the code module from the off as seen here https://imgur.com/hhBJty5 That screenshot shows what text looks like when I build with the code module to begin with. I’m not so fussed about those sections being bolded.

When I wrap the Inline Code rich text feature around words built in a paragraph module, that subtle grey background doesn’t render in the browser, even though I can see it in the editing interface, like this https://imgur.com/Qhim2zD I’d like those words to be bolded and have that subtle grey background.

[Leo]

Can you do me a favor and test if this the current behavior is the same in a twenty series WP theme?

[jm1991]

Do I need to create a new WP account? Would I not provide the GP theme?

[Leo]

No – simply activate the twenty series theme to test if you can.

[jm1991]

So, I switched theme and the sections that I bolded in the editor were bolded without having to add CSS on the live site, unlike the current site; however, the default background colour for the Inline Code rich text feature is white, so that was represented on the live site.

Bolded words: https://imgur.com/sZKKdL2
Default white background: https://imgur.com/CQPukjk

[Tom]

Hi there,

I’m not sure <code> accepts HTML like that, I’m surprised that it worked with another theme.

What if you use <pre> instead?

[jm1991]

hmmm I couldn’t find a feature that would add <pre>

Is there CSS that could add that subtle grey background (#f2f2f2) to content wrapped in <code>, similar to this https://imgur.com/Qhim2zD

Thanks

[David]

Hi there,

to style a <code> element inside a paragraph you could try this CSS:

p code {
    padding: 2px 4px;
    background-color: #f2f2f2;
}

[jm1991]

It works! Top work guys!

Love your customer service and is one of the main reasons why I keep recommending the theme to others.

[Author]

Posts