Home → Questions →

Background for Specific Elements

• Edit

Michael Hyatt

28 Jun, 2013 04:52 PM

I need to be able to style a text element inside a gray box. Here’s an example (see #1 and #2):

http://www.screencast.com/t/oWqGuSPu

I don’t know MultiMarkdown well enough to see if there is an markup code I could use, so I just created a custom style sheet and created this class:

.setoff { background:#eeeeee; font-size:90%; line-height:140%; margin-left:12pt; margin-right:12pt; padding: 6pt; }

Then, inside my markdown document, it looks like this:

This is where you state what your purpose is for each account. Again, using my Health account as an example, I say this:

My purpose is to maintain and care for the temple God has given me.

The Statement of Purpose for my Friends account is this:

My purpose is to befriend and love a few people well who will in turn love, challenge, and hold me accountable.

The problem is when I try to put a bulleted list inside the gray box. It wraps all the paragraphs together (see #3 in the screenshot above).

There’s probably a simple CSS fix for this, but I can’t figure it out.

Can you help? Thanks.

1. Support Staff 1 Posted by Brett on 28 Jun, 2013 04:59 PM

   

   Use blockquotes:

   > This is my blockquoted text

   Then just style blockquotes as needed.

   -Brett

   • Edit

2. 2 Posted by Michael Hyatt on 28 Jun, 2013 05:16 PM

   

   I’m already using blockquotes for standard quotes. I suppose I could nest them. Hmmm.

   • Edit

3. 3 Posted by Michael Hyatt on 28 Jun, 2013 05:18 PM

   

   The problem is getting the bullets inside the gray box. The line element seems to override the gray box wrapper, whether it’s in a blockquote or a class.

   • Edit

4. Support Staff 4 Posted by Brett on 28 Jun, 2013 05:23 PM

   

   What's a line element?

   You only have so many elements available in Markdown, and classes aren't an option without adding the additional HTML. You might look into Kramdown as a custom processor. It's pretty easy to install and allows you to add classes to block elements. Still, though, if you need multiple elements within a container, you'll have to wrap it in a div.

   -Brett

   • Edit

5. 5 Posted by Michael Hyatt on 28 Jun, 2013 05:38 PM

   

   Sorry, I was referring to a line element in HTML: <li>

   The problem is that even if I use a DIV (which is easy enough), bulleted lists get wrapped inside of them. That was what I was trying to show in #3 on the screenshot.

   Thanks for your help.

   • Edit

6. Support Staff 6 Posted by Brett on 28 Jun, 2013 05:54 PM

   

   Ah, I get it. "li" stands for list item, just for clarity :).

   Turn on the option in behavior to render HTML as Markdown.

   -Brett

   • Edit