Josh Tha CreativeOne
Reputation: 377
Moving Inline CSS to External Style Sheet
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.
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.
what I put right before the
<LINK REL=StyleSheet HREF="http://itsnotch.com/tumblr/files/gurucss.css" TYPE="text/css">
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?
Here is all of the code for the layout
{block:Description}{/block:Description}
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#d7a769"/>
<meta name="color:Title" content="#444"/>
<meta name="color:Description" content="#666"/>
<meta name="color:Post Title" content="#c00"/>
<meta name="color:Text" content="#444"/>
<meta name="color:Inline Link" content="#c00"/>
<meta name="color:Quote" content="#666"/>
<meta name="color:Quote Source" content="#444"/>
<meta name="color:Link Post" content="#c00"/>
<meta name="color:Conversation Background" content="#f8f8f8"/>
<meta name="color:Conversation Border" content="#ddd"/>
<meta name="color:Conversation Text" content="#444"/>
<meta name="color:Conversation Label" content="#111"/>
<meta name="color:Photo Border" content="#eee"/>
<meta name="color:Date" content="#fff"/>
<meta name="color:Date Background" content="#ccc"/>
<!-- END DEFAULT COLORS -->
<!-- DEFAULT SETTINGS -->
<meta name="image:Background" content="http://assets.tumblr.com/images/x.gif" />
<meta name="font:Title" content="Arial" />
<meta name="font:Body" content="Lucida Sans" />
<meta name="text:Disqus Shortname" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<meta name="viewport" content="width=775"/> <!-- iPhone -->
<style type="text/css">
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}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.post div.labels {
right: 450px;
}
</style>
<![endif]-->
</head>
<body>
<div id="content">
<h1><a href="/"><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_Banner.jpg" border "0" /></a></h1>
<div id="description">
<div>
<div id="search">
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form>
</div>
{Description}
<p id="nav_container">
<a href="/archive" id="archive_link">Archive</a>
<span class="dim">/</span>
<a href="{RSS}">RSS</a>
</p>
</div>
</div>
{block:SearchPage}
<div id="searchresultcount">
<p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
</div>
{/block:SearchPage}
{block:Posts}
<div class="post">
<div class="labels">
{block:NewDayDate}
<div class="date"><a href="{Permalink}">{Month} {DayOfMonth}</a></div>
{/block:NewDayDate}
{block:SameDayDate}
<div class="date"><a href="{Permalink}">+</a></div>
{/block:SameDayDate}
</div>
{block:Regular}
<div class="regular">
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
</div>
{/block:Regular}
{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Quote}
<div class="quote">
<span class="quote">
<big class="quote">“</big> {Quote}
</span>
{block:Source}<span class="source">{Source}</span>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="link">
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}
<span class="description">{Description}</span>
{/block:Description}
</div>
{/block:Link}
{block:Conversation}
<div class="conversation">
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<ul>
{block:Lines}
<li>
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}
{block:Audio}
<div class="audio">
{AudioPlayerGrey}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class="video">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
</div>
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
<div style="text-align: right; margin-top: 5px">
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
{/block:Permalink}
{/block:IfDisqusShortname}
{/block:Posts}
<div id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">« Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next »</a>
{/block:NextPage}
</div>
</div>
{block:IfDisqusShortname}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</body>
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.
Upvotes: 1
Views: 9051
Answers (3)
Josh Tha CreativeOne
Reputation: 377
I figured out what the problem was. The idiot who programmed this used meta shortcode for the colors and then styled with them. This was used for tumblr newbies to be able to change the color of the fonts and etc....
I have decided to put the background on a different stylesheet and leave everything inside the html code. I could (probably should) re-write the code. But I don't feel like it. (maybe later).
Hopefully, now I can get this java code to work on the page
<SCRIPT LANGUAGE="JavaScript">
Begin function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 20)
display = "http://itsnotch.com/tumblr/files/nighttime.css";
else if (thehour > 7)
display = "http://itsnotch.com/tumblr/files/daytime.css";
else
display = "http://itsnotch.com/tumblr/files/nighttime.css";
var css = '';
document.write(css);//
}
</script>
<script language="javascript">getCSS();</script>
So far..... no good :-/
Upvotes: 0
Karlgoldstraw
Reputation: 628
What's happening here is that your HTML is using smarty tags of some kind to draw in data from the Tumblr CMS (forgive me i've never used Tumblr) but that's what these are:
{block:SearchPage}{/block:SearchPage}
So don't remove them! Or data won't be pulled in and your site won't function!
Next, if you can, remove all the inline CSS and put this code into your External stylesheet:
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: Lucida Sans;
}
#content {
width:850px;
margin: auto;
margin-top: -44px;
padding: 15px;
background-color: #d7a769;
position: relative;
}
a {
color:#c00;
}
h1 {
padding: 30px 0px 50px 0px;
margin: 0px;
text-align: center;
font: Bold 55px Arial;
letter-spacing: -2px;
line-height: 50px;
}
h1 a {
color: #444;
text-decoration: none;
}
#description {
position: absolute;
left:-189px;
top: 150px;
}
#description div {
font: normal 18px Lucida Sans;
line-height: 20px;
width:150px;
color:#666;
}
#description div#search {
text-align: left;
}
#description div a {
color: #666;
}
#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: #ccc;
white-space: nowrap;
font: Normal 20px Lucida Sans;
letter-spacing: -1px;
color:#fff;
display: inline;
padding: 3px 5px 0px 5px;
line-height: 20px;
}
.post div.date a {
color:#fff;
text-decoration: none;
}
.post img {
max-width: 100%;
}
.post h2 {
font-size:18px;
font-weight: Bold;
color:#c00;
letter-spacing: -1px;
margin: 0px 0px 10px 0px;
}
.post h2 a {
color:#c00;
text-decoration: none;
}
/* Regular Post */
.post .regular {
font-size:12px;
color:#444;
line-height: 17px;
}
.post .regular blockquote {
font-style: italic;
}
/* Photo Post */
.post .photo img {
border: solid 10px #eee;
}
.post .photo div.caption {
font-size:11px;
color:#444;
margin-top: 5px;
}
.post .photo div.caption a {
color:#444;
}
/* Quote Post */
.post .quote span.quote {
font: Bold 28px Lucida Sans;
letter-spacing: -1px;
color:#666;
}
.post .quote span.quote a {
color:#666;
}
.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:#444;
letter-spacing: -1px;
}
.post .quote span.source a {
color:#444;
}
/* Link Post */
.post .link a.link {
font: Bold 20px Lucida Sans;
letter-spacing: -1px;
color:#c00;
}
.post .link span.description {
font-size: 13px;
font-weight: normal;
letter-spacing: -1px;
}
/* Conversation Post */
.post .conversation ul {
background-color: #f8f8f8;
list-style-type: none;
margin: 0px;
padding: 0px;
border-left: solid 5px #ddd;
}
.post .conversation ul li {
border-bottom:solid 1px #ddd;
font-size:12px;
padding: 4px 0px 4px 8px;
color:#444;
}
.post .conversation ul li span.label {
font-weight: bold;
color:#111;
}
/* Audio Post */
.post .audio div.caption {
font-size:11px;
color:#444;
margin-top: 5px;
}
.post .audio div.caption a {
color:#444;
}
/* Video Post */
.post .video {
width:400px;
margin: auto;
}
.post .video div.caption {
font-size:11px;
color:#444;
margin-top: 5px;
}
.post div.video div.caption a {
color:#444;
}
/* Footer */
#footer {
margin: 40px 0px 30px 0px;
text-align: center;
font-size:12px;
}
#footer a {
text-decoration: none;
color:#444;
}
#footer a:hover {
text-decoration: underline;
}
.query { font-weight: bold; }
What I did here was take the Variables shown in the Meta tags and then did a find/replace for each respective tag.
External CSS won't support the curly braces {} inside other braces so it won't validate (@Lekensteyn). But the confusing thing is that Smarty also uses these curly braces so that means it will work whilst inline, but not in an ALL CSS external .css file!
I hope that makes sense.
Paste in my modified CSS to your external file, delete the inline CSS if you can, and leave everything else in place!
Upvotes: 2
Juanma Guerrero
Reputation: 109
@Josh The reason why your stylesheet doesn't seem to work is because, as you said, the HTML has inline CSS code which will always have more weight than the stylesheet.
So, an easy solution that I can think of is to add "!important" after the values of your external stylesheet attributes. This will now give more weight to your stylesheet.
For example:
if your HTML has:
<p style="color:red;">hello world</p>
and your stylesheet has:
p { color:blue; }
your paragraphs will be red-coloured. But if you add the "!important", i.e:
p { color:blue!important; }
Now the paragraphs will appear blue :)
Hope that fixes your problem!
Upvotes: 2
Related Questions
- How can I override inline styles with external CSS?
- CSS works inline but not in stylesheet
- How to change from inline CSS to external?
- Moving inline styles to external css
- Convert internal stylesheet to inline css
- Inline CSS Does Not Work When Transferred to External Stylesheet
- how to convert inline CSS into external CSS?
- Converting Inline style sheet to an external style sheet
- Target/override inline css from external css
- Can't move an inline style out to a style sheet?