I would like to choose the background color for the body tag from the panel. This way I can give every project a different background. I managed to implement the plugin ‘Color Picker’ by Ian Cox and it works in the panel, but I am completely lost as to how I can initialize it and use it as css.
I have been browsing the web extensively but have not found any answers. At this point I am looking to solutions such as storing the value of the field in a php variable, putting this i a javascript variable and using this in jquery as a class to the body tag… All very complex but it does not work either…
Does anyone have an idea how I can achieve this?
Or point me to successful implementations of the color picker plugin?
Hi @texnixe, so I just saw this code only works on pages. It does not work on the homepage - probably because of the $page object. I have tried $site but this did not work. Any ideas on what might do that job?
You can, of course, also use inline styles, but it will make your HTML more difficult to read and maintain, especially, if it’s more than one style setting.
To handle empty variables, you would have to write sth. like this:
Well, I guess you use $project here before you define it. So you need to define the project first and then get the color, e.g.
<?php
//the $project variable needs to be defined first; if you use `first()` here you don't need the foreach loop
$project = page('projects')->children()->visible()->shuffle()->first();
//the rest of you code without the foreach loop ...
if($background = $project->bgcolor()) : ?>
...
If you use it in the header snippet, you need to pass the variable to the snippet first, but I can’t tell from your code.
Yes, that seems logical but somehow that does not work. It does not give me an error but it does not execute the code… I can not seem to figure out why…
Correction it does work, defining the variable works (if on homepage) but then it gets confused when going to a projects page. Obviously, since, there it should use the $page object. I do not know how to write that. I think it should use some conditional code checking if the page is a homepage or project’s page.
Any use it appreciated, and thanks in advance already!
the code I posted is for the homepage, indeed I am displaying a project on the homepage. I do that by storing a project in the $project object in this manner:
<?php foreach(page('projects')->children()->visible()->shuffle()->limit(1) as $project): ?>
– The colors are defined in the projects pages. Every child of the projects folder has indeed its own color. But the projects are shown BOTH on the homepage and projects pages. The site starts out with a project on the homepage (home.php) and then you can click through to another project which uses the project.php template. Homepage uses the $project object and project pages use the $page object… So I would like it to work on all the pages.
For now I have this code which seems to work at first, but then it seems to get confused and uses a color from a previous project on the page… Do not know why. Is this code too complex?
I tested this in a fresh starterkit and for me it seems to work as it should? The color on the homepage changes, because the projects are shuffled, and each project itself gets its own color.