Style Text according to path

Ask the community
1

Hello Experts!

I am a complete Noob… Trying to do something SIMILAR to what this topic is about.

And I could REALLY use a bit of help!

I have a Text Field, placed in my Header…

I am using the following code to (successfully) populate that Text Field with the ‘Path’ name (the name of each PAGE, as shown in the URL) ~

import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function () {

    //START - Page Name Code

    let path = wixLocationFrontend.path;

    var pageName = path;

    $w("#text258").text = "~ " + pageName + " ~";

    //END - Page Name Code   
});

What I am UNABLE to do is format the text…
I want the Text Element to be formatted as Title Case - as well as be Bold & Green.

I’ve tried to figure out a solution from Velo references - but haven’t managed to get it done - though, I feel is SHOULD be possible?!

Any ideas?
Thanks in advance…

2

Hello, yeah this should be a fun one…

So first off, if you are trying to make a customization based off a global asset (like the header), your code should go into the masterPage.js file.

Place the code you have there to start.

If $w(‘#text258’) is in the header as well, then you should be able to make it work.

Text does not have a style prop like the other elements so you would set its innerHTML.

You could do something like this:

import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function () {

    const path = wixLocationFrontend.path[0]

    // can define colors per page path
    if (path === 'solutions-v2') $w('#text258').html = `<p style="color: green"> ~ ${path} ~ </p>`

})

It would look something like this:

Screenshot 2024-08-20 at 11.15.12 AM
Screenshot 2024-08-20 at 11.15.12 AM2970×640 4.18 KB

2 Likes
3

Hi, bablifarm !

This is an addition to oakstreetassociates’s response.

style=“font-weight: bold; color: green;”

1 Like
4

Thanks a tonne! Both to you and to @onemoretime …

Yes, both my Text Element as well as my Code WAS located in the Header/ masterPage.js.

I needed a slightly different solution than the one you suggested -
i.e.

  • I needed the same Text Element to be populated by the ‘path’ name of each and every page
  • I also needed to ‘format’ the outputted text to a greater degree

So, I modified your suggested code as follows - and got exactly what I needed!

$w.onReady(function () {
//START - Page Name Code
    const path = wixLocationFrontend.path[0].replace(/-/g, ' ')

    $w('#text258').html = `<p style="font-weight: bold;
font-size: 18px; color: #9EB007; text-align : center;
text-transform: capitalize;"> ~ ${path} ~ </p>`

//END - Page Name Code   
});