Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Custom CSS for sticky posts

Home Forums Support Custom CSS for sticky posts

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #142584
    Tom

    Hi,
    Is it possible to style a sticky post differently to the global settings for other posts? I’d like to use a different excerpt length, different image size/alignment and different text colour. I’ve used Simple Custom CSS to change the background colour and borders but the other settings don’t seem to override the global settings. Any suggestions?

    #142607
    Tom
    Lead Developer
    Lead Developer

    Hi Tom,

    Tough questions.

    Do you have the Blog add-on activated?

    How about the Page Header add-on?

    Let me know – I should be able to give you a couple functions 🙂

    #142630
    bdbrown

    This CSS will change the post text color:

    /* sticky post text color */
    .sticky {
      color: #f00;  /* red */
    }
    

    Adding CSS: https://generatepress.com/knowledgebase/adding-css/

    This function will change the sticky post excerpt length:

    add_filter( 'excerpt_length', 'my_sticky_excerpt_length', 999);
    function my_sticky_excerpt_length( $length ) {
        if ( is_sticky() ) {
            $length = 25;
        }
        return $length;
    }
    

    Adding PHP: https://generatepress.com/knowledgebase/adding-php-functions/

    #142762
    Tom

    Hi Tom – yes, I have both activated.

    bdbrown – thanks for the suggestions but neither of those work. I think they’re perhaps being overridden by other elements of the theme?

    Thanks both for your help.

    #142829
    Tom
    Lead Developer
    Lead Developer

    Give this a shot for the excerpt length:

    add_filter( 'excerpt_length', 'generate_custom_excerpt_length', 1000 );
    function generate_custom_excerpt_length( $length ) {
    	
    	if ( function_exists( 'generate_blog_get_defaults' ) ) :
    		$generate_settings = wp_parse_args( 
    			get_option( 'generate_blog_settings', array() ), 
    			generate_blog_get_defaults() 
    		);
    		$length = $generate_settings['excerpt_length'];
    	else :
    		$length = 55;
    	endif;
    	
    	if ( is_sticky() ) {
    		$length = 25;
    	}
    	
    	return $length;
    }

    Change the image size:

    .sticky .post-image img {
        max-width: 200px;
    }

    Alignment:

    .sticky .post-image {
        float: left;
    }

    Color:

    .sticky .inside-article {
        color: #222222;
    }
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.