How to customise CSS for Markdown headings

iangreig · Member · Sep 12, 2014 at 7:57 pm
Copy link

Add topic to favorites
Can anyone help me with some sample CSS code for headings one through six, quotation and paragraph — to inject in the CSS customisation option?

I use Markdown for other projects and want to convert to posting in Markdown.

No problem in that, except that at present I rely on inserting span styles to get the differential size and weight of the headings right. I usually post from MarsEdit. I am attempting to work to a house style and modifying Blogum to conform.

Some sample code e.g. all 16px Arial, black would be great for starters. I can make minor changes without falling into a hole…

TIA, IanG

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 12, 2014 at 8:32 pm
Copy link
Hi there, I see you have markdown enabled at Settings > Writing, and just for reference, here is our Markdown Quick Reference guide.

When you write in Markdown, it is converted into HTML in your posts and pages when they are published. Is what you are wanting to do is to establish set styles that are different from the theme original settings?
iangreig · Member · Sep 12, 2014 at 9:07 pm
Copy link
Is what you are wanting to do is to establish set styles that are different from the theme original settings?

That’s exactly right. I want to inject CSS, using the Customise CSS option, to set H1 to H6 etc and body text.

For example, the body text needs to be 16px Arial; sanserif and the H1 heading 24px; strong and H2 20px; regular etc
thesacredpath · Member · Sep 12, 2014 at 9:28 pm
Copy link
Ok, given you have used span tags and such in the content, it will override the following (stuff specified in the HTML always takes precedence). You may want to create a temporary dummy page to work with which has no span tags with styling in it so that you can check things. The below should cover all the content within pages and posts.
```
.post-content p, .post-content li, .post-content dd, .post-content dt, .post-content pre, .post-content address, .post-content div, .post-content kbd, .post-content tt, .post-content var {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #000;
}
```
For the header tags, the first rule below sets the general common heading element styles and the remainder allows you to set the size. You can add additional declarations to them if you need it, such as to set different bottom margins on the various headings.
```
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5 {
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: 15px;
}
.post-content h1 {
    font-size: 24px;
}
.post-content h2 {
    font-size: 18px;
}
.post-content h3 {
    font-size: 16px;
}
.post-content h4 {
    font-size: 14px;
}
.post-content h5 {
    font-size: 13px;
}
```
As you notice, I’ve included a couple extra fonts in the declarations. This is called a font stack. If the first font isn’t available on the user’s computer, then the second will be used. The third, sans-serif, is built into the browsers. It is always good to include more than one font so that you can have more control over how things will look so the browser doesn’t immediately use its built-in fonts.
thesacredpath · Member · Sep 12, 2014 at 9:29 pm
Copy link
By the way, I worked all this out off of the Blogum demo site.
iangreig · Member · Sep 12, 2014 at 10:07 pm
Copy link
That’s very helpful — you have given me the class .post-content which was the bit I needed to know. Enough here for me to experiment and tweak – many thanks. I understand about the font stack.

–IanG
thesacredpath · Member · Sep 12, 2014 at 10:29 pm
Copy link
Awesome Ian, and you are welcome. If you have additional questions or run into problems, just let us know.
iangreig · Member · Sep 14, 2014 at 10:47 pm
Copy link
Well, I do have an additional question. I’ve inserted the CSS customisation, I have the Markdown preference set in WordPress and I have posted (as it happens from MarsEdit). However, the Markdown hasn’t rendered, there fonts are a mixture and the heading and body text sizes have reverted to the default of the theme. Please show me what I’ve missed…
iangreig · Member · Sep 16, 2014 at 11:25 am
Copy link
Any possibility of a look at the html of my post for September 15 on
http://www.iangreig.wordpress.com
and give me an idea on why the CSS and Markdown isn’t working?

I have had to revert to using span styles…

TIA, IanG
hallluke · Member · Sep 16, 2014 at 12:28 pm
Copy link
Hi Ian,

I’m not a markdown export so unfortunately I can’t help you out much with your issue so I’m just posting to let you know that it is the WordPress annual company meet-up this week so responses might be a bit slower than normal. I’ve flagged the thread though, so hopefully someone will get back to you soon!
thesacredpath · Member · Sep 16, 2014 at 8:44 pm
Copy link
@iangreig, I’ll try and run down our Markdown dev and talk with him about this. Not sure why it is not recognizing stuff.
iangreig · Member · Sep 16, 2014 at 9:37 pm
Copy link
Nothing obvious from the CSS then?
Thank you for following this up. –IanG
iangreig · Member · Sep 18, 2014 at 7:49 am
Copy link
@hallluke – thanks for flagging the thread
iangreig · Member · Sep 23, 2014 at 9:34 am
Copy link
@thesacredpath You wrote on Sept 16

@iangreig, I’ll try and run down our Markdown dev and talk with him about this. Not sure why it is not recognizing stuff.

Any further wisdom on this? I have had to go back to inserting span tags….
designsimply · Member · Oct 6, 2014 at 4:57 pm
Copy link
Mars Edit is a third party app, but you should be able to use Markdown in it without any problems.

To help test, I downloaded and installed the trial version of MarsEdit 3.6.5 for Mac. I found that if I check the setting for Preferences > Editor > Default editing mode > HTML Text, then it works for me. If I used the Rich text option, then it didn’t work. Please check to make sure you are using the HTML Text option when writing Markdown using Mars Edit.

Also, just a side note, but you shouldn’t need to write extra span tags regardless of whether or not you are using Markdown. If you write content with Mars Edit without using Markdown (i.e. the Rich Text option) and you add a heading using the h1 HTML tag, then any CSS you have applied to the h1 tag such as the one in thesacredpath’s example above that sets the font size to 24px should work. No Markdown required. Getting rid of extra span tags is a better idea in the long run too because it gives you more control to work with custom CSS down the line. Anyway, that’s just a side note and the Markdown should also work if you’re writing in the HTML text editing mode, so give that a try if you weren’t already doing it before.

No items found.