WordPress.org

Forums

[resolved] Hatch theme is driving me crazy! Need help formatting my posts page... (4 posts)

  1. saucer78
    Member
    Posted 1 year ago #

    I'm very new to web design and development but am learning a lot about how everything works as I troubleshoot this issue.

    I have applied a css tweak to the Hatch theme to create a static front page. This tweak, unfortunately (from what I can deduce) breaks the formatting on the posts (Blog) page. I've found several threads regarding this issue, but no solutions. I'm at my wit's end.

    This is the custom code I have applied to my stylesheet to achieve a custom-formatted static Home page:

    .home.singular-page .hentry .entry-title {
             position: absolute;
             clip: rect(1px, 1px, 1px, 1px);
    }
    .home.singular-page #content {
             width: 68.0851%;
    }
    .home.singular-page.page-template-fullwidth #content {
             width: 100%;
    }
    .home.singular-page .hentry {
             width: auto;
             height: auto;
    }

    Somehow, this hides a "custom header" that is included with the Hatch theme and allows users to build a personalized page. This apparently affects how the posts page operates though, and I'm looking for a way to revert the posts page to its default gallery display, while keeping the front page static.

    The posts page should look something like this.

    Right now, my posts page is arranging posts vertically, down a left column of the page, like this.

    I have inspected my page next to the hatch demo page and have noticed differences in the code, but do not know enough to fix the problem. (Most if not all of the discrepancies are found within <div id="content"> and then the posts underd <div class="hfeed">.

    Thanks in advance to anyone who can help me get this worked out!

  2. saucer78
    Member
    Posted 1 year ago #

    Is there some way to affect ONLY the formatting of the home page, with a hashtag (id) rather than a period (class) before the selector?

    I've also noticed my blog is currently pulling info from the "Layout" section of my css (line 521), rather than the "Posts" section, where the demo does (line 710). I have checked another site built similar to mine (Hatch theme, with front page tweak) and his blog carries the same code as me, with more blog posts illustrating the issue: http://alanbrandtphoto.com/blog/

    There has to be some way to set a static home page without it affecting the posts!

    I may have found some help here, but this is waaaay over my noob head right now: http://codex.wordpress.org/Creating_a_Static_Front_Page#Theme_Development_for_Custom_Front_Page_Templates

  3. saucer78
    Member
    Posted 1 year ago #

    Found a fix, in case anyone stumbles across this in the future. Place all of these snippets in your child theme or custom CSS field to correctly format a static home page AND posts page:

    /*__________static front page: hide title__________*/
    .home.singular-page .hentry .entry-title {
             position: absolute;
             clip: rect(1px, 1px, 1px, 1px);
    }
    /*__________static front page: content fix__________*/
    .home.singular-page #content {
             width: 68.0851%;
    }
    .home.singular-page.page-template-fullwidth #content {
             width: 100%;
    }
    .home.singular-page .hentry {
             width: auto;
             height: auto;
    }
    /*__________posts page tweaks__________*/
    .hentry a {
    	display: block;
    	width: 100%;
    	height: 100%;
    }
    .hentry a img {
    	display: block;
    	margin: 0 auto;
    }
    .blog .hentry  {
    	float: left;
    	width: 23%;
    	height: 150px;
    	margin: 0 2% 20px 0;
    	position: relative;
    	overflow: hidden;
    }
  4. kvest
    Member
    Posted 9 months ago #

    Hi Saucer78

    I hope you can help me.
    You posted a link to this page: http://alanbrandtphoto.com/blog/

    How did you get the post titles to show under each picture?
    I have tried everything and I can not get it to work.

    ///Kristoffer

Topic Closed

This topic has been closed to new replies.

About this Topic