Greetings:
Two parts to this question.
1) I would like to create custom fields so the user can set a background which can be with an “image file” or a “color”. So some how I envision the chose either set background as an image or set background as a color (radio button?) and based on their selection either a “color picker” or “file uplaod” button is revealed. Is this possible with ACF?
2) Then comes the matter of accessing the variable and applying it to a style sheet. Now I know that a file like style.css will not parse php variables, however I have seen dynamic php style sheets like style.php which will accept and parse a variable in some themes. The problem is, I have no idea how to structure such a document and ensure that it loads/connects to the site.
Any help is greatly appreciated.
1) Absolutely. Set up the radio button field with two values: image and color (you can label them whatever you like). Set up the color picker field, set up the image field. Set the color and image fields to only display when the related radio button is selected via “Conditional Logic” at the bottom of their respective fieldsets.
2) I’d probably do this with inline css to save the headache. Set any sort of global stuff in your stylesheet and then in the template something along the lines of this should get you going:
<?php
$backgroundType = get_field('the-type-radio-button-field-name');
if ($backgroundType == "image"){
$style = "background-image: " . the_field('your-image-field-name');
} else { //it's a color
$style = "background-color: " . the_field('your-color-picker-field');
}
?>
<div style="<?php echo $style; ?>">
Content Here.
</div>
1)
Can you give some instruction on how to use the “Conditional Logic” at the bottom of their respective fieldsets. I’ve tried playing with then but they never seem to do any thing wand I do not see anything explicit instruction about how they work
2)
The script for inline works great in most cases and thanks for that. However, how do I get that into something like the <BODY> element. Also, I guess I’d still like to know how to hook up a dynamic style.php file for dynamic CSS. That opens the door to a world of possibilities for custom development.
Hi John,
1) Create a radio field. Give it a few values. For this example, set the field name to ‘my_radio’
2) Save the fieldset (shouldn’t be needed but just in case)
3) Create an image field
4) At the bottom, set Conditional Logic to “Yes”
5) In the dropdowns, select “my_radio” then “is equal to” and the last box should show a list of the options you entered into the radio field.
Getting the field info up to the body element is going to be tricky because of how/where you position the loop. Instead of using inline styles you could create a javascript block that adds that $style line to the body element. Something like jQuery('body').css('background-color', <?php echo $color; ?>); where the css line would change depending on the conditional check in my first reply.
No idea how to do the dynamic style sheet thing. 🙂
