I created a dynamic page for my portfolio and would like to have the option to change the title color based on the design template in the project.
Is it possible to link the text element of the title on the page to the dataset
And in the dataset will I add a text box where I enter the value (HEX) of the color?
I know this is possible with the help of code but I couldn’t find a post linking to my problem.
$w.onReady(() => {
$w("#dataset1").onReady( () => {
let item= $w("#dataset1").getCurrentItem();
let itemColor = item.color;
$w("#text1").html = "<html>" // put here the html string including the item color
})
})
I’m having a little trouble with it …
Could you please direct me a little more?
I added a column of text in the dataset (containing the color code) ID: “titleColor”.
I want to associate the code with the dynamic page title ID: “PortfolioTitle”
Is there a way to do that?
I want every title page to be different and fit the same design that appears in the project.
@urielhajajstudio use the code I posted above. Replace the “” with the html string you’d like to apply.
For example:
$w.onReady(() => {
$w("#dataset1").onReady( () => {
let item= $w("#dataset1").getCurrentItem();
let pageTitle = item.name;//let's assume you want the title to contain businees name like "Liat Mizrachy"
let itemColor = item.color;
$w("#text1").html = `<h2 style="line-height:1em"><span style="font-weight:bold"><span style="color:${itemColor}"><span style="font-family:helvetica-w01-light,helvetica-w02-light,sans-serif">${pageTitle}</span></span></span></h2>`;
})
})
I want to link the Title Code (titleColor) column to the page code that will set the color to the title of the page.
The title is also updated through the dataset as all the elements on the dynamic page.
I don’t know how you didn’t think about making it a permanent option.
For example, in Webflow CMS…
You can set up where to take both text and style options.
So here you need to use code in order to change the color.
Disconnect the title from the dataset and do something like:
$w.onReady(() => {
$w("#dataset1").onReady( () => {//inseatd of "dataset1" use your dataset property id
let item= $w("#dataset1").getCurrentItem();
let pageTitle = item.title;
let titleColor= item.titleColor;
$w("#text1").html = `<h1 style="line-height:1em"><span style="font-weight:bold"><span style="color:${titleColor}"><span style="font-family:helvetica-w01-light,helvetica-w02-light,sans-serif">${pageTitle}</span></span></span></h1>`;
})
})
//change the font size and font family according to your sepc
Note*
Always convert column properties to Text before adding content in new rows to the database. Then convert back to Rich Text .
If you add new row to database without converting the column property to “Text”, you will see HTML format on page when you preview the website. To correct this, convert back to Text then save and then delete the text from the row and copy again. Then convert back to Rich Text and it will work.
