Not signed in (Sign In)

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

How do I: shaded backgrounds

Bottom of Page

1 to 14 of 14

  1.  
  1.  
    I see people posting things in shaded boxes and I was wondering how one does that. Can someone enlighten me? Thanks!
    [Just in case, what I mean is for example Anton Geraschenko's post in http://tea.mathoverflow.net/discussion/34/tag-mergerename-requests/#Item_0]
  2.  

    The blue backgrounds are for quotations:

    I see people posting things in shaded boxes and I was wondering how one does that. Can someone enlighten me?

    The yellow backgrounds are for code:

    I see people posting things in shaded boxes and I was wondering how one does that.
Can someone enlighten me?

    Both are achieved using standard Markdown syntax (pretty much the same as on the main MO site): for quotations, prepend with >, for code, indent by at least four spaces. For more on the syntax, take a look at the original documentation

    • CommentAuthorHarry Gindi
    • CommentTimeOct 18th 2010 edited
     

    Wait,

           Blah

    Nifty!

  4.  

    Yeah, inline code is broken on meta (it's a simple CSS fix ...).

  5.  

    @Andrew, want to tell me what to do?

  6.  

    Find the file vanilla.css and edit it. That's, in fact, the most annoying part because the file is "compacted" meaning that they took out all unnecessary whitespace - including line breaks! You can just replace it with vanilla.src.css from the src directory, or you can edit the vanilla.src.css, compactify it, and then replace vanilla.css with the compactified version. (I have a recollection of saying this before ...). Anyway, the bit you want to find is #Comments code. In there, there's a setting display: block;. Remove that. I also recommend making the white-space pre-wrap instead of pre.

  7.  

    Hmm. That seems to have broken things worse!

  8.  

    Okay, changed something else about a frame, and decreased the padding a little. Are we okay now?

  9.  

    Yes, better. But better still if you add something like #Comments pre code {…; display: block;} where … is the left border you took out of the declaration for code. So that inline code blocks will work like the non-inline ones used to:

    This is a sample inline block.
It is three lines long,
indented by four spaces and surrounded by blank lines in the markdown source.

    (@Andrew: pre-wrap must be CSS 3? I don't see anything about it in the CSS 2 spec. Later: Oh, never mind.)

  10.  

    Thanks Harald -- I've implemented that too. Anything else on CSS?

  11.  

    Sadly, the default Markdown installation on vanilla puts inline code in the pre block as well so adding the display: block to the pre environment has the same effect as it had on the code tag. I have a suspicion that I hacked Markdown to fix this. I'll take a look tomorrow.

  12.  

    @Scott: That's fine, unless you also want to also add

    #Comments pre code {padding: 8px 16px;}

    for visual consistency with blockquotes.

    @Andrew: Now you have me confused. The new CSS seems to work find, and I don't see any pre blocks surrounding inline code here?

  13.  

    Well, I'm pretty sure that when I looked at it in Firebug to see what to do then the inline code blocks were also wrapped in pre blocks. Either Scott's fixed that or I was seeing things. Anyway, looks great now.

  14.  

    Maybe you were seeing things, or maybe not. Meanwhile, the CSS seems to have reverted back to its previous state. Is some automatic process undoing Scott's changes? (Edit: Er, no, I guess my browser had cached an old vanilla.css. After I prodded it a bit, it works like it should.)

1 to 14 of 14

  1.  
Back to Discussions Top of Page