Button style Line for Blog?

[hiegl]

Hi,

in order to have a coherent style, we would like to give the read more button of a blog element the nice line style, that is possible with a normal button. Any ideas, how to achieve this?

Cheers,
Bernhard

Topic

[DanielPerry]

You could probably do it with some CSS, something like this….

.grve-read-more {
background: #000000;
padding: 10px;
color: #ffffff !important;
}
.grve-arrow-line {
display: none;
}
.grve-arrow-point {
display: none;
}

I’m sure one of the Devs will give you a much better snippet than that though.

[hiegl]

Thanks for trying, but this is not close to what i need. It just hides the arrow, but does not create the line-style. Let’s wait, what the team will come up with, as consistency should be possible in my view.

[Marius1989]

Quick fix, until there might be an in-built option. Wouldn’t recommend as an long-term solution. PHP would be the route there.

jQuery(document).ready(function( $ ){
  	$('.grve-post-item .grve-read-more').addClass('grve-btn-text grve-text-black grve-btn-line grve-line-bottom');
  	$('.grve-post-item .grve-read-more').find('svg').remove();
  	$('.grve-post-item .grve-read-more').contents().wrap('<div class="grve-btn-inner"></div>');
  	$('.grve-post-item .grve-read-more .grve-btn-inner').append("<span class='grve-line grve-bg-black'></span>");
  	$('.grve-post-item .grve-read-more span').css( { marginRight : "0" } );
});

Don’t forget do wrap the code inside script tags, Wordfence doesn’t allow me to post it that way here.
You might need to adjust some CSS classes like “grve-text-black”, etc. Or substitute the CSS classes to your needs. All button varations are easily achievable.
Don’t foget to prefix with your custom CSS class to target only your preferred sections.

• This reply was modified 4 years, 6 months ago by Marius1989.

[hiegl]

You are right, this is really only a quick fix. The team will surely come up with a better solution in one of the future updates. Thanks anyway!

[Kosmas]

Hi guys!

I think that you just need to override the read more function via the child theme.

function impeka_grve_read_more( $post_id = "", $more_text = '' ) {
	$icon = impeka_grve_get_svg_icon( 'arrow-2');
	if ( empty( $post_id ) ) {
		$post_id = get_the_ID();
	}
	if ( empty( $more_text ) ) {
		$more_text = esc_html__( 'read more', 'impeka' );
	}
	$more_button = '<a href="' . esc_url( get_permalink( $post_id ) ) . '" class="grve-btn-text grve-btn-line grve-line-bottom grve-text-primary-1 grve-text-hover-primary-1 grve-btn-medium">';
	$more_button .= '<div class="grve-btn-inner">';
	$more_button .= '<span>' . esc_html( $more_text ) . '</span>';
	$more_button .= '<span class="grve-line grve-bg-primary-1"></span>';
	$more_button .= '</div>';
	$more_button .= '</a>';
	return $more_button;
}

In general, with Impeka you can override everything and without having to worry about the next theme release (new minor release in a few minutes/hours). Enjoy it!

[hiegl]

I get some errors when using this code. Could you please check, if it is working for you.
Problem starts on the line

$more_button = '<a href="' . esc_url

[Kosmas]

Hi @hiegl,

Could you please be more specific? It works for me so I don’t know what I am missing.

Thanks!

[hiegl]

Ah, my fault. This is PHP-Code. I inserted it into the custom JS-field.
Using it in the child theme works perfectly. Thanks a lot!

Btw. why are the input fileds for custom css and JS so small in Impeka? Is there a way to have them wider instead of 600px, which they seem to be set to now?

[Kosmas]

That’s great!

We will also see what we can do for the custom code fields. I need to discuss it with the other guys.

Thanks again 🙂

[hiegl]

Hello Kosmas,

could you help me again. Now I need to make the read more button of the blog element like the button, that has these features:

Button Type: Only text
Button Icon Type: Theme SVG Icon
SVG Icon: Arrow 1
SVG Icon Shape: Circle
SVG Icon Shape Type: Simple
SVG Icon Color: White
SVG Icon Shape Color: Primary 1

Is this possible? You probably know, how to adjust the former code snippet to achieve this. I failed unfortunately.

In general I would appreciate, if all button styles would easily be usable for the blog read more as well. Buttons and button-like things have to be coherent in most website designs. Maybe you will consider to implement this in the future. Or we should have some place here, where all such snippets are available, which would also suffice for me.

Anyway, I do like, how Impeka avoids too much bloat in general like many so-called multi-purpose themes have. 🙂

Best,
Bernhard

[Kosmas]

Hello Bernhard,

I think that you need the function below:

function impeka_grve_read_more( $post_id = "", $more_text = '' ) {
	$icon = impeka_grve_get_svg_icon( 'arrow-2');
	if ( empty( $post_id ) ) {
		$post_id = get_the_ID();
	}
	if ( empty( $more_text ) ) {
		$more_text = esc_html__( 'read more', 'impeka' );
	}
	$more_button = '<a href="' . esc_url( get_permalink( $post_id ) ) . '" class="grve-btn-text grve-btn-only-text grve-text-primary-1 grve-text-hover-primary-1 grve-btn-medium grve-with-svg-icon-arrow-1">';
	$more_button .= '<div class="grve-btn-inner">';
	$more_button .= '<span>' . esc_html( $more_text ) . '</span>';
	$more_button .= '<div class="grve-btn-svg-icon grve-with-shape grve-svg-white"><svg width="12px" height="12px" viewBox="0 0 12 12"><polygon points="3.6 0 10 6 3.6 12 2 10.5 6.8 6 2 1.5"></polygon></svg><div class="grve-shape-icon grve-circle grve-simple grve-bg-primary-1"></div></div>';
	$more_button .= '</div>';
	$more_button .= '</a>';
	return $more_button;
}

For the reasons you have already mentioned, we prefer to avoid adding all the button options to the read more button. The button element is an advanced element and if you think that you can also set up your blog globally in Theme Options and not just in the blog elements, you can easily understand what I mean.

For customers like you (you already have 6 Impeka licenses), this is the place to ask for small changes like this. We are always willing to help 🙂

Best Regards
Kosmas

[hiegl]

Hello Kosmas,

Great! 🙂
One small glitch: The normal read more had 2rem top-margin, but this new svg-button has no top-margin. What would be the best way to add it?

I see, what you mean by global vs custom options and you are right of course.

Best regards,
Bernhard

[Kosmas]

Thanks for your understanding Bernhard 🙂

I think with the small CSS below you can have the margin-top in the button

.grve-post-content .grve-btn-inner{
	margin-top: 2rem;
}

If this causes any side effects, let me know.

Best Regards
Kosmas

[hiegl]

This CSS fixed it. 🙂
No side effects showing up on first view.

I also needed to make the circle of the svg icon smaller. Is this ok:

.grve-btn-inner .grve-btn-svg-icon .grve-shape-icon {
width: 1.8em;
height: 1.8em;
margin-top: -0.9em;
margin-left: -0.9em;
}

Best regards,
Bernhard

[Kosmas]

That’s great!

It’s just CSS so if it works for you, it’s fine 🙂

[Author]

Replies