WordPress.org

Ready to get started?Download WordPress

Forums

Trouble styling post title differently in archive versus single view (4 posts)

  1. dgissen
    Member
    Posted 9 months ago #

    I have a test site running here

    On this archive page, I would like to make the size of the_title() smaller than on the single view page.

    I tried changing the class names in the entry header portion of the content-archive file: eg. entry-title to "entry-archive", but my style sheet doesn't recognize the new classes. What am I doing wrong?

    original code below

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>
    		<div class="featured-post">
    			<?php _e( 'Featured post', 'twentytwelve' ); ?>
    		</div>
    		<?php endif; ?>
    
    		<div class="entry-header">
    			<!-- <?php the_post_thumbnail(); ?> -->
    			<?php if ( is_single() ) : ?>
    
    			<h1 class="entry-title">
    			<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark">
    
    				<?php the_title(); ?>
    			</a>
    		</h1>
    			<?php else : ?>
    			<h1 class="entry-title">
    				<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'twentytwelve' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
    
    			</h1>
    			<?php endif;  is_single() ?>
    
    		</div>
    
    		<?php if ( is_search() ) : // Only display Excerpts for Search ?>
    		<div class="entry-summary">
    			<?php the_excerpt(); ?>
    		</div>
    		<?php else : ?>
    
    	</article>
  2. wpfan1000
    Member
    Posted 9 months ago #

    After looking at your site for a while:

    On the archive page the div that contains the title:

    <h1 class="entry-title">

    is inside:

    <header class="page-header">

    On the single post page, there is no div called:

    <header class="page-header">

    The css that styles this heading on both pages is:

    .entry-header .entry-title {
    font-size: 2rem;
    line-height: 2.5rem;
    }

    so if you ADD some more css something like this:

    .page-header .entry-header .entry-title {
    font-size: 1rem;
    }

    This should change the font size only on the archive page.

    I could not actually test this css in my browser on your site - please let me know if it works..

  3. dgissen
    Member
    Posted 9 months ago #

    THANK YOU!!! Can't believe I missed that!

  4. wpfan1000
    Member
    Posted 9 months ago #

    You are welcome :-)

Reply

You must log in to post.

About this Topic