search

picocms / Pico

Pico is a stupidly simple, blazing fast, flat file CMS.
http://picocms.org/
MIT License
3.83k stars 614 forks source link

How to do CSS in PicoCMS? #354

Closed leegold-zz closed 8 years ago

leegold-zz commented 8 years ago

Hi,

I'm playing with markdown editors and I'm not getting how to add CSS to the markdown. If I can add HTML to markdown then why does CSS

seem so problematic.

In picocms how do I CSS? I need full CSS abilities else the markdown itself will be littered with html code which defeats the purpose. I'm new to all this...Thanks

mayamcdougall commented 8 years ago

A Markdown editor will have it's own styles, unrelated to your markdown, that it uses to "preview" the file. While you can usually customize the styles of your editor, they will be unrelated to how the file really looks on your Pico site. It's also possible that if you're trying to add styles to some HTML in your Markdown editor, it may not support that.

The styles for your Pico content should be part of your theme, and unrelated to the Markdown. Markdown just provides a quick, readable way to create content. If you need to build a more complex/unique page, you'll probably have to use some HTML. At least for the complex parts. And you could switch back to Markdown for any simpler parts.

If you're talking about site-wide styles, your best bet would be to link a stylesheet in your theme.

If you're still using the default theme, add something like:

<link rel="stylesheet" href="{{ theme_url }}/personal.css" type="text/css" />

to themes/default/index.twig, then put your styles in a personal.css file in that same folder.

(Of course, there's nothing preventing you from editing the existing style.css file either.)

Your Markdown is converted to HTML when the page is rendered, so just add styles to the corresponding HTML elements.

If you need to add some specific, not site-wide, styles to an element in your Markdown, you'll have to use HTML.

For example, if you had an image, and you wanted that one image to float: right, but no others anywhere on your site, you could use HTML. It would look something like:

Some markdown text.

## A Markdown Heading

A paragraph with an image that floats.  <img src="path/to/image.jpg" style="float: right;">

Another paragraph.

This, of course, gets quite tedious, so I'd only recommend it for "one-off" styles that you don't want to make a global rule for.

There are other ways to accomplish this as well (such as adding an id or class using Markdown Extra, but I figured I'd keep it as simple as possible.

Markdown is just for your page content. You can think of it like this:

Hope this helps. :smiley: