Snap Homepage – Post Area modifications

  • Author
    Posts
  • #1509581

    magagirao
    Member

    Hello.
    My client wants some changes in the homepage Posts Area.
    My questions are:
    + How can I increase the feature image size?
    + How can I deleted all text below image? (including the date and title)
    + How can I add a square in the VIEW MORE link to look like the one in the slide above? The idea is to have this link inside the image.

    The idea is to reduce the blank area between the images. More compact.

    Thanks in advance.

    The blog I need help with is kerryandluis.wordpress.com.

    #1509637

    Howdy! Heh this was an energizer bunny CSS project and kept on going, and going…

    Add this to the custom CSS and see what you think. It narrows the left are with the blurb and then widens the images, gets rid of the title/content below the images

    #blurb {
        width: 20%;
    }
    .with-sidebar {
        width: 75%;
    }
    .tile .post img {
        max-height: 275px;
    }
    .with-thumb .grid-content-wrapper {
        display: none;
    }
    .tile .post .post-wrapper {
        height: 260px;
    }
    .tile .post:nth-child(1), .tile .post:nth-child(2), .tile .post.last-of-posts {
        height: 280px;
    }
    .grid-read-more {
        position: relative;
        right: 10px;
        top: -50px;
    }
    .tile .post:nth-of-type(2n+1) .set-post {
        padding-right: 3%;
    }
    .tile .post:nth-of-type(2n) .set-post {
        padding-left: 3%;
    }
    .tile .post {
        padding-top: 1%;
    }
    #1509679

    magagirao
    Member

    Yes Howdy! : )
    Thanks, it works exactly as they want.

    I have two questions:
    1) in the blog page how can I say trought css that the date and the title must be visible?

    .with-thumb .grid-content-wrapper {
        display: none;

    Is there any way to declare ”display:none” for the homepage post area, and ”display:block” for the post page?

    2) last question: is it possible to change ‘read more’ to ‘view more’

    Once again, thanks for your time helping.

    #1509689

    You can specifically target the home page by including the “home” body class. You can find the body classes for each page by looking in the opening body tag. To target only the home page for the rule you referenced, use the following.

    .home .with-thumb .grid-content-wrapper {
        display: none;
    }
    #1509694

    magagirao
    Member

    Hello thesacredpath.
    Once again, thanks for your help and time.
    I understand what you said.
    I’d also tried that code with .blog instead of .home, and it works.
    So, when trying to give a different height between posts in blog page, I use the class blog, but in these lines isn’t making any difference:

    .blog.tile .post:nth-child(1), .blog.tile .post:nth-child(2), .blog.tile .post.last-of-posts {
        height: 290px;
    }

    Let me explain. So, homepage it’s OK, but blog post should show title and date. In that order I need the height to be higher than homepage.
    Am I making any sense?

    Secondly, why the posts after the 2nd row have a different visual behavior?

    Once again, thanks for your time helping.

    #1509697

    Your code is fine, with the exception of a few missing spaces in the selectors. You need a space between .blog and .tile on all three, like this:

    .blog .tile .post:nth-child(1), .blog .tile .post:nth-child(2), .blog .tile .post.last-of-posts

    Yes, using .home and .blog body classes to style those two separately is the way to go.

    #1509698

    magagirao
    Member

    Oh : ) I get it.

    Now, I added two more post in the Homepage, and realize that the same issue height happens between the posts (as in the blog).

    In that order, I tried this code:.tile .post:nth-child(3) and it works (not exactly with the same height as the previous posts). But if I had 100 posts I don’t want to write this to each one.

    In my small-code-brain I ask: should this code be the answers to this issue?
    .blog .tile .post.last-of-posts

    Thanks thesacredpath.

    #1509699

    magagirao
    Member

    P.S. because the code: .blog .tile .post.last-of-posts it’s not doing what my little-code-brain was thinking.
    : )

    #1509701

    Let’s start again from scratch. I used the demo site and Firebug in Firefox to come up with the following which removes the date and excerpt, moves the read more up under the image and tightens up the spacing (at least with Firebug on the demo. Copy our your code for safe keeping and then try this:

    .home .with-thumb .grid-content-wrapper {
        display: none;
    }
    
    .home .tile .post .post-wrapper {
        height: 220px;
    }
    
    .home .tile .post {
        height: 270px;
    }

    I didn’t try this on the blog page, just on the home page. Are you looking for the same sort of spacing on the blog page except keeping the title and date? If so, give this a try for that page to tighten up the spacing between the top 4 and the ones below.

    .blog .tile .post {
        height: auto;
    }
    #1509704

    magagirao
    Member

    You rock! Many thanks for the help and time.

    #1509705

    You are welcome.

    #1509712

    magagirao
    Member

    Hello again.

    All works fine, but the two first posts in the blog still have their heigh bigger than the rest.
    The code we’ve is:
    .blog .tile .post {
    height: 325px;
    }

    .blog .tile .post .post-wrapper {
    height: 245px;
    }

    What’s missing?
    Thanks in advance. (again)

    #1509713

    magagirao
    Member

    Hi thesacredpath, can you help me in this one?
    Thanks in advance.

    #1509714

    justpi
    Member

    All the posts have the same height. The difference is that the first two have 0 top padding.

    #1509715

    magagirao
    Member

    justpi: thank you for your time in helping.
    it’s all fine now.

    #1509716

    Yay! @justpi to the rescue!

    #1509717

    magagirao
    Member

    Hey again.
    I’m not crossing or reforcing any post, justpi alert me about the problem I’m goint to explain in another message, but it’s about this subject.

    Drag the browser window to make it narrower and the space between the thumbnail and the read button is big. I’m trying, with no sucess, to define the height of grid:

    .home .with-thumb .grid-content-wrapper {
        display:none;
        max-height: 2px;
    }

    I thought this white space was for the text I’m not displaying.

The topic ‘Snap Homepage – Post Area modifications’ is closed to new replies.