title: R shiny mainPanel display style and font
body: <p>I'm learning shiny apps and have some basic questions about tweaking the layout, particularly style and font. I'd be grateful for pointers or explicit answers, thanks!</p>
  
  <p>Consider a basic input-output app: the user inputs data in the sidebarPanel and it reactively outputs a result in the mainPanel. </p>
  
  <p><img src="https://i.stack.imgur.com/APObZ.png" alt="enter image description here"></p>
  
  <ol>
  <li><p>How could I format the output table in the mainPanel to look more like the sidebarPanel? say a rectangle of about the same size with a colored background (maybe another color) and the data appearing in a box of similar size.</p></li>
  <li><p>How can I control the font type, font size, and font size inside the panels?</p></li>
  </ol>
  
  <p>As you can see from the code (c.f. runGist details a couple of lines below), I have been successful in customizing the size of the numericInput box in the sidebarPanel, but I have not been able to control the font styles (is my tag$style code misplaced?).</p>
  
  <p>More importantly for aesthetic purposes, I couldn't work out how to format the mainPanel to make it look like the sidebarPanel. Mostly I modified examples from the shiny website, but obviously I missed out on some important things.</p>
  
  <p>Edit 1: Following Scott Chamberlain's suggestion, I have copied the server.R and ui.R files on github:</p>
  
  <pre><code>library("shiny") 
  runGist("gist.github.com/annoporci/7313856") 
  </code></pre>
  
  <p>Edit 2: Scott suggested using Chrome/Firefox "Inspect Element" (right click on body of html page, other browsers may have the same function). Below is a screenshot:</p>
  
  <p><strong>Inspect Element</strong></p>
  
  <p><img src="https://i.stack.imgur.com/xYlCY.png" alt="enter image description here"></p>
  
  <p>Scott's suggestion to use the "Inspect Element" tool proved very fruitful.</p>
  
  <p>Here is what I learned (if I'm not mistaken):</p>
  
  <ul>
  <li><code>container-fluid</code> and <code>row-fluid</code> control the overall container.</li>
  <li><code>span12</code> controls the <code>headerPanel</code> </li>
  <li><code>span4</code> controls the <code>sidebarPanel</code></li>
  <li><code>span8</code> controls the <code>mainPanel</code></li>
  <li><code>shiny-bound-input</code> is for the input side </li>
  <li><code>shiny-bound-output</code> and <code>shiny-html-output</code>(both appear to be valid) are for the output side</li>
  </ul>
  
  <p>Based on these findings, I placed the HTML styles in the mainPanel, because it seemed like an obvious place, but it appears to work also inside the sidebarPanel. It would be more intuitive (to me) to place it immediately inside the pageWithSidebar(), but that didn't work. </p>
  
  <p>Here is the edited shiny:</p>
  
  <pre><code>runGist("https://gist.github.com/annoporci/7346772")
  </code></pre>
  
  <p>Here are the HTML styles:</p>
  
  <pre><code>  HTML('&lt;style type="text/css"&gt;
      .row-fluid { width: 50%; }  
      .well { background-color: #99CCFF; }
      .shiny-html-output { font-size: 20px; line-height: 21px; }
    &lt;/style&gt;')
  </code></pre>
  
  <p>I selected 50% for the overall container width, to keep it small.</p>
  
  <p>I selected the same color for the sidebarPanel and mainPanel.</p>
  
  <p>I selected a larger font for the output, which is not pretty here but makes sense in my real-life app. And besides I'm experimenting more than anything.</p>
  
  <p>I selected a line-height of 21px rather than the default 20px just to tweak the height of the output box to be the same as the input box. Again, an experiment. </p>
  
  <p>I also changed the display style in server.R, namely</p>
  
  <pre><code>output$myResults &lt;- renderText({
    r &lt;- myFunction(input$myinput)
    c("My Output:","&lt;br&gt;&lt;br&gt;",r)
  })
  </code></pre>
  
  <p>This is because I wanted to have the result displayed below the words "My Output". By trial and error, I discovered that I could squeeze strings in a vector <code>c()</code> with <code>&lt;br&gt;&lt;br&gt;</code> as a separator to force a line break. I'd be shocked if this were the recommended approach, so please chime in if you know the correct way of doing this. </p>
  
  <p><strong>Follow-up Questions of lesser importance</strong>:</p>
  
  <p>I'll see if I can find a way to have my output result appear in a white-colored box similar to the input number in the sidebarPanel. Any suggestions welcome.</p>
  
  <p>Might it be feasible to gather all html modifications in the same, separate file to be stored together with server.R and ui.R ?</p>
  
  <p>I'll select Scott's answer because he has helped discover enough to get my output just about the way I wanted it. But please do edit if you see errors or imprecisions in my description above.</p>