- This topic has 23 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hi, Ref. the following page. https://makemesustainable.com/tru-earth-vs-earth-breeze/ I’ve had to place some paragraphs of text inside the same container as a grid/table layout to prevent the auto-placement of the Mediavine email subscription box (as the automatic background fade feature obscures the buttons in the bottom of the table). However, the first paragraph of the text is too close to the bottom of the table – where the buttons are housed. I’ve tried adjusting margins etc. but cannot space this first paragraph text away from the bottom of the table. Can you please tell me how I can add some vertical space between the bottom of the table and the first paragraph? Thanks
Customer Support
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 Blockjust 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/o5i0sZ5Odd, 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#f00for 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/7Kqj8SxIts to do with the
colorproperty and thebackground-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.
- You must be logged in to reply to this topic.
