5.2.0 B1 Dynamic Content Box Shadow

Beta
#1

Clean local install, WP 5.9

Step 1. In either Custom CSS either in Pro or child theme add the following :root { --my-css-color: #f00;}

Step 2. Follow Feature Requests: Dynamic Content Provider like a shortcode

add_filter('cs_dynamic_content_custom', function ($result, $field, $args = array()) {

$result = 'var(--' . $field . ')';

return $result;

}, 10, 3);

Step 3. Add {{dc:custom:my-css-color}} as a Global color.

Step 4. Create a Header or Footer and set Bar or Container box shadow to dynamic content Global color, this works.

Step 5. Change the box shadow color by inputing {{dc:custom:my-css-color}} inline to the box shadow color. This does not work, the variable is set but inline style --tco-dcb-0 is not defined and set. CSS is generated, box-shadow: 0px 3px 25px 0px var(--tco-dcb-0); but without inline style --tco-dcb-0 the color is not rendered.

#2

Hi @strobley,

Global Colors aren’t setup to receive anything other than actual color values. You could put {{dc:custom:my-css-color}} directly into the Box Shadow input though. At that point it might be more straightforward to just write in the var like var(--my-css-color) since it’s more clear what the CSS will be. I can see the abstraction you’re looking for there but unfortunately it’s not something Global Colors can do.

#3

Hi @alexander

Yes, I recall Global Colors are not design for Dynamic Content, as you kindly let me know on a past thread this only works because it just static data not pulling from any posts. To clarify, Global Colors approach described above works correctly for Bar, Container box shadows… understanding it was not designed for this.

It does not work is when using {{dc:custom:my-css-color}} or var(–my-css-color) directly inline to element Bar, Container box shadow color. This approach works pretty much everywhere else, just not these box shadows because the corresponding element inline style="--tco-dcb-0: var(--my-css-color);" is not being set. I hope this makes sense.

#4

Ok got it! I see what you mean now. Was able to find the issue and get those inline styles to add properly. Fixed for the next patch.

#5

If you want to use the pro themes from color option, i use the following script to add them dynamicaly. Would be great if this was done by the theme itself!!

add_action('admin_head', 'cs_colors_to_css_variables');
add_action('wp_head', 'cs_colors_to_css_variables');
function cs_colors_to_css_variables ()
{

	$colors = json_decode(stripcslashes(get_option ('cornerstone_color_items')));
	
	if (! empty($colors))
	{
		?>
<!-- 		Cornerstone Colors from Options -->
		<style>
			:root
			{
			
			<?php
			foreach ($colors as $color)
			{
				$title_css = sanitize_title($color->title);

				echo '--cs-color_' . $title_css . ': ' . $color->value . ";\n"; 
				
				if (strpos($color->value, 'rgb(') !== false)
				{
				    preg_match('/rgb?\(\s?([0-9]{1,3}),\s?([0-9]{1,3}),\s?([0-9]{1,3})/i', $color->value, $matches);
				
				    $Red   = (int) $matches[1];
				    $Green = (int) $matches[2]; 
				    $Blue  = (int) $matches[3];
				    
					 echo '--cs-color-rgb_' . $title_css . ': ' . $Red . ', ' . $Green . ', ' . $Blue . ";\n"; 				

				}
			}
			?>
			
		   }
		</style>
		<?php
	}
}

edit: changed rename to hook ‘sanitize_title’

U can use the colors in front- and backend. And it splits rgb values in an extra tag so it can be used for rgba styling or so.

Hope that helps

@Regnalf

#6

Nice job! That’s a really cool technique!

It’s not something we would add arbitrarily because it doesn’t tie in to anything in the UI. While it’s nice to have those colors available to use in custom CSS, you can consider Custom CSS to be a customization itself. Our new Theme Options system will involve making use of CSS custom properties, so it’s likely that there will be ways to leverage them similar to what you’re doing here. Still too early to comment further on how that will work.

#7

Awesome :+1: thanks @Regnalf, really appreciate you sharing. May I ask if the code an Cornerstone updated and revised version of Michael Bourne’s?

It works perfectly for adding color CSS Custom Properties to the HTML <head> as you said. However, when I apply color from Global colors to an element, for example, Headline > Background. The color set is not the CSS Custom Property, it remains the Global Colors RGB color. Any idea how this could be done, either yourself or @alexander :smiley:

#8

Hi @strobley,

The customization above simply takes the current color library and outputs it as CSS custom properties. These can be used in Custom CSS (or Element CSS) to quickly grab from your global colors. It isn’t changing how the color pickers work though. They still resolve the actual rbg values.

@Regnalf Something that crossed my mind that is worth noting on more of a power tool level is that under the Dev Toolkit we’ve added “Colors” under a “Data Store” section. This is very low level access, so use caution, but it does give you a bit more control over things. For example, you could rename and of the color IDs to be any alphanumeric string (hyphens allowed) you want. This might be cleaner than having to reformat the title with preg_replace.

1 Like
#9

Thanks @alexander for that “Data Store” hint, this will come in the next cycle, right? But i think the best way to this customization is to use css ready color names already in the color name field. So do i. The preg_match stuff is to be shure if you overseen some character.
Maybe the “sanitize_title” hook could be better use for the rename.

And can’t await the new option release :grin:

#10

Oh nice! Good idea on using CSS ready names. That probably helps mentally keep track as well since the tooltips match. Yes, sanitize_title is really handy for stuff like that.

Yes, the Data Store tools are part of this update. Over time we’ve made a bunch of little scripts and tools. While some of them (like the data store) are very powerful and can easily break things, we find it’s more streamlined to just put them in the Dev Toolkit even if that presents a risk to users. Being being the “Dev Toolkit” I think it still makes sense, and lets power uses tap into some of that raw capability. The underlying reason for Fonts/Colors being available there is so we can manually repair them quickly if they’re mistakenly deleted.