title: Moving Inline CSS to External Style Sheet
body: <p>I'm doing modifications to a tumblr layout that has inline css code in it. What I plan on doing with the tumblr is creating a time-sensitive css switch using a little javascript code that will switch the themes between day and night. This requires me to have an external stylesheet so that the script can switch between the two stylesheets.</p>
  
  <p>I copied the inline code to an external css file and uploaded it. Then I did a css link ref to the file, but it doesn't seem to work.</p>
  
  <p>what I put right before the </p>
  
  <pre><code>&lt;LINK REL=StyleSheet HREF="http://itsnotch.com/tumblr/files/gurucss.css" TYPE="text/css"&gt;
  </code></pre>
  
  <p>also, there is meta data for the the fonts, titles, date etc..  Could this be the reason why the link ref doesn't work? if so, can I used the meta data somehow in the css?</p>
  
  <p>Here is all of the code for the layout</p>
  
  <p>
  
      
          {block:Description}{/block:Description}</p>
  
  <pre><code>    &lt;!-- DEFAULT COLORS --&gt;
      &lt;meta name="color:Background" content="#d7a769"/&gt;
      &lt;meta name="color:Title" content="#444"/&gt;
      &lt;meta name="color:Description" content="#666"/&gt;
      &lt;meta name="color:Post Title" content="#c00"/&gt;    
      &lt;meta name="color:Text" content="#444"/&gt;
      &lt;meta name="color:Inline Link" content="#c00"/&gt;
      &lt;meta name="color:Quote" content="#666"/&gt;
      &lt;meta name="color:Quote Source" content="#444"/&gt;
      &lt;meta name="color:Link Post" content="#c00"/&gt;
      &lt;meta name="color:Conversation Background" content="#f8f8f8"/&gt;
      &lt;meta name="color:Conversation Border" content="#ddd"/&gt;
      &lt;meta name="color:Conversation Text" content="#444"/&gt;
      &lt;meta name="color:Conversation Label" content="#111"/&gt;
      &lt;meta name="color:Photo Border" content="#eee"/&gt;
      &lt;meta name="color:Date" content="#fff"/&gt;
      &lt;meta name="color:Date Background" content="#ccc"/&gt;
      &lt;!-- END DEFAULT COLORS --&gt;
  
  
      &lt;!-- DEFAULT SETTINGS --&gt;
      &lt;meta name="image:Background" content="http://assets.tumblr.com/images/x.gif" /&gt;
      &lt;meta name="font:Title" content="Arial" /&gt;
      &lt;meta name="font:Body" content="Lucida Sans" /&gt;
      &lt;meta name="text:Disqus Shortname" content="" /&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}&lt;/title&gt;
      &lt;link rel="icon" href="{Favicon}"/&gt;
      &lt;link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/&gt;
      &lt;meta name="viewport" content="width=775"/&gt; &lt;!-- iPhone --&gt;
  
      &lt;style type="text/css"&gt;
          body {
              margin:           0px;
              background-image: url('http://itsnotch.com/tumblr/images/nighttime_bg.jpg');
              background-repeat: repeat-x;
              background-attachment: fixed;
              background-position: top center;
              background-color:#b68e59;
  
              font-family:      {font:Body};
          }
  
          #content {
              width:            850px;
              margin:           auto;
              margin-top:       -44px;
              padding:          15px;
              background-color: {color:Content Background};
              position:         relative;
          }
  
          a {
              color:            {color:Inline Link};
          }
  
          h1 {
              padding:          30px 0px 50px 0px;
              margin:           0px;
              text-align:       center;
              font:             Bold 55px {font:Title};
              letter-spacing:   -2px;
              line-height:      50px;
          }
  
          h1 a {
              color:            {color:Title};
              text-decoration:  none;
          }
  
          #description {
              position:         absolute;
      left:        -189px;
              top:             150px;
          }
  
          #description div {
              font:             normal 18px {font:Body};
              line-height:      20px;
              width:            150px;
              color:            {color:Description};
          }
  
                      #description div#search {
                              text-align: left;
                      }
  
          #description div a {
              color:            {color:Description};
          }
  
          #description #nav_container {
              font-size: 13px;
              font-weight: bold;
          }
  
          #description #nav_container .dim {
              filter: alpha(opacity=50); 
              -moz-opacity: 0.5; 
              opacity: 0.5;
          }
  
                      #searchresultcount {
                          margin: 0 0 30px;
                          text-align: center;
                      }
  
          .post {
              position:         relative;
              margin-bottom:    40px;
          }
  
          .post div.labels {
              position:         absolute;
              right:            435px;
              text-align:       right;
              width:            150px;
          }
  
          .post div.date {
              background-color: {color:Date Background};
              white-space:      nowrap;
              font:             Normal 20px {font:Body};
              letter-spacing:   -1px;
              color:            {color:Date};
              display:          inline;
              padding:          3px 5px 0px 5px;
              line-height:      20px;
          }
  
          .post div.date a {
              color:            {color:Date};
              text-decoration:  none;
          }
  
          .post img {
            max-width: 100%;
          }
  
          .post h2 {
              font-size:        18px;
              font-weight:      Bold;
              color:            {color:Post Title};
              letter-spacing:   -1px;
              margin:           0px 0px 10px 0px;
          }
  
          .post h2 a {
              color:            {color:Post Title};
              text-decoration:  none;
          }
  
          /* Regular Post */
          .post .regular {
              font-size:        12px;
              color:            {color:Text};
              line-height:      17px;
          }
  
          .post .regular blockquote {
              font-style: italic;
          }
  
          /* Photo Post */
          .post .photo img {
              border:           solid 10px {color:Photo Border};
          }
  
          .post .photo div.caption {
              font-size:        11px;
              color:            {color:Text};
              margin-top:       5px;
          }
  
          .post .photo div.caption a {
              color:            {color:Text};
          }
  
          /* Quote Post */
          .post .quote span.quote {
              font:             Bold 28px {font:Body};
              letter-spacing:   -1px;
              color:            {color:Quote};
          }
  
          .post .quote span.quote a {
              color:            {color:Quote};
          }
  
          .post .quote span.quote big.quote {
              font:             Bold 60px Georgia, serif;
              line-height:      8px;
              vertical-align:   -20px;
          }
  
          .post .quote span.source {
              font-size:        16px;
              font-weight:      Bold;
              color:            {color:Quote Source};
              letter-spacing:   -1px;
          }
  
          .post .quote span.source a {
              color:            {color:Quote Source};
          }
  
          /* Link Post */
          .post .link a.link {
              font:             Bold 20px {font:Body};
              letter-spacing:   -1px;
              color:            {color:Link Post};
          }
  
          .post .link span.description {
              font-size: 13px;
              font-weight: normal;
              letter-spacing: -1px;
          }
  
          /* Conversation Post */
          .post .conversation ul {
              background-color: {color:Conversation Background};
              list-style-type:  none;
              margin:           0px;
              padding:          0px;
              border-left:      solid 5px {color:Conversation Border};
          }
  
          .post .conversation ul li {
              border-bottom:    solid 1px {color:Conversation Border};
              font-size:        12px;
              padding:          4px 0px 4px 8px;
              color:            {color:Conversation Text};
          }
  
          .post .conversation ul li span.label {
              font-weight:      bold;
              color:            {color:Conversation Label};
          }
  
          /* Audio Post */      
          .post .audio div.caption {
              font-size:        11px;
              color:            {color:Text};
              margin-top:       5px;
          }
  
          .post .audio div.caption a {
              color:            {color:Text};
          }
  
          /* Video Post */
          .post .video {
              width:            400px;
              margin:           auto;
          }
  
          .post .video div.caption {
              font-size:        11px;
              color:            {color:Text};
              margin-top:       5px;
          }
  
          .post div.video div.caption a {
              color:            {color:Text};
          }
  
          /* Footer */
          #footer {
              margin:           40px 0px 30px 0px;
              text-align:       center;
              font-size:        12px;
          }
  
          #footer a {
              text-decoration:  none;
              color:            {color:Text};
          }
  
          #footer a:hover {
              text-decoration:  underline;
          }
  
                      .query { font-weight: bold; }
  
          {CustomCSS}
      &lt;/style&gt;
  
      &lt;!--[if lt IE 7]&gt;
          &lt;style type="text/css"&gt;
              .post div.labels {
                  right: 450px;
              }
          &lt;/style&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;
          &lt;h1&gt;&lt;a href="/"&gt;&lt;img src="http://itsnotch.com/tumblr/images/NotchTheGuru_Banner.jpg" border "0" /&gt;&lt;/a&gt;&lt;/h1&gt;
  
          &lt;div id="description"&gt;
              &lt;div&gt;
                                      &lt;div id="search"&gt;
                                          &lt;form action="/search" method="get"&gt;
                                              &lt;input type="text" name="q" value="{SearchQuery}"/&gt;
                                              &lt;input type="submit" value="Search"/&gt;
                                          &lt;/form&gt;
                                      &lt;/div&gt;
  
                  {Description}
  
                  &lt;p id="nav_container"&gt;
                      &lt;a href="/archive" id="archive_link"&gt;Archive&lt;/a&gt;
                      &lt;span class="dim"&gt;/&lt;/span&gt;
                      &lt;a href="{RSS}"&gt;RSS&lt;/a&gt;
                  &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
                      {block:SearchPage}
                      &lt;div id="searchresultcount"&gt;
                          &lt;p&gt;Your search for &lt;span class="query"&gt;{SearchQuery}&lt;/span&gt; returned {SearchResultCount} result(s).&lt;/p&gt;
                      &lt;/div&gt;
                      {/block:SearchPage}
  
          {block:Posts}
              &lt;div class="post"&gt;
                  &lt;div class="labels"&gt;
                      {block:NewDayDate}
                          &lt;div class="date"&gt;&lt;a href="{Permalink}"&gt;{Month} {DayOfMonth}&lt;/a&gt;&lt;/div&gt;
                      {/block:NewDayDate}
  
                      {block:SameDayDate}
                          &lt;div class="date"&gt;&lt;a href="{Permalink}"&gt;+&lt;/a&gt;&lt;/div&gt;
                      {/block:SameDayDate}
                  &lt;/div&gt;
  
                  {block:Regular}
                      &lt;div class="regular"&gt;
                          {block:Title}&lt;h2&gt;&lt;a href="{Permalink}"&gt;{Title}&lt;/a&gt;&lt;/h2&gt;{/block:Title}
                          {Body}
                      &lt;/div&gt;
                  {/block:Regular}
  
                  {block:Photo}
                      &lt;div class="photo"&gt;
                          {LinkOpenTag}&lt;img src="{PhotoURL-400}" alt="{PhotoAlt}"/&gt;{LinkCloseTag}
                          {block:Caption}
                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                          {/block:Caption}
                      &lt;/div&gt;
                  {/block:Photo}
  
                  {block:Quote}
                      &lt;div class="quote"&gt;
                          &lt;span class="quote"&gt;
                              &lt;big class="quote"&gt;&amp;#147;&lt;/big&gt; {Quote}
                          &lt;/span&gt;
                          {block:Source}&lt;span class="source"&gt;{Source}&lt;/span&gt;{/block:Source}
                      &lt;/div&gt;
                  {/block:Quote}
  
                  {block:Link}
                      &lt;div class="link"&gt;
                          &lt;a href="{URL}" class="link" {Target}&gt;{Name}&lt;/a&gt;
                          {block:Description}
                              &lt;span class="description"&gt;{Description}&lt;/span&gt;
                          {/block:Description}
                      &lt;/div&gt;
                  {/block:Link}
  
                  {block:Conversation}
                      &lt;div class="conversation"&gt;
                          {block:Title}&lt;h2&gt;&lt;a href="{Permalink}"&gt;{Title}&lt;/a&gt;&lt;/h2&gt;{/block:Title}
                          &lt;ul&gt;
                              {block:Lines}
                                  &lt;li&gt;
                                      {block:Label}&lt;span class="label"&gt;{Label}&lt;/span&gt;{/block:Label}
                                      {Line}
                                  &lt;/li&gt;
                              {/block:Lines}
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  {/block:Conversation}
  
                  {block:Audio}
                      &lt;div class="audio"&gt;
                          {AudioPlayerGrey}
                          {block:Caption}
                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                          {/block:Caption}
                      &lt;/div&gt;
                  {/block:Audio}
  
                  {block:Video}
                      &lt;div class="video"&gt;
                          {Video-400}
                          {block:Caption}
                              &lt;div class="caption"&gt;{Caption}&lt;/div&gt;
                          {/block:Caption}
                      &lt;/div&gt;
                  {/block:Video}
              &lt;/div&gt;
  
              {block:IfDisqusShortname}
                  {block:Permalink}
                      &lt;div id="disqus_thread"&gt;&lt;/div&gt;
                      &lt;script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"&gt;&lt;/script&gt;
                      &lt;noscript&gt;&lt;a href="http://{text:Disqus Shortname}.disqus.com/?url=ref"&gt;View the discussion thread.&lt;/a&gt;&lt;/noscript&gt;
  
                      &lt;div style="text-align: right; margin-top: 5px"&gt;
                          &lt;a href="http://disqus.com" class="dsq-brlink"&gt;blog comments powered by &lt;span class="logo-disqus"&gt;Disqus&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  {/block:Permalink}
              {/block:IfDisqusShortname}
          {/block:Posts}
  
          &lt;div id="footer"&gt;
              {block:PreviousPage}
                  &lt;a href="{PreviousPage}"&gt;&amp;#171; Previous&lt;/a&gt; &amp;nbsp;&amp;nbsp;
              {/block:PreviousPage}
  
              {block:NextPage}
                  &lt;a href="{NextPage}"&gt;Next &amp;#187;&lt;/a&gt;
              {/block:NextPage}
          &lt;/div&gt;
      &lt;/div&gt;
  
      {block:IfDisqusShortname}
          &lt;script type="text/javascript"&gt;
              //&lt;![CDATA[
              (function() {
                  var links = document.getElementsByTagName('a');
                  var query = '?';
                  for(var i = 0; i &lt; links.length; i++) {
                      if(links[i].href.indexOf('#disqus_thread') &gt;= 0) {
                          query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&amp;';
                      }
                  }
                  document.write('&lt;script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"&gt;&lt;/' + 'script&gt;');
              })();
              //]]&gt;
          &lt;/script&gt;
      {/block:IfDisqusShortname}
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I took the part that was between the  tags just below the closing  and moved it to a separate file on my server. And then linked it using the link ref code above and it didn't work. So, i guess i'm doing something wrong.</p>