Live Preview CSS - what to expect?

Beaver Builder
1

Hi,

I’m not sure what’s the purpose of this field, but I guess the goal is to save us from the default “heavy refresh”, isn’t it?

For example, here are my settings (disregard comments):

   'active_price_size'     => array(
	'type'          => 'text',
	'label'         => __('Active Price', 'fl-builder'),
	'default'       => '26',
	'maxlength'     => '2',
	'size'          => '3',
	'placeholder'   => '10',
	'description'   => 'px',
	'help'          => 'Active price font size in pixels.',
	// 'preview'         => array(
	//     'type'             => 'css',
	//     'selector'         => 'del',
	//     'property'         => 'font-size',
	//     'unit'             => 'px'
	// )

and in my frontend.css I handle css settings the following way, which syncs perfectly:


.fl-node-<?php echo $id; ?> del {
    font-size: <?php echo $settings->active_price_size . 'px' . ' !important'; ?>
}

Now what should I set in the preview, in my case in order to see the result of “Live Preview CSS”?

Thanks =)

2

Hi Elemento,

It looks like you have it right. Have you tried uncommenting the preview code that you have commented out?

Justin

3

I surely did that.

  1. I suppose it should change the preview before I hit save?
  2. In order to debug it, which CSS (or inline style) does it add when changing the settings?
  3. the ‘selector’ field, I assume it conjugates it to the node’s selector path, does it?

For example, if the node id is XYZ, it will automatically translate it to ‘#XYZ del’ so I don’t have to worry about it. Or should I add different selector?

In my case this is the HTML I render:

<p class="price">
   <del>
     <span class="amount">somenumber</span>
   </del>
</p>
4

Hi Elemento,

1) I suppose it should change the preview before I hit save?

Yes, it should update the font size of the del tag. Maybe try .price del as your selector.

2) In order to debug it, which CSS (or inline style) does it add when changing the settings?

It adds the font-size: (VALUE)px; to that del tag.

3) the ‘selector’ field, I assume it conjugates it to the node’s selector path, does it?

Yes.

For example, if the node id is XYZ, it will automatically translate it to ‘#XYZ del’ so I don’t have to worry about it. Or should I add different selector?

Try the selector I mentioned. If that doesn’t work, it might be that you have !important in your frontend.css.php file.

Justin

5

It works perfectly now with the uncommented code.

Thanks & Cheers