title: CSS Customization in a Bookdown Document
body: <p>Bookdown's default styling of the control buttons in leaflet maps is not to my taste and I would like to change it. Specifically, I would like to remove the transparency of the control buttons in the top-right and make sure that the button images are correctly displayed.</p>
  
  <p>What it currently looks like:
  <a href="https://i.stack.imgur.com/S4Agc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S4Agc.png" alt="unwanted transparency in leaflet map in bookdown"></a></p>
  
  <p>What I want:
  <a href="https://i.stack.imgur.com/Mq89x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mq89x.png" alt="my desired styling"></a></p>
  
  <p><strong>EDIT 1:</strong> A live version of this document can be found <a href="https://tiernanmartin.github.io/shared-docs/2016/bookdown-problem-01/_book/leaflet-map.html#problem" rel="nofollow noreferrer">here</a>.</p>
  
  <p>After checking out the source, it seems that the css styling responsible for the transparency and missing image is:</p>
  
  <pre><code>.book .book-body .page-wrapper .page-inner section.normal a {
      color: #4183c4;
      text-decoration: none;
      background: 0 0;        &lt;-- this line
  }
  </code></pre>
  
  <p>This comes from the css file in <code>libs/gitbook-2.6.7/css/style.css:9</code> and <code>libs/gitbook-2.6.7/css/style.css:16</code>.</p>
  
  <p>Two questions on which I'd like some advice:</p>
  
  <ul>
  <li>What css file should bookdown users edit to customize their book's appearance? [<strong>EDIT 2:</strong> answer: <code>./css/style.css</code>]</li>
  <li>What specific css command is needed to stop the image full screen button image from disappearing?</li>
  </ul>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT 2:</strong> Following the suggestion provided in <a href="https://stackoverflow.com/a/40384491/5170276">this answer</a>, I was able to adjust the <code>background-color</code> of the control buttons. So that solves the transparency issue. I still can't seem to get the full screen button image to show - I've tried setting <code>background-image: initial;</code> but that doesn't change it. Suggestions are welcome. </p>