WordPress.org

Ready to get started?Download WordPress

Forums

gimliii
[resolved] Home Page Text Alignment (5 posts)

  1. gmatteson
    Member
    Posted 10 months ago #

    Hello, As recommended the new styles are being used. On the Home.php I modified the thumbnail size to - the_post_thumbnail('thumbnail');

    This style sheet set the image to the left with 25px between the image and the text. I am trying to use the style - display: inline-block;
    so that the text does not wrap under the image on the home page but stays in a straight column down the page like this:
    http://jsfiddle.net/jasongennaro/SK9ad/

    Thoughts?

    /* Sets the image on the home page to the left and to set the text to the right of the image by 25px */
    .home-thumbnails {
    float: left;
    margin-right: 25px;
    display: inline-block;
    }

    When a user clicks on a Category, I want it to have the same look as the home page, what pages would I have to edit to do this? Thank you!

  2. gmatteson
    Member
    Posted 10 months ago #

    Got 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 -->
  3. bravokeyl
    Member
    Theme Author

    Posted 10 months ago #

    When a user clicks on a Category, I want it to have the same look as the home page, what pages would I have to edit to do this?

    You need to edit archive.php

  4. gmatteson
    Member
    Posted 10 months ago #

    Thank 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.

  5. bravokeyl
    Member
    Theme Author

    Posted 10 months ago #

    Great Gabe! way to go!!.

    I see little problem with menu items because they are floated to right,
    it is fixed in the upcoming release within a week

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.