Read more button on etho stack blog and background

Support
#1

hi there,

i did some customization on the blog post site and single post site.
i found a code in the forum to make a read more button, changed the button style in theme options => buttons.
but there are some issues:

*the read more button should always be there, even if there are 10 chars and i set the expert lenght to 20
*the read more button should be on the right bottom corner
*is it possible to make all entrys equal high? and the excpert thing seems a bit weird? when set to 20 on some posts it looks ok on some it has the false heigh?
*there should be a orange border on the left side of the column between image and text only on the posts page? and this should not be visible when in single post view…
*header link hover does not change to orange but i added the code?

can you help me a little bit? what i am doing wrong? :slight_smile:

thanks again for your help! yo are awesome!!!

cheers

btw: one suggestion for a future release: is it possible that you add a “blog sytle editor” ? :slight_smile:

#2

added credentials if needed :slight_smile:

one more thing: can i translate the view more text on image hover to another language?

thanks again

#3

Hi Harald,

To achieve that, please add this custom CSS under Theme Options > CSS:

@media (min-width: 980px){
    .blog .x-main article,
    .archive .x-main article {
        display: flex;
    }
}

.entry-wrap {
    position: relative;
}

.more-link {
    position: absolute;
    right: 0;
    bottom: 0;
}

.single-post .entry-wrap {
    border: none;
}

Please add this custom code under functions.php file locates in your child theme:

add_filter( 'gettext', 'x_edit_texts' );
function x_edit_texts($translation){
	$translation = str_ireplace('View Post', 'Your text', $translation);
	return $translation;
}

Don’t forget to replace the Your text with your language.

Hope it helps :slight_smile:

1 Like
#4

hi,

that worked great.
it looks a bit weird on smaller devices.
any advice what to do? if not i will try it myself :slight_smile:
thanks again for your help!

#5

Hello Harald,

To resolve the button in smaller screens, please update your css and use this:

@media (max-width:767px){
    .entry-wrap{
        border:none !important;
        padding-bottom:7px;
        margin-top:-2.15em;
    }
    .more-link{
        position: relative;
        display: block;
        text-align: right;
    }
}

We would loved to know if this has work for you. Thank you.

1 Like
#6

that worked great!

thanks guys! :wink:

cheers

#7

You’re welcome.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.