Rejigger heading proportions on Pilcrow (blog, not website)

• 

  brokeneye3 · Member · Oct 9, 2014 at 9:52 pm

  • Copy link
  • Add topic to favorites

  Hi, my blog is running the Pillcrow theme, and I’m a bit dissatisfied with the proportions of the various heading sizes. Heading 1 for article contents is much larger than the title for the article itself, which to me feels like a reversal of the way things ought to be. The Customize -> Fonts menu only let’s me change the size of all headings, while keeping them in proportion to one another.

  What I’d like to do is grow the article titles a bit, so that they’re slightly smaller than the Heading 1 style is now, and then shrink the Heading 1 style so it’s one size smaller than the new size of the article title (and in the process, shrink all the other Headings styles so they remain in proportion with Heading 1). I hope I explained that clearly enough.

  I’ve already installed Custom Design

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

• 

  thesacredpath · Member · Oct 10, 2014 at 3:11 am

  • Copy link

  These are the rules that control the size and styling of the entry content area headings:

  .entry-content h1 {
      color: #000;
      font-size: 56px;
      font-weight: bold;
  }
  .entry-content h2 {
      color: #000;
      font-size: 28px;
      line-height: 33px;
      margin: 0 0 10px;
      padding: 10px 0 0;
  }
  .entry-content h3 {
      color: #999;
      font-size: 21px;
      margin-bottom: 4px;
  }
  .entry-content h4 {
      background: none repeat scroll 0 0 #f5f5f5;
      border-bottom: 1px solid #ddd;
      display: inline;
      font-size: 11px;
      line-height: 24px;
      padding: 4px 6px;
      text-transform: uppercase;
  }
  .entry-content h5, .entry-content h6 {
      font-size: 12px;
      font-weight: bold;
  }
  .entry-content h6 {
      font-size: 10px;
  }

• 

  brokeneye3 · Member · Oct 10, 2014 at 3:36 am

  • Copy link

  And the post title?

• 

  thesacredpath · Member · Oct 10, 2014 at 5:15 am

  • Copy link

  For the post titles, here you go.

  .wf-active .entry-content h2 {
  font-size: 31px;
  }

  For page titles, you will need this.

  .wf-active .entry-title {
      font-size: 31px;
  }

• 

  brokeneye3 · Member · Oct 10, 2014 at 5:33 am

  • Copy link

  Alright. And then I just change the numbers around until they’re the size I want, right? I’m almost certain that’s what I’m supposed to do, but I’m not exactly an expert at CSS so I just want to be sure before I break something

• 

  thesacredpath · Member · Oct 10, 2014 at 5:51 am

  • Copy link

  You are exactly right. The numbers I have in the last two rules for post and page titles are what they are originally.

• 

  brokeneye3 · Member · Oct 10, 2014 at 6:27 am

  • Copy link

  I added the code you have me for the titles and suddenly changing the numbers in the code for the headings doesn’t do anything. I’m pretty sure that’s not supposed to happen.

• 

  thesacredpath · Member · Oct 10, 2014 at 10:57 pm

  • Copy link

  Hi there, which aren’t working? The post and page titles seem to be sized to what you have entered.

  If it’s the content area h tags, try constructing your selectors similar to the following:
  .wf-active .entry-content h1

• 

  brokeneye3 · Member · Oct 10, 2014 at 11:00 pm

  • Copy link

  It’s the headings that aren’t working (I believe I mentioned that). The headings have stopped changing sizes in response to changing numbers.

  This problem began when I added the CSS for the post and page titles, which I don’t think is supposed to have any effect on the headings.

• 

  brokeneye3 · Member · Oct 13, 2014 at 10:36 am

  • Copy link

  Any ideas?

• 

  hallluke · Member · Oct 13, 2014 at 11:54 am

  • Copy link

  As mentioned you should just be able to add .wf-active before your existing header rules and they should all start working. As an example your h1 element rule would be changed to:

  .wf-active .entry-content h1 {
    color:#000;
    font-size:40px;
    font-weight:700;
  }

• 

  brokeneye3 · Member · Oct 14, 2014 at 1:17 am

  • Copy link

  Ah, that works. Thank you.

  Also: The page title and H2 now both start with “.wf-active .entry-content h2”. That won’t cause any problems

• 

  thesacredpath · Member · Oct 14, 2014 at 9:15 pm

  • Copy link

  This targets the h1 heading within the post content
  `.wf-active .entry-content h1

  This targets the titles of posts and pages.
  .wf-active .entry-title