Larger heading within post. Code help please!!

  • Author
  • #775344


    Hi. I’m hoping someone may be able to help me.
    I have TWO recipes per post, and need to make the headings larger than the bodycopy. I don’t mean the actual post heading, which is of course a separate entity in WP.
    This is one of my headings. Each recipe title features a number in brackets before it, as here:
    The heading is then followed by the recipe ingredients.
    This is the html, as coded by WordPress:
    <span style=”color: #808000;”>[1]</span><span style=”color: #808000;”> PORK and PISTACHIO MEATLOAF</span>
    I paid for the Custom-design upgrade; but I have no comprehension of html or CSS; and have spent literally hours trying to get my head around it. My problem is that for the life of me; I’m unsure what code to add to make this heading a LARGER font size than the rest of the bodycopy (ie. the rest of the recipe). The drop-down menus supplied with ‘Heading 1, Heading 2’ etc. don’t seem to work, not even with unformatted text. I guess CSS styles need to be applied to access these? Is there a simple html code I could add to each of my headings? I figure it needs to say <font size: bla bla> somewhere within the other coding, but I’m not sure where to put it; ie. Before the colour? I have seen font sizes variously referred to as Size: 5pix, Size 3; Size 1em… What is the protocol for WordPress? Help please!! Thanking you SO much in advance. FYI, my body text is FF Basic Gothic; at -2 size (so recipe headings would need to be larger than that). My theme is Twenty Eleven.


    1) To display code here, you need to paste it between backticks (see below reply field if you’re not sure what backticks are).

    2) Some of the tools of the visual editor are very limited and don’t always produce the right results. The span tag is for isolated characters, words or phrases inside a paragraph, while a heading is a complete paragraph. I understand you want it larger size as well as bold and colored. The HTML should be:
    <p style="font-size:120%;font-weight:bold;color:#808000;">HEADING HERE</p>
    Change the percentage to adjust the size.

    3) But if you want the same style in all your posts, then you’ll style your headings once for all in the CSS editor instead.

    4) “my body text is FF Basic Gothic; at -2 size”. What does that mean? How exactly have you applied this? Are you copypasting from another source such as Word? Please go to Settings>Privacy and temporarily switch to the middle option so we can see your blog and its sourcecode.


    Ah sorry: re no.4, you mean one of the Typekit fonts?



    Thank you SO much. I can’t wait to try this later! Yes, I’m using Typekit fonts, through the Custom Design upgrade. Thanks again. Very appreciative.



    I have flagged this thread so it gets move to the CSS forum for you. Do be aware that the Volunteer who regularly helps with CSS may want to actually view the blog in order to help you.



    Thankyou panaghiotisadam very much! It worked, and I’m rapt!

The topic ‘Larger heading within post. Code help please!!’ is closed to new replies.