How to change formatting for ONLY certain words

Ask the community
,
1

I followed this page’s instructions to create various expanding (Show More) text boxes: https://support.wix.com/en/article/corvid-tutorial-creating-a-show-more-link

It worked perfectly! But…I need change the formatting for certain words or sentences in the text (mostly in the initial snippet that shows before clicking the Show More button) for emphasis, and when I do this in the text box using the Wix Editor, the formatting ends up applying to all of the text within the text box. My understanding is that I’ll need to use HTML to do this but I am not a software developer and have never used HTML. Does anyone have any instructions/references I can use?

2

See below. Maybe it can help. Just update the textProperties1 object and replace “text1” by your own text-box;

let textProperties1 = {
numberOfStrings: 2,
fontColor: ["#FF4040", "#0000a0"],
fontFamily: ["reklamescriptw00-medium,cursive", "raleway-semibold,raleway,sans-serif"],
fontSize: ["30", "14"],
fontWeight: ["normal","bold"],
text: ["Text1", "Text2"]
}
$w("#text1").html = concatText(textProperties1);
function concatText(textObj) {
const quoteMark = "\"";
let concatHtml = "<p ";
for(let i = 0; i < textObj.numberOfStrings; i++) {
concatHtml += ` style=${quoteMark}font-size:${textObj.fontSize[i]}px; color:${textObj.fontColor[i]}; font-family:${textObj.fontFamily[i]}; font-weight:${textObj.fontWeight[i]};${quoteMark}> ${textObj.text[i]}</span><span`
}
let finalHtml =concatHtml.slice(0, concatHtml.length - 4) + "/p>";
return finalHtml;
}
3

Thanks! Unfortunately not working - I’m getting an error message that there’s a bug in the code yet there’s no ‘red dot’ in the code so I can’t figure out what’s wrong. My text box happens to be text1 so I didn’t even need to change that, and I went ahead and left the textproperties as is since I was just testing if the code works at all… Did I miss an important step? I literally have no clue how to use html so pretend I’m a 3rd grader lol

4

You have to put it inside onReady() function (at least this line:

$w.onReady( function() {
$w("#text1").html = concatText(textProperties1);
})

Wix Editor Elements ($w) - Velo API Reference - Wix.com

5

Ah yes! Ok, that removes the error. Now, when I preview the site, all of the text in that text box takes on the formatting that’s specified in the textproperties, which means it ‘works’ BUT that’s not what I want to do…

Let’s say I have 3 sentences in this collapsing box that I made with the code mentioned in my OP. I want the first sentence to be bold, but for the 2nd and 3rd sentences to NOT be bold (otherwise same font/font size/etc) (or maybe just one word in the 3rd sentence to be bold as well, as an example). Right now, without this additional code you’ve suggested, because that first sentence is bold then the 2rd and 3rd automatically become bold when I go to preview mode (even though it doesn’t look bold in the Editor). Do I need to be putting the actual text from the text box into this code in the “text: [“Text1”, “Text2”]” section, like sentence by sentence? I was really hoping to keep the text in the text box so that it’s easily readable/editable in the future but maybe that’s not possible? I honestly wouldn’t know.

6

Actually, really interesting…when I first go to preview mode, “text1” and “text2” show up where my text should be in the formatting set in textproperties. Then, when I click the Show More button, it suddenly shows MY text (just the snippet) in the text1 formatting and then when I click it AGAIN it shows my whole textbox text in the text1 formatting…

7

Yes, you have to replace, the texts in the object as well as the font-family, size, font-weigh (bold, normal) etc…either manually or by code (for example you can fill this object with text from your database)
You can also add more texts to this object (see below).
Alternatively, you can delete the code and use different text-boxes side by side (but that might look bad, if the text are not fixed).

let textProperties1 = {
numberOfStrings: 3,
fontColor: ["#FF4040", "#0000a0", "#0000a0"],
fontFamily: ["reklamescriptw00-medium,cursive", "raleway-semibold,raleway,sans-serif", "raleway-semibold,raleway,sans-serif"],
fontSize: ["30", "14", "15"],
fontWeight: ["normal","bold", "normal"],
text: ["Text1", "Text2", "Text3"]
}