Spacing paragrah text away from botton of grid element

Hi there.

you could add a Separator Block between the Grid Block and the Text.

Hi, How do I add a separator block? If you mean to add a blank container element I've tried that but it is just ignored. Also as mentioned I'm trying to contain the table and paragraphs following it within the same DIV so that the mediavine subscribe box is pushed down the page. Thanks

Damn i am having a bad day lol, the block is called a Spacer Block just add one of them before the first paragraph.

Thats great, worked a treat. Many thanks. I don't suppose there is a way to turn the rating figure in this table into yellow stars. I looked at inserting SVG icons but can't easily replicate 0.7 or stars that way!

Hi, Update: I found your code to add to functions.php and added the shortcode to add the stars in table using [star_bar stars="4.7" color="#ffd700"]. However, is there a way to add this next to rather than underneath the numerical figure and have it aligned to the center? failing that how do I center the shortcode underneath the figure? Also, the gold-yellow color seems to be very dim on the grey background, any idea why this is happening? Thanks

Which star bar code did you use ?
This was my latest one :

https://gist.github.com/diggeddy/ef3dc0315a73c0caad839c5348b89aa6#file-star-bar-shortcode

Hi, Yes that was the one, I figured out how to centralize it. I just need to work out how to make the color not so dim. Thanks

Hmmm... any changes made to that code ? As i see the stars, but there are no styles for it ?

Hi, No I added the code to functions.php exactly as it is without any modification from the URL you gave:-

https://gist.github.com/diggeddy/ef3dc0315a73c0caad839c5348b89aa6#file-star-bar-shortcode

And added the following shortcode to add the stars [star_bar stars="4.7" color="#ffd700"] Could the problem be caused by the grey background color set in the container?

I am not seeing any styles - just 5 black stars and thats because the <style> that the shortcode is meant to output is not there. Are you seeing something different ?

Hi, I'm getting a slightly off-yellow color for the stars in chrome and black in Safari. Any suggestions why this might be?

See. screenshot:
https://imgur.com/a/o5i0sZ5

Odd, its not outputting the styles at all.
Remove the shortcode function and add this instead:

function make_star_bar( $atts ) {
    $value = shortcode_atts( array(
      'stars' =>5,
      'color' => '#f00'
    ),$atts);
    $percentage = 100 * $value['stars'] / 5;
    $html = '<span class="star-bar" style="--star-color: '.$value['color'].'; --star-rating: '.$percentage.'%;">★★★★★</span>';
    return $html;
}
add_shortcode('star_bar', 'make_star_bar');

See here in the code: 'color' => '#f00' change the #f00 for the color you want the starts to be.
It will save you adding a color to the shortcode on the page, unless you want there to be different colors.

Then add this CSS to your site:

.star-bar {
    background: linear-gradient(90deg, var(--star-color) var(--star-rating), rgba(0,0,0,0) var(--star-rating));
    color: rgba(0,0,0,0);
    background-clip: text;
    -webkit-background-clip: text;
}

And now try the shortcode e.g. [star_bar stars="4.6"]

Hi Thanks. This is now working on both Chrome and Safari BUT the color issue still persists. If I add the gold star color as #FFD700 in the php code, it comes out as #C7ACA3 (A dull yellow color) on the published page. (See screenshot) Is this because it's being somehow added to the background light grey color?
https://imgur.com/a/7Kqj8Sx

Its to do with the color property and the background-clip: text; it effectively mix-blends the color and the gradient.
I modified the CSS above so it has no background color, it means you get the actual color but no greyed out ones behind it.