WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
[resolved] Making h1 the same size as the page header (12 posts)

  1. Michael Broder
    Member
    Posted 8 months ago #

    I've suppressed the entry header on a specific page with this bit of css:

    .page-id-91 .entry-header
    {
    display: none;
    }

    Now I want the h1 content headers on that page to have the same style as the entry header has on other pages. What change(s) do I need to add to the css above to make that happen?

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 8 months ago #

    Could you link a particular example of the headers that don't have the right style and then an example of the headers that do? Link to them if you can.

  3. Michael Broder
    Member
    Posted 8 months ago #

    Sure, Andrew.

    Here's a link to a page with a standard entry header displayed:
    http://www.deweylearn.com/our-philosophy/

    Here's a link to the page where I suppressed the standard entry header and the headers see are the h1 style for pages:
    http://www.deweylearn.com/products/

    Thanks for your help.

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 8 months ago #

    In your Child Theme style.css file add this:

    .entry-title,
    h1 {
     font-size: 48px;
     margin: 33px 0;
    }
  5. Michael Broder
    Member
    Posted 8 months ago #


  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 8 months ago #

    To clarify, can you identify a page that doesn't have the right style and then a page that does?

  7. Michael Broder
    Member
    Posted 8 months ago #

    Sure. I'm not making myself clear.

    I want h1 on this page and this page only:
    http://www.deweylearn.com/products/

    To match the entry header on all the other pages, for example, on this page:
    http://www.deweylearn.com/our-philosophy/

    So I want to ADD properties to this bit of css:

    .page-id-91 .entry-header
    {
    display: none;
    }

    that will make the headers on this page (.page-id-91) look like the headers on the other pages.

    Thanks.

  8. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 8 months ago #

    So I want to ADD properties to this bit of css

    How come? That element is hidden from the page so any styling you add to it won't be shown.

  9. Michael Broder
    Member
    Posted 8 months ago #

    Haha! I know I'm being really confusing--I knew you would say that!!

    I know that element is suppressed. That's the "entry-header" that gives the title of the page. That's "Products," and I don't want that displayed.

    Then, you've got body copy, which includes several headers. Right now, those headers are 48px. I want them to be lighter, like the entry headers that are NOT suppressed.

    I think what I'm trying to do is make the h1 on pages be 21pt. But I may be wrong and I'm still trying to hunt down in the parent theme css the exact place where those headers are styled.

    Does that make more sense? I'm sorry for the confusion.

  10. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 8 months ago #

    Try this instead:

    .page-id-91 .entry-content h1 {
     font-weight: normal;
     margin: 0 0 5px;
    }
  11. Michael Broder
    Member
    Posted 8 months ago #

    That did it. Thanks!

  12. Michael Broder
    Member
    Posted 8 months ago #

    Just as an FYI for anyone following this, the complete snippet of CSS now read:

    .page-id-91
    .entry-header
    {
    display: none;
    }
    .entry-content h1 {
    font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 0;
    }

    If there is anything in the above that could be more elegant, please let me know. Haven't done CSS in a while.

    MHB

Reply

You must log in to post.

About this Theme

About this Topic

Tags