This is the real heart of the template – the colors, the
background pattern, the “color” that makes the template what it is. HTML script
gives it the red vibrancy of the background, and the same-ish color to the various
component parts (posts, bio, fonts for everything). I could go to settings and
template to change appearances – colors for fonts, colors for links, sizes for
everything – in mere seconds.
But what fun is that? I took a look at the heart and soul of
the blog.
This message came up as I clicked “Edit HTML”.
Apparently, they don’t want juveniles screwing up their hard
work and ending up with a blog that has been chopped to pieces. I tried
chopping it to pieces, actually.
I took out one, itty bitty little “>” sign,
and this is what my “Preview” showed me:
I took out one, itty bitty little “>” sign,
and this is what my “Preview” showed me:
The internet didn't know what to do with itself. It had a meltdown and couldn't show me anything.
After clearing changes, I took out the entire first section, which I identified as a distinct section because all the scripts started with “variable name” and "group description" in it. Here is the part I took out:
“/* Variable definitions
====================
<Variable
name="keycolor" description="Main Color"
type="color" default="#66bbdd"
value="#882222"/>
<Group
description="Page Text" selector="body">
<Variable
name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans,
sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica,
FreeSans, sans-serif"/>
<Variable
name="body.text.color" description="Text Color"
type="color" default="#222222"
value="#fff5ee"/>
</Group>
<Group
description="Backgrounds" selector=".body-fauxcolumns-outer">
<Variable
name="body.background.color" description="Outer Background"
type="color" default="#66bbdd"
value="#882222"/>
<Variable
name="content.background.color" description="Main
Background" type="color" default="#ffffff"
value="#882222"/>
<Variable
name="header.background.color" description="Header
Background" type="color" default="transparent"
value="transparent"/>
</Group>
<Group
description="Links" selector=".main-outer">
<Variable
name="link.color" description="Link Color"
type="color" default="#2288bb"
value="#ffffcc"/>
<Variable
name="link.visited.color" description="Visited Color"
type="color" default="#888888"
value="#ddbb99"/>
<Variable
name="link.hover.color" description="Hover Color"
type="color" default="#33aaff"
value="#ffffff"/>
</Group>
<Group
description="Blog Title" selector=".header h1">
<Variable
name="header.font" description="Font" type="font"
default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans,
sans-serif" value="normal normal 60px Georgia, Utopia, 'Palatino
Linotype', Palatino, serif"/>
<Variable
name="header.text.color" description="Title Color"
type="color" default="#3399bb" value="#ffffff"/>
</Group>
<Group
description="Blog Description" selector=".header
.description">
<Variable
name="description.text.color" description="Description
Color" type="color"
default="#777777"
value="#ffffff"/>
</Group>
<Group
description="Tabs Text" selector=".tabs-inner .widget li
a">
<Variable
name="tabs.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans,
sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica,
FreeSans, sans-serif"/>
<Variable
name="tabs.text.color" description="Text Color"
type="color" default="#999999"
value="#ffffcc"/>
<Variable
name="tabs.selected.text.color" description="Selected
Color" type="color" default="#000000"
value="#ffffff"/>
</Group>
<Group
description="Tabs Background" selector=".tabs-outer
.PageList">
<Variable
name="tabs.background.color" description="Background Color"
type="color" default="#f5f5f5"
value="#662222"/>
<Variable
name="tabs.selected.background.color" description="Selected
Color" type="color" default="#eeeeee"
value="#552222"/>
</Group>
<Group
description="Post Title" selector="h3.post-title, .comments
h4">
<Variable
name="post.title.font" description="Font"
type="font"
default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans,
sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica,
FreeSans, sans-serif"/>
</Group>
<Group
description="Date Header" selector=".date-header">
<Variable
name="date.header.color" description="Text Color"
type="color"
default="$(body.text.color)"
value="$(body.text.color)"/>
<Variable
name="date.header.background.color" description="Background
Color" type="color"
default="transparent" value="transparent"/>
</Group>
<Group
description="Post Footer" selector=".post-footer">
<Variable
name="post.footer.text.color" description="Text Color"
type="color" default="#666666"
value="#eeddcc"/>
<Variable
name="post.footer.background.color" description="Background
Color" type="color"
default="#f9f9f9" value="#772222"/>
<Variable
name="post.footer.border.color" description="Shadow Color"
type="color" default="#eeeeee"
value="transparent"/>
</Group>
<Group
description="Gadgets" selector="h2">
<Variable
name="widget.title.font" description="Title Font"
type="font"
default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans,
sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica,
FreeSans, sans-serif"/>
<Variable
name="widget.title.text.color" description="Title Color"
type="color" default="#000000"
value="#ffffff"/>
<Variable
name="widget.alternate.text.color" description="Alternate
Color" type="color" default="#999999"
value="#999999"/>
</Group>
<Group
description="Images" selector=".main-inner">
<Variable
name="image.background.color" description="Background
Color" type="color" default="#ffffff"
value="#ffffff"/>
<Variable
name="image.border.color" description="Border Color"
type="color" default="#eeeeee"
value="#660000"/>
<Variable
name="image.text.color" description="Caption Text Color"
type="color" default="$(body.text.color)"
value="#333333"/>
</Group>
<Group
description="Accents" selector=".content-inner">
<Variable
name="body.rule.color" description="Separator Line Color" type="color"
default="#eeeeee" value="#772222"/>
<Variable
name="tabs.border.color" description="Tabs Border Color"
type="color" default="$(body.rule.color)"
value="$(body.rule.color)"/>
</Group>”
I had no idea what it would do, but I felt safe being able
to undo my changes. Here is what it looked like before the changes:
Here is what it looked after the changes:
Here is what it looked after the changes:
Pretty cool, huh? HTML is a stud. It is both a product of
our desire to design and make beautiful every object of our creation as well as
a method which feeds our desire to make things beautiful. We extrapolate our
desire for creativity into this seemingly innocuous (and confusing) sequence of
numbers, letters, “<” symbols, = signs, and $ signs. It’s one of the most
complicated things I have ever seen, and it dictates the rules by which the
Internet lives – to all looks and appearances.
********
Interestingly enough, after I posted this, this is what my blog looked like:
It looks like I need to adjust the template a little bit so I can make room for my images. This is the first time something like this has ever happened to me, and I am not sure how to correct the error. I hope it isn't because I've been messing too much with the internal skeleton of the blog. I probably missed a quotation mark somewhere, and now there isn't enough room.
I went to "Adjust Widths":
And I fixed the issue. =)
********
Interestingly enough, after I posted this, this is what my blog looked like:
It looks like I need to adjust the template a little bit so I can make room for my images. This is the first time something like this has ever happened to me, and I am not sure how to correct the error. I hope it isn't because I've been messing too much with the internal skeleton of the blog. I probably missed a quotation mark somewhere, and now there isn't enough room.
I went to "Adjust Widths":
And I fixed the issue. =)
No comments:
Post a Comment