I have a dynamic page and would like to set a different background color for each page-
Hello kojo.nyaro,
i see no option to set the page-color by code…
https://www.wix.com/corvid/reference/$w.Page.html
But what you could do by code is, to insert a stripe or a box/container.
Then it could be possible to change color in a specific area.
In this case, it is the BOX, where you can change the color and use it as background…
https://www.wix.com/corvid/reference/$w.Box.html#style
Thanks. I see this code
let bgColor = $w(“#myElement”).style.backgroundColor;
But how do I get the code to use the color code in the database for the box? (Am new to coding) I don’t see code to insert dataset.
You can not insert DATASET by code, or it would be new to me, that this is possible. You have to put in the dataset manualy (yes i know a big disatvantage of Wix).
Put in manually a dataset and connect it to the data-collection (database) you want.
And here the BOX.style-code…
https://www.wix.com/corvid/reference/$w.Box.html#style
Thanks… But this works when you are defining the color in a static page-My page is dynamic, I want to store the color RGB code in the database and have the bgcolor change depending on the dynamic page I am on. I want the history box bg color to change everytime the page changes
Use Document if you want to do the whole page.
https://www.wix.com/corvid/reference/$w.Document.html
A complete web page, which consists of a Header, Page, and Footer.
$w('Document').background.src = //rest of code
No problem, all you have to do is to get the data out of the current row-data.
This is able in 2-ways —> dataset or data-collection - code.
How i imagine the scenario.
You have dynamic page. On that page for example you have a button.
By pressing that button you will be redirected for example to next dynamic page.
But what is a dynamic page?
It is just the reflection of your database wich is connected trough (with) a dataset.
Sooooooo, after clicking or by clicking on that button you can ask the —> dataset for example for “currentItem”. When you got your “currentItem”, you should be able to get the right row and column of the database.
Now you are able to find the right data.
I think the rest you will do by yourself.
In the last reference (column) of your database, you have for example your COLOR-HEX-CODES.
So just ask for the last ROW of the CURRENT-ITEM-DATA.
That should be possible.
Background-COLOR or background-IMAGE?
What now? 
—> i’m confused
The topic was…
" Dynamic Page background Color Change"
Thanks Russian Dima, unfortunately I am not a coder, but I can make changes to the code if its available… An example will be nice…Thanks…
I would say, all you have to know, is how to get information out of the Database by code and how to find the current item in it.
For example, look here…
https://russian-dima.wixsite.com/wixworld/blank-6
…this example was maden just a few minutes ago for someone other in this post…
https://www.wix.com/corvid/forum/community-discussion/how-can-i-live-count-row-from-database
(you can also find the Link at page)
It could be useful for your learning-process.
Very similar to your purpose/ inquiry.
This is the code I managed to put together, I am not getting any errors in the console but box color does not change.
$w.onReady( function () {
$w( "#dynamicDataset" ).onReady( () =>
let currentItem = $w( "#dynamicDataset" ).getCurrentItem();
$w( "#box2" ).style.bgColor = {
“bgColor” :currentItem.bgColor,
“description” : currentItem.location,
};
});
});
This is the code I have so far, I am not getting any errors in the console but the box color remains the same…
$w.onReady( function () {
$w( "#dynamicDataset" ).onReady( () => {
let currentItem = $w( “#dynamicDataset” ).getCurrentItem();
$w( “#box2” ).style.bgColor = {
“bgColor” :currentItem.bgColor,
“description” : currentItem.location,
};
});
});
This is the code I have so far, I am not getting any errors in the console but the box color remains the same…
$w.onReady( function () {
$w( " #dynamicDataset " ).onReady( () => {
let currentItem = $w( " #dynamicDataset " ).getCurrentItem(); $w( " #box2 " ).style.bgColor = { “bgColor” :currentItem.bgColor,
“description” : currentItem.location,
};
});
});
Ok kojo, i think i have a solution for you…(some different, but works for me).
import wixData from 'wix-data';
var Item
var ItemIndex
$w.onReady(() => {
$w('#dynamicDataset').onReady(() => {
Item = $w('#dynamicDataset').getCurrentItem();
ItemIndex = $w('#dynamicDataset').getCurrentItemIndex();
let targetId = $w("#dynamicDataset").getCurrentItem()._id;
console.log(Item)
console.log(ItemIndex)
console.log("Item-ID: " + targetId)
get_currentItemData(targetId)
});
});
function get_currentItemData (parameter) {
wixData.get("Database1", parameter)
.then( (results) => {
let item = results; //see item below
console.log(item)
console.log(item.floor)
console.log(item.additional)
console.log(item.bedroom)
console.log(item.squarespace)
let myBGcolor = results.color
console.log(results.color)
$w('#box1').style.backgroundColor=myBGcolor
} )
}
export function button1_click(event) {get_currentItemData()}
Here you will find an example…
https://russian-dima.wixsite.com/meinewebsite-5/database1/Одноэтажный-дом
Look also into the console.logs (Press F12 on your keayboard in google-chrome-browser —> CONSOLE)
The name of DATABASE in this example is —> “Database1”
The name of the dynamic-dataset is —> “#dynamicDataset”
In the last row of this DATABASE you have the RGBA-Colors for each item-ID.
I hope you understand the rest.
You can DELETE all the CONSOLE-LOGS if you do not need them anymore,
then you have a small and better readable code like this…
import wixData from 'wix-data';
var Item
var ItemIndex
$w.onReady(() => {
$w('#dynamicDataset').onReady(() => {
Item = $w('#dynamicDataset').getCurrentItem();
ItemIndex = $w('#dynamicDataset').getCurrentItemIndex();
let targetId = $w("#dynamicDataset").getCurrentItem()._id;
get_currentItemData(targetId)
});
});
function get_currentItemData (parameter) {
wixData.get("Database1", parameter)
.then( (results) => {
let item = results; //see item below
let myBGcolor = results.color
$w('#box1').style.backgroundColor=myBGcolor
} )
}
export function button1_click(event) {get_currentItemData()}
Hey Kojo,
Dis you ever figure this out. I’m trying to do the same thing.
@mslkloos
The only way to set the background-color of your page is…
https://www.wix.com/velo/reference/$w/document/background
let myBackgroundImage =
"wix:image://v1/68d3a9_1de7529c444b4c9eb38401f8efe0cad2.jpg/flowers.jpg#originWidth=1970&originHeight=1120";
$w("Document").background.src = myBackgroundImage;
It’s not directly the property of background-color of your page, it’s a back-ground-image-source, where you can place an image for background.
Take a completely black image (big enough) and add it to → “src” (as SOURCE).