Forum Discussion
How to prevent all upper-case in Tabs block headings
Hi,
It seems that in the Tabs block, the "heading" text in the clickable tabs at the top are being automatically transformed into ALL UPPER CASE.
Is there a way to prevent this?
Thanks in advance.
10 Replies
DeveloperIgniti It appears that Rise automatically forces all tab headings into uppercase. There’s no setting to disable this. However, you can control the visual case by wrapping your heading text in a <div> and applying inline text-transform styling:
<div style="text-transform: none;">Getting Started</div>By setting the inline style to text-transform: none, the default styling will be overridden, and the text in the "Heading" field will appear exactly as it is typed in the Edit Tabs heading field.
Thanks, Nedim! I've added some common ones people may want below.
I generated them with Copilot based on your original one:
Font size:
<div style="font-size: 16px;">YOUR TEXT GOES HERE</div>Italics:
<div style="font-style: italic;">Your Text Goes Here</div>Underline:
<div style="text-decoration: underline;">Your Text Goes Here</div>Strikethrough:
<div style="text-decoration: line-through;">Your Text Goes Here</div>That's exactly how it works. I would recommend using rem instead of px for font sizes. In most cases, the default text size is based on 1rem = 16px, and the default heading size in this context appears to be 1.2rem (approximately 19.2px).
Using rem units is generally preferable because they scale relative to the root font size, making your content more accessible and responsive. If the user changes their browser's default text size, elements sized with rem will adjust accordingly, whereas fixed px values will not.
You can also combine multiple styles into a single style attribute. For example, to capitalize the first letter of each word, increase the font size, make the text bold, italicize it, and underline it:
<div style="text-transform: capitalize; font-size: 1.2rem; font-weight: bold; font-style: italic; text-decoration: underline;"> Your Text Goes Here </div>
Just add or remove the individual CSS properties depending on the formatting you need.
That's interesting, I thought they had protected these text inputs from adding inline styles, but looks like you can do it for accordion titles also (but it shows the inline html/css in the admin view, but in preview mode it applies the css)
Thank you for the confirmation. It is disappointing that such an opinionated design choice is forced upon us.
I added some to Nedim's comment above:
How to prevent all upper-case in Tabs block headings | E-Learning Heroes
Unfortunately, there is not.
I have gotten the feedback in my Rise courses before that I should change the color/font/size of the font on the tabs, and there is simply no way to do it.
There are similar issues with headers in other Rise blocks such as Process: I hope that they'll add some customizability to these in the future.
