Support » Theme: Twenty Sixteen » Fixing titles

  • Resolved rthorntn

    (@rthorntn)


    Hi,

    I’m very close to finishing up all the loose ends, thanks heaps to @jarretc

    With /solutions/ and /services/ I want to have the post titles line up with the top of the image like on /products/, any idea how to do that?

    On /products/ any idea how to remove the border around the featured images?

    On /solutions/ the title font size and style is good, can I change /products/ and /services/ title to match

    <?php
    /**
     * The template for displaying pages
     *
     * This is the template that displays all pages by default.
     * Please note that this is the WordPress construct of pages and that
     * other "pages" on your WordPress site will use a different template.
     * Template Name: Products
     * @package WordPress
     * @subpackage Twenty_Sixteen
     * @since Twenty Sixteen 1.0
     */
    $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    get_header(); ?>
    <script type="text/javascript">
    $(document).ready( function() {
    if ($(window).width() < 740) {
         $(".product-menu .sub-menu li a").click(function(event){
        event.preventDefault();
        var offset = $($(this).attr('href')).offset().top -50;
        $('html, body, div').animate({scrollTop:offset}, 1000);
    	$('ul.nav-menu').slideUp();	
    
      });
      }    else {
    	$(".product-menu .sub-menu li a").click(function(event){
        event.preventDefault();
        var offset = $($(this).attr('href')).offset().top -0;
        $('html, body, div').animate({scrollTop:offset}, 1000);
    	});
      }
      });
    </script>
    <header>
    <div class="wrapper">
    <div id="logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php dynamic_sidebar( 'logo' ); ?></a></div>
    <div id="navigation"><div id="navbtn">menu</div><?php wp_nav_menu( array( 'theme_location' => 'product', 'menu_class' => 'nav-menu',) ); ?></div>
    </div>
    </header>
    <div id="banner">
    <?php
    if($feat_image != "")
    {
    ?>
    <img src="<?php echo $feat_image; ?>" alt="<?php the_title(); ?>">
    <?php
    }
    else
    {
    ?>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/inner-slider2.jpg" alt="<?php the_title(); ?>">
    <?php
    }
    ?>
    <div class="banner-text">
    <div class="inner-banner">
    <h1><?php the_title(); ?></h1>
    </div>
    </div>
    </div>
    <div id="content">
    <div class="wrapper">
    		<?php
    		// Start the loop.
    		while ( have_posts() ) :
    			the_post();
    			the_content();
    			// End of the loop.
    		endwhile;
    		?>
      
    <?php
    $i=1;
    global $paged;
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $curpage = $paged ? $paged : 1;
    $args = array('post_type' => 'products', 'posts_per_page' => -1, 'order' => 'desc',  'paged' => $paged);
    $the_query = new WP_Query( $args ); ?>
    <?php if ( $the_query->have_posts() ) : ?>
      <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
       $postid = $the_query->post->ID;
       $feat_image1 = wp_get_attachment_url( get_post_thumbnail_id($postid) );
      ?>       
    <div class="row menugap" id="products-<?php echo $i; ?>">
    
    <div class="col-m-8">
    <h5 class="black-text"><?php the_title(); ?></h5>
    <?php the_content(); ?>
    </div>
    <div class="col-m-4 pro-box"><?php the_post_thumbnail('full'); ?></div>
    
    </div>
      <?php 
      $i++;
      endwhile; ?>  
      <!-- end of the loop -->
      <?php wp_reset_postdata(); ?>
    <?php else:  ?>
    <div><?php _e( 'Sorry, no Service' ); ?></div>
    <?php endif; ?>
    
       
    </div></div>
    <?php get_footer(); ?>
    <?php
    /**
     * The template for displaying pages
     *
     * This is the template that displays all pages by default.
     * Please note that this is the WordPress construct of pages and that
     * other "pages" on your WordPress site will use a different template.
     * Template Name: Solutions
     * @package WordPress
     * @subpackage Twenty_Sixteen
     * @since Twenty Sixteen 1.0
     */
    $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
    get_header(); ?>
    <script type="text/javascript">
    $(document).ready( function() {
    if ($(window).width() < 740) {
         $(".solution-menu .sub-menu li a").click(function(event){
        event.preventDefault();
        var offset = $($(this).attr('href')).offset().top -50;
        $('html, body, div').animate({scrollTop:offset}, 1000);
    	$('ul.nav-menu').slideUp();	
    
      });
      }    else {
    	$(".solution-menu .sub-menu li a").click(function(event){
        event.preventDefault();
        var offset = $($(this).attr('href')).offset().top -0;
        $('html, body, div').animate({scrollTop:offset}, 1000);
    	});
      }
      });
    </script>
    <header><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <div class="wrapper">
    <div id="logo"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php dynamic_sidebar( 'logo' ); ?></a></div>
    <div id="navigation"><div id="navbtn">menu</div><?php wp_nav_menu( array( 'theme_location' => 'solution', 'menu_class' => 'nav-menu',) ); ?></div>
    </div>
    </header>
    <div id="banner">
    <?php
    if($feat_image != "")
    {
    ?>
    <img src="<?php echo $feat_image; ?>" alt="<?php the_title(); ?>">
    <?php
    }
    else
    {
    ?>
    <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/inner-slider2.jpg" alt="<?php the_title(); ?>">
    <?php
    }
    ?>
    <div class="banner-text">
    <div class="inner-banner">
    <h1><?php the_title(); ?></h1>
    </div>
    </div>
    </div>
    <div id="content">
    <div class="wrapper">
    		<?php
    		// Start the loop.
    		while ( have_posts() ) :
    			the_post();
    			the_content();
    			// End of the loop.
    		endwhile;
    		?>
      
    <?php
    $i=1;
    global $paged;
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $curpage = $paged ? $paged : 1;
    $args = array('post_type' => 'solutions', 'posts_per_page' => -1, 'order' => 'desc',  'paged' => $paged);
    $the_query = new WP_Query( $args ); ?>
    <?php if ( $the_query->have_posts() ) : ?>
      <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 
       $postid = $the_query->post->ID;
       $feat_image1 = wp_get_attachment_url( get_post_thumbnail_id($postid) );
      ?>       
    <div class="row row-xl-2 row-l-2 menugap v-align-l" id="solutions-<?php echo $i; ?>">
    
    <div class="col-xl-6 col-l-6">
    <h3 class="black-text"><?php the_title(); ?></h3>
    <?php the_content(); ?>
    </div>
    </div>
      <?php 
      $i++;
      endwhile; ?>  
      <!-- end of the loop -->
      <?php wp_reset_postdata(); ?>
    <?php else:  ?>
    <div><?php _e( 'Sorry, no Service' ); ?></div>
    <?php endif; ?>
    
       
    </div></div>
    <?php get_footer(); ?>

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi again! The following 2 pieces of CSS should align the Services/Solutions pages

    .page-template-services #content .wp-block-group .wp-block-image {
    	margin-top: -15px;
    }
    
     .page-template-solutions #content .wp-block-group .wp-block-image {
     	margin-top: -30px;
     }

    You may need to adjust the -15px and -30px values to your liking.

    For the Products page featured image borders

    .page-template-products #content .row .pro-box {
     	border: none;
    }

    For the title sizes, if you switch the header values from h5 on Products and h4 on Services over to using h3 like Solutions does it should match them all up.

    • This reply was modified 2 weeks, 3 days ago by Jarret. Reason: formatting
    • This reply was modified 2 weeks, 3 days ago by Jarret.

    @jarretc , awesome, looking good, a million thanks.

    On:

    /solutions/
    /services/
    /products/

    One tiny niggle is there are huge gaps between each post, for example between the bottom of Application Security and the top of Device Discovery & Management on /solutions/

    Thanks again.

    Content removed

    • This reply was modified 2 weeks, 2 days ago by rthorntn.

    Something like this should take care of that

    .page-template #content .wrapper .row {
    	padding-top: 50px;
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.