Remove Page Titles Image Header & Read More buttons in Appetite

  • Unknown's avatar
    goodhopesam · Member ·

    Hello,
    I’d like to do 2 things in Appetite:

    1) Remove Page Titles over the Image Headers
    2) Remove “Read More” buttons in the grid so that just the featured image and page title remain as the grid

    Thanks for your Support!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the following will remove page titles from pages such as your About page. 

    .page .entry-title, .page .entry-meta {
	visibility: hidden;
}

    I’ve used visibility: hidden; instead of display: none; so that the div actually generates when the page loads, but does not show. The reason I’ve done this is that otherwise the image ends up getting shorter.

  • Unknown's avatar
    thesacredpath · Member ·

    For the Read More, add the following. I’ve done a display: none; on the parent div instead of just the read more button, so there isn’t left over whitespace. 

    .grid-item .entry-content {
	display: none;
}
  • Unknown's avatar
    goodhopesam · Member ·

    Hello Sacred Path,
    Your fixes worked perfectly… THANK YOU!
    And I actually used the “display: none version” as I was going to ask how to shorten the header picture anyway.

    My one problem is that I still need the page titles under the thumbnails in the grid outline but now the are hidden

    Also,
    Is it possible to move the main text on the page so it begins closer to the bottom of the header image?
    OR shorten the header image more?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @goodhope1blog,

    My one problem is that I still need the page titles under the thumbnails in the grid outline but now they are hidden

    On your About and Ministries pages, I’m seeing the child pages with the titles below the images and only the Read More button gone. Is this happening on a different page, or am I misunderstanding?

    Is it possible to move the main text on the page so it begins closer to the bottom of the header image?

    You can add the following to your custom CSS and and adjust the 60px margin as desired to lessen the space between the header and the content on grid template pages. 

    .page-template-grid-page #primary-header.has-background {
	margin-bottom: 60px;
}
  • Unknown's avatar
    goodhopesam · Member ·

    Hello Sacred Space,
    Thanks for your patience.
    Here’s the story so far.

    So, at 1st, I tried both…
    _______________________________________
    .page .entry-title, .page .entry-meta {
    visibility: hidden;
    }

    And

    .grid-item .entry-content {
    display: none;
    }
    _________________________________
    But that took off the page titles off the Grid thumbnails

    then I just did the…
    ________________________________
    .grid-item .entry-content {
    display: none;
    }
    _________________________________
    And am going to try taking off the page titles with code for the individual pages – which might won’t

    Also, is the code below the one that would get all the text on the main page closer to the header image? Because I tried it and I must have done something wrong because it didn’t work.
    .page-template-grid-page #primary-header.has-background {
    margin-bottom: 60px;
    }

  • Unknown's avatar
    thesacredpath · Member ·

    Also, is the code below the one that would get all the text on the main page closer to the header image? Because I tried it and I must have done something wrong because it didn’t work.

    That was only for the pages with the grid template. For the home page, there are two margins creating that whitespace between the content and image, one is the margin on the Welcome h1 header, and the other is bottom margin on the primary header image area. Add the following to your custom CSS and you can adjust the 40px value I have for the primary header to get the spacing you want. I’ve set the h1 top margin to 0 in the first rule. 

    .home .entry-content h1:first-of-type {
	margin-top: 0;
}
#primary-header.has-background {
	margin-bottom: 40px;
}
  • Unknown's avatar
    ammosher · Member ·

    Hi there,

    I’ve used the code here to remove the titles from each page. But now, I as well would like the white space to go.

    I used the last code you mentioned for the title page, but how would I make it happen for every page?

    Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @ammosher, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

    Please also include a link to the site that you are wanting help with.

  • The topic ‘Remove Page Titles Image Header & Read More buttons in Appetite’ is closed to new replies.