gmatteson
Forum Replies Created
-
Forum: Themes and Templates
In reply to: [gimliii] Home Page Text AlignmentThank you sir. Here’s the edit’s I have made for my site, seem to work pretty well.
1. I used an over-riding stylesheet.
/* Sets the blog image on the home page to the left of the screen. */ .home-thumbnails { float: left; } /* Sets blog text on the home page 175px from the left of the screen. This creates a 25px buffer between the right side of the image and the blog text. It also aligns the text in a vertical line on the page so the text does not wrap under the thumbnail image */ .home-blogcontent { margin-left: 175px; } /* Sets the blog image on the archive page to the left of the screen. */ .categories-thumbnails { float: left; } /* Sets blog text on archives page 180px from the left of the screen. This creates a 30px buffer between the right side of the image and the blog text. It also aligns the text in a vertical line on the page so the text does not wrap under the thumbnail image (I increased it to 180 because the 175 had the text too close to the image. not sure why. with the 180px, it looks the same like the home.php page*/ .categories-blogcontent { margin-left: 180px; } /* Prevents the pre block from going behind the thumbnail image in posts */ pre { overflow: hidden; }
I edited the home.php (the child theme) to include these changes.
<?php get_header(); ?> <div class="breadcrumbs margin-bottom-40"> <div class="container"> <h1 class="pull-left"><?php _e('Home','gimliii');?></h1> </div> </div> <div class="container"> <div class="row blog-page margin-bottom-20"> <div class="col-md-9 md-margin-bottom-40"> <?php $gimliii_post_class_home = " row blog blog-medium margin-bottom-40 "; if ( have_posts() ) : // Start the Loop. while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class($gimliii_post_class_home); ?> > <div class="col-md-12"> <div class="home-thumbnails"> <?php if ( has_post_thumbnail() && ! post_password_required() ){ ?> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('thumbnail'); echo "</a>"; } ?> </div> <div class="home-blogcontent"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"> <?php the_title(); ?></a></h2> <ul class="list-unstyled list-inline blog-info"> <li><i class="icon-calendar"></i> <?php gimliii_posted_on();?></li> <?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?> <li><i class="icon-comments"></i> <?php comments_popup_link( __( 'Comment', 'gimliii' ), __( '1 comment', 'gimliii' ), __( '% Comments', 'gimliii' ) ); ?> </li><?php endif;?> <li><i class="icon-copy"></i> <?php $catcountpost= sizeof(get_the_category()); if( $catcountpost>15){ echo 'Posted in '. $catcountpost.' Categories';?> <?php }else{ the_category(','); } ?> </li> <?php if(has_tag()){ ?><li><i class="icon-tags"></i> <?php the_tags();?></li><?php } ?> </ul> <p><?php the_excerpt(); ?></p> <p><a class="btn-u btn-u-small" href="<?php the_permalink(); ?>"><i class=" icon-eye-open"></i> Read More</a></p> </div> <!-- End div-home-blogcontent --> </div> </div> <!--End Blog Post--> <hr class="margin-bottom-40"> <?php endwhile; gimliii_paging_nav(); endif; ?> </div> <?php get_sidebar();?> </div><!--/row--> </div><!--/container--> <?php get_footer(); ?>
I then edited the archives.php on the parent theme.
<?php get_header(); ?> <div class="breadcrumbs margin-bottom-40"> <div class="container"> <h1 class="pull-left"><?php if(is_category()){ printf( __( 'Posts under category : %s', 'gimliii' ), single_cat_title( '', false ) ); }elseif(is_tag()){ printf( __( 'Posts tagged in : %s', 'gimliii' ), single_tag_title( '', false ) ); } else{ echo 'Archives: ';}?></h1> </div> </div> <div class="container"> <div class="row blog-page"> <div class="col-md-9 md-margin-bottom-40"> <?php if ( have_posts() ) : // Start the Loop. while ( have_posts() ) : the_post(); ?> <div class="row blog blog-medium margin-bottom-40"> <div class="col-md-12"> <div class="categories-thumbnails"> <?php if ( has_post_thumbnail() && ! post_password_required() ){ the_post_thumbnail('thumbnail'); }else{ ?> <img src="<?php echo get_template_directory_uri(); ?>/img/default-thumb.jpg" alt="<?php the_title(); ?>" class="img-responsive"/> <?php }?> </div> </div> <!-- <div class="col-md-7"> --> <div class="categories-blogcontent"> <h2><?php the_title(); ?></h2> <ul class="list-unstyled list-inline blog-info"> <li><i class="icon-calendar"></i> <?php gimliii_posted_on();?></li> <?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?> <li><i class="icon-comments"></i> <?php comments_popup_link( __( 'Comment', 'gimliii' ), __( '1 comment', 'gimliii' ), __( '% Comments', 'gimliii' ) ); ?> </li><?php endif;?> <li><i class="icon-copy"></i> <?php $catcountpost= sizeof(get_the_category()); if( $catcountpost>15){ echo 'Posted in '. $catcountpost.' Categories';?> <?php }else{ the_category(','); } ?> </li> <?php if(has_tag()){ ?><li><i class="icon-tags"></i> <?php the_tags();?></li><?php } ?> </ul> <p><?php the_excerpt(); ?></p> <p><a class="btn-u btn-u-small" href="<?php the_permalink(); ?>"><i class="icon-location-arrow"></i> Read More</a></p> </div> <!-- End div-categories-blogcontent --> </div> <hr class="margin-bottom-40"> <?php endwhile; gimliii_paging_nav(); endif; ?> </div> <?php get_sidebar('homeblog');?> </div><!--/row--> </div><!--/container--> <?php get_footer(); ?>
and then I edited the single.php on the parent theme.
<?php get_header();?> <div class="container margin-top-20"> <div class="row blog-page blog-item"> <div class="col-md-9 md-margin-bottom-60"> <?php $gimliii_post_class=" blog margin-bottom-40 "; if ( have_posts() ) : // Start the Loop. while ( have_posts() ) : the_post(); ?> <div id="post-<?php the_ID(); ?>" <?php post_class($gimliii_post_class); ?>> <h2><?php the_title();?></h2> <div class="blog-post-tags"> <ul class="list-unstyled list-inline blog-info"> <li><i class="icon-calendar"></i> <?php gimliii_posted_on();?></li> <li><i class="icon-pencil"></i> <?php the_author(); ?></li> <li><i class="icon-comments"></i> <?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?> <?php comments_popup_link( __( 'Comment', 'gimliii' ), __( '1 comment', 'gimliii' ), __( '% Comments', 'gimliii' ) ); ?> <?php endif;?> <?php if(!comments_open()){ echo "Comments off";} ?> </li> <li><i class="icon-tags"></i> <?php $catcountpost= sizeof(get_the_category()); if( $catcountpost>15){ echo 'Posted in '. $catcountpost.' Categories'; }else{ the_category(','); } ?> </li> <?php if(has_tag()){ ?><li><i class="icon-tags"></i><?php the_tags();?></li><?php } ?> </ul> </div> <div class="blog-img"> <?php if ( has_post_thumbnail() && ! post_password_required() ){ the_post_thumbnail('thumbnail'); }?> </div> <div class="blog-body"> <?php the_content(); ?> <p><?php wp_link_pages( array( 'before' => __( 'Pages:', 'gimliii' ), 'after' => '') ); ?></p> </div> </div> <hr> <?php gimliii_post_nav();endwhile; endif;?> <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); }?> <hr> </div> <?php get_sidebar();?> </div> </div> <?php get_footer();?>
You can see the changes here. gabrielmatteson.com. Great theme!
Essentially, these little updates allowed for the thumbnail to use the default size of 150. To space and align the text on the home.php page 25px away from the thumbnail image to to keep the text from wrapping under the image; the same thing for the archives page. The single.php change was to make it to use the default thumbnail size.
Forum: Themes and Templates
In reply to: [gimliii] Home Page Text AlignmentGot it. In the home.php I used the custom CSS and created these styles:
/* Sets the blog image on the home page to the left of the screen. */ .home-thumbnails { float: left; } /* Sets blog text on the home page 125px from the left of the screen. This creates a 25px buffer between the right side of the image and the blog text. It also aligns the text in a vertical line on the page so the text does not wrap under the thumbnail image */ .home-blogcontent { margin-left: 175px; }
I then went to the home.php and created the:
(I used the child theme that displays thumbnails on the blogs posts that have them, else those that do not, it doesn’t display an image.<div class="home-thumbnails">
DIV and wrapped it around thumbnail image code.<div class="col-md-12"> <div class="home-thumbnails"> <?php if ( has_post_thumbnail() && ! post_password_required() ){ ?> <a href="<?php the_permalink(); ?>"> <?php the_post_thumbnail('thumbnail'); echo "</a>"; } ?> </div>
I then created the
<div class="home-blogcontent">
DIV and wrapped it around the blog text .<div class="home-blogcontent"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute();?>"> <?php the_title(); ?></a></h2> <ul class="list-unstyled list-inline blog-info"> <li><i class="icon-calendar"></i> <?php gimliii_posted_on();?></li> <?php if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) : ?> <li><i class="icon-comments"></i> <?php comments_popup_link( __( 'Comment', 'gimliii' ), __( '1 comment', 'gimliii' ), __( '% Comments', 'gimliii' ) ); ?> </li><?php endif;?> <li><i class="icon-copy"></i> <?php $catcountpost= sizeof(get_the_category()); if( $catcountpost>15){ echo 'Posted in '. $catcountpost.' Categories';?> <?php }else{ the_category(','); } ?> </li> <?php if(has_tag()){ ?><li><i class="icon-tags"></i> <?php the_tags();?></li><?php } ?> </ul> <p><?php the_excerpt(); ?></p> <p><a class="btn-u btn-u-small" href="<?php the_permalink(); ?>"><i class=" icon-eye-open"></i> Read More</a></p> </div> <!-- End div-home-blogcontent -->