• Resolved AZBros

    (@azbros)


    Hi,
    I’m having difficulty figuring out how to increase the size of the title text on Pages.

    Also, I’d like to move the title below the Featured Image on a Page. I managed to do this by editing page.php in my child theme, but then there was a large blank space between the featured image and the title. I’d like for there to be a space between the image and the page title, but not a huge one.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi AZBros. Give this a try:

    /* page title larger and move up */
    .page-title {
        font-size: 24px;
        padding-top: 0;
    }
    Thread Starter AZBros

    (@azbros)

    Okay, at first this seemed to work, but I just now noticed that it changed the way my Posts looked. Basically the size of the Category text increased and moved to the very top of the page (previously there was some padding). When I removed the above code, everything went back to normal, but the Pages also lost their new format. Is there any way to change just the Page titles without affecting the Posts?

    Also, regarding the Page titles, is there a way to change the font color to black? I tried adding “color: #000” to the above code, but that didn’t change anything.

    Thanks!

    Thread Starter AZBros

    (@azbros)

    Just a slight update: I’m still having issues moving only the Page titles. I can’t figure out how to single out just the titles that show up on Pages and leave the Category titles at the top of Posts untouched. I also still can’t figure out what the code is to change the color of titles on Pages.

    Another thing I was having an issue with (that I forgot to post before) was a large gap between the Featured Image and the newly lowered Title on Pages. I proud to say I somehow figured it out on my own. To minimize this space entered the following code into style.css

    .page-image {
        margin-bottom: 10px;
    }

    I know it doesn’t seem like much, but I’m still a novice with this coding stuff, so even the little victories feel good. :-p Hopefully someone can assist me with the other stuff, though. I just wanted to post what I had figured out just in case it helps someone else.

    move the title below the Featured Image on a Page. I managed to do this by editing page.php in my child theme

    moved to the very top of the page (previously there was some padding)

    This is where it would be good to be able to see what’s happening. If you can explain what you did to edit page.php I can try to duplicate your configuration.

    The title color is being overridden by the H2 element. Try this:

    /* page title color black */
    .page-title h2 {
        color: #000;
    }

    single out just the titles that show up on Pages

    You can do this using the .page class of the <body> element:

    .page .page-title h2 {
        color: #000;
    }
    Thread Starter AZBros

    (@azbros)

    Hi bdbrown,
    This is how my page.php looks now:

    <?php get_header(); ?>
    
    <section class="content">
    
    	<div class="pad group">
    
    		<?php while ( have_posts() ): the_post(); ?>
    
    			<article <?php post_class('group'); ?>>
    
    				<?php get_template_part('parts/page-image'); ?>
    
    				<?php get_template_part('parts/page-title'); ?>
    
    				<div class="entry themeform">
    					<?php the_content(); ?>
    					<div class="clear"></div>
    				</div><!--/.entry-->
    
    			</article>
    
    			<?php if ( hu_is_checked('page-comments') ) { comments_template('/comments.php',true); } ?>
    
    		<?php endwhile; ?>
    
    	</div><!--/.pad-->
    
    </section><!--/.content-->
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>

    I don’t know if that was the proper way to move the title, but it worked.

    Also, I tried the code above, but the title on my Page remained dark gray (the default color). I tried changing the “h2” to “h1” and that did the trick! Right now, everything looks the way I want it (including how the stuff on Posts look). Using the information you provided, I entered the following code into style.css:

    .page-title h1 {
        color: #000;
        font-size: 32px;
        text-align: center;
    }

    The h1 was the part I was missing and the key to solving this dilemma. Thanks for your help! So far everything looks great, but if I notice anything else, I’ll be sure to post back here.

    I don’t know if that was the proper way to move the title, but it worked.

    Yep, that’s what you do; move it where you want it and tweak it using CSS.

    I tried changing the “h2” to “h1” and that did the trick!

    Sorry about that; I was looking at a different template. Glad if you got it working the way you want.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Increase Title Size on "Page"?’ is closed to new replies.