[Support request] How do I create a shadow around quote?

[Ying]

Now please help add shadow like effect around quotes.

Can you specify what do you mean by quotes? Can you link us to a post and point us to the quotes?

[Shami]

https://www.wplogout.com/create-custom-footer-in-generatepress/

Check the post above.

Scroll a few paragraphs, and see the “Recommended Reading.”

I want to create that type of box.

[Elvin]

This box is basically a paragraph block with alsoread in its additional CSS class(es).

And here’s the CSS involved with it:

.alsoread {
    font-weight: 900;
    border: 1px solid #dcdee3;
    border-radius: 5px;
    box-shadow: 0 4px 15px rgb(0 0 0 / 10%);
    color: #16a085;
    padding: 15px;
    background: linear-gradient(to right,#eee,#eee);
    border-left: 3px solid #b11f24;
    font-size: 20px;
}

[Shami]

Also I would like to add “Read More” on archive page like this..

Check that same website:

https://www.wplogout.com/blogging/

[Elvin]

That site is using this styling:

/* Read More Style */
a.read-more.button {
	font-size: 16px;
    background-color: rgba(255, 255, 255, 0);
    color: #115cfa;
    text-decoration: none;
    background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
    padding: 10px;
	font-weight: bolder;
}

a.read-more.button:hover{
	color:#115cfa;
	background-size: 100% 6px;
	background-color: #115cfa00
}

[Shami]

The css you gave didn’t work.

I’m using custom excerpt in all posts. So “Read More” isn’t showing. Is there any way to still show that despite having custom excerpt?

[Elvin]

You can try adding this PHP snippet for that:

add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
function tu_excerpt_metabox_more( $excerpt ) {
	$output = $excerpt;
	
	if ( has_excerpt() ) {
		$output = sprintf( '%1$s <p class="read-more-container"><a class="read-more button" href="%2$s">Read more</a></p>',
			$excerpt,
			get_permalink()
		);
	}
	
	return $output;
}

[Shami]

I want to add an arrow after Read more link…

Like this:

Read More ->

[Elvin]

add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
function tu_excerpt_metabox_more( $excerpt ) {
	$output = $excerpt;
	
	if ( has_excerpt() ) {
		$output = sprintf( '%1$s <p class="read-more-container"><a class="read-more button" href="%2$s">Read More -></a></p>',
			$excerpt,
			get_permalink()
		);
	}
	
	return $output;
}

Try this.

Can you open a new topic if there are follow-up questions? So the topic doesn’t get too convoluted as the follow-up questions are not related to the topic’s initial question. Thanks! 🙂

[Author]

Posts