Change read more text color and size

Support
#1

Where do I find in Icon stack to change the read more settings.

readmorescreen
readmorescreen1600×900 28.2 KB

I would like to change the size and color

#2

I found where to change the color its the size I am not sure where to change that in CSS

#3

Hello George,

Thanks for writing in! Be advised that the font size of the read more button is actually the same as what you have added in your custom CSS. You have added this:

.entry-header, .entry-content {
    font-size: 1.286rem;
}

If you want to specifically reduce/increase the font size of just the read more button, You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Screen Shot 2020-11-23 at 4.55.18 AM
Screen Shot 2020-11-23 at 4.55.18 AM1612×1060 108 KB

Based on the screenshot above, the class selector is “readmore”, therefore the code will be:

.readmore {
   /* your styling here */
}

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

Best Regards.

#4

screenshots
screenshots1600×900 73.2 KB

How do I remove the … I have set excerpt to 0 but no results I was able to center the read more as I wanted. Thanks

#5

Hello George,

The ... for the excerpt was coded built-in with the theme. The other 4 posts that you have there do not display it because you may have added a manual excerpt or that simply your posts do not have any contents. If you want to remove it, kindly check out this old thread:

Best Regards.

#6

This code fixed the issue
if ( ! function_exists( ‘x_excerpt_string’ ) ) :
function x_excerpt_string( $more ) {

$stack = x_get_stack();

if ( $stack == 'integrity' ) {
  return '<div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
} else if ( $stack == 'renew' ) {
  return ' <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
} else if ( $stack == 'icon' ) {
  return ' ';
} else if ( $stack == 'ethos' ) {
  return ' ...';
}

}
add_filter( ‘excerpt_more’, ‘x_excerpt_string’ );
endif;

Thanks for your help Theme.co Support is the best

#7

Now to figure out how to make the read more text bigger and capitalized

#8

Hey George,

This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. You can try adding the following code in the Theme Options > CSS:

.more-link {
    font-size: 16px;
    color: red;
    text-transform: capitalize;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#9

Tried that no dice Thanks I think I will just leave it as is. I have added so much css to it already

#10

You are most welcome!

#11

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