DIR Return Create A Forum - Home
---------------------------------------------------------
Pargee M-CKT
HTML https://pargee.createaforum.com
---------------------------------------------------------
*****************************************************
DIR Return to: Tutorials & Guides
*****************************************************
#Post#: 101--------------------------------------------------
How To: Make Your Own Tumblr Themes!
By: Red Date: March 30, 2013, 1:56 pm
---------------------------------------------------------
Want a buffer before tackling a big project like a tumblr theme?
You can view my (incomplete) primer to HTML here:
HTML http://pargee.createaforum.com/media-subforum/web-design-101-by-red/
Hello! I was talking with Mistercuttlefish and I think this
would be appropriate. I've decided to make a guide dedicated to
helping people like YOU. I hope you find this guide
comprehensive enough to refer to as your making your own theme.
During the length of this guide, I'll be making a theme from
scratch, to an extent. Tumblr provides a page for theme
developers that contains various documentation as to what
different things do in the code. This is handy, but without
other pieces of vital information, a newbie probably wouldn't
get very far.
So thus, I give you the bible of just about any web developer:
HTML http://www.w3schools.com/
W3 Schools is kinda the de facto guide when it comes to HTML or
CSS or just about anything else regarding web stuff. I'm just
going to run through the basics of how to organize your code and
how things are handled within the code.
The developers page that I mentioned above is right here:
HTML http://www.tumblr.com/docs/en/custom_themes
I'm going to be using the outline they have on there.
Also, one more important piece of information, there's two types
of code we need to worry about really. I'm not going to get into
anything too complicated, so we're going to stick to using HTML
and CSS. How that works, is HTML is the bare bones of the page,
while CSS styles the page and makes it fancy.
[sub]NOTE: HTML stands for Hyper Text Markup Language. It's not
actually a "coding" language.[/sub]
[sup]NOTE: CSS stands for Cascading Style Sheet. It is worthless
without HTML.[/sup]
#Post#: 102--------------------------------------------------
Re: How To: Make Your Own Tumblr Themes!
By: Red Date: March 30, 2013, 2:25 pm
---------------------------------------------------------
Alright, let's get started
So I've decided I'm sick of my theme. It's absolutely horrendous
- so much to the point that I have no clue why I ever picked it
in the first place. After searching for hours and hours for the
theme that "suits me", I've gotten fed up, and now it seems
there's nothing currently existing that I will be happy with. As
a last ditch effort, I have decided to undertake the epic task
of making my own theme.
This is the outline:
[code]<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml"
href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}"
/>
{/block:Description}
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<ol id="posts">
{block:Posts}
{block:Text}
<li class="post text">
{block:Title}
<h3><a
href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</li>
{/block:Text}
{block:Photo}
<li class="post photo">
<img src="{PhotoURL-500}"
alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photo}
{block:Panorama}
<li class="post panorama">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}"
alt="{PhotoAlt}"/>
{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Panorama}
{block:Photoset}
<li class="post photoset">
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Photoset}
{block:Quote}
<li class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</li>
{/block:Quote}
{block:Link}
<li class="post link">
<a href="{URL}" class="link"
{Target}>{Name}</a>
{block:Description}
<div
class="description">{Description}</div>
{/block:Description}
</li>
{/block:Link}
{block:Chat}
<li class="post chat">
{block:Title}
<h3><a
href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt}
user_{UserNumber}">
{block:Label}
<span
class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</li>
{/block:Chat}
{block:Video}
<li class="post video">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
{block:Audio}
<li class="post audio">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Audio}
{/block:Posts}
</ol>
<p id="footer">
{block:PreviousPage}
<a href="{PreviousPage}">&#171; Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next &#187;</a>
{/block:NextPage}
<a href="/archive">Archive</a>
</p>
</body>
</html>[/code]
Let me explain what's going on here. This is all HTML code, as
denoted by the <html> tags at the top and bottom. To start an
HTML document, we normally include a <! DOCTYPE> at the very,
very beginning, but that doesn't seem to apply to tumblr, so we
can leave that out. Next, we have two really important tags -
the <head> and <body> tags. Think of tags as tiny containers for
content. On the page, they're built like a sideways pyramid.
Every tag has a closing tag (with a few exceptions), so if
<html> starts a document, </html> closes it. All closing tags
begin with a slash: </p>. That's basically all there is to HTML
code. It's really that easy, in theory.
So back to these really important tags, <head> and <body>.
Everything after the <head> tag is information you need to
include on the page but don't want displayed (more or less). Up
here, you can put scripts to run on your page, <meta> tags,
which add keywords for search engines, set character encoding,
stylesheets, and more, but we won't get into them. It also
includes the <title> tag, which is displayed on the page's tab
in your browser, or at the very top of the browser in some older
software.
Also, one thing I should really make note of, Tumblr uses
various variables in their theme code that is specific only to
Tumblr. These are enclosed in curly brackets { and }. The first
one we encounter is {Title}, which automatically lists what
title you put in the page customization page. For Tumblr, we
need to make sure that this is here, because if you replace
{Title} with your own text, when you try to change it on the
customization page, it won't work.
The <head> tag is also where our CSS resides. The first thing
we'll do is add our CSS tag in our code.
Your head will look like this afterward:
[code]
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml"
href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}"
/>
{/block:Description}
<style type="text/css">
</style>
</head>
[/code]
We use the <style type=""> tag to dictate different scripts or
styles that we use in our document, namely Javascript and CSS.
We don't need to worry about Javascript for now. [sub]I'm not
very good at it anyhow...[/sub]
#Post#: 103--------------------------------------------------
Re: How To: Make Your Own Tumblr Themes!
By: Red Date: March 30, 2013, 3:17 pm
---------------------------------------------------------
Now that we have our CSS set up, we can start formatting our
page. The majority of markup we'll be doing is CSS and not HTML,
but that doesn't mean we won't be doing any HTML at all.
CSS has three different ways of styling html. It can give
properties directly to HTML tags, use IDs, or classes. To
utilize CSS, we're going to use <div> tags in our HTML. These
tags are special, because they allow us to edit large areas of
arbitrary HTML and make them fancy. I'll give an example of all
three so we know what they can do, but I may only use a couple
in my blog.
Before I start going trigger-happy with all my fancy new codes,
I should probably explain what the <body> tag does. Almost
everything included in a <body> tag is displayed on the page
itself. This is where we put HTML to show things on the screen.
First things first, there's some cleaning we should do to our
HTML. Tumblr thought it'd be a good idea to make our sections of
code regarding posts into an ordered list using the <ol> tag. We
don't want that, because we don't need our posts to be numbered.
Lists in HTML have other tags that the list items go into called
<li>. We need to make sure that if we delete the <ol> tags that
we also delete all <li> tags, or else our browsers won't be able
to know how the content is supposed to appear.
Here's a tip, we don't want to completely remove the <ol> tags,
because we can use their spot as <div> tags instead, so what we
should do is change the <ol> and <li> tags to <div>. If there's
anything else on the <ol> tag, like <ol id="desu">, we can keep
that. In fact, that would save us a lot of time when making our
CSS IDs. Make sure to not mess with the <ul> (unordered list)
and <li> tags in the "Chat" type post. They're clearly marked by
the code blocks.
This is how our tumblr page will be formatted:
[code]
<div id="posts">
{block:Posts}
{block:Text}
<div class="post text">
{block:Title}
<h3><a
href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</div>
{/block:Text}
{block:Photo}
<div class="post photo">
<img src="{PhotoURL-500}"
alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Panorama}
<div class="post panorama">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}"
alt="{PhotoAlt}"/>
{LinkCloseTag}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Panorama}
{block:Photoset}
<div class="post photoset">
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photoset}
{block:Quote}
<div class="post quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link">
<a href="{URL}" class="link"
{Target}>{Name}</a>
{block:Description}
<div
class="description">{Description}</div>
{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}
<h3><a
href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt}
user_{UserNumber}">
{block:Label}
<span
class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}
{block:Video}
<div class="post video">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
{block:Audio}
<div class="post audio">
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}
{/block:Posts}
</div>
[/code]
fancy.
#Post#: 111--------------------------------------------------
Re: How To: Make Your Own Tumblr Themes!
By: Red Date: March 31, 2013, 3:38 am
---------------------------------------------------------
I mentioned that we have three ways of formatting CSS, and I'll
demonstrate that right now.
W3schools' CSS reference and tutorial:
HTML http://w3schools.com/css/default.asp
Keep in mind that CSS and HTML <div> tags go hand in hand. CSS
isn't limited ONLY to <div> tags, they're often the most
convenient to use.
Here's a quick example of CSS structure:
[code]
<script style="text/css">
/* this is a CSS comment. They can naturally span multiple lines
*/
/* Tag formatting */
body {
background: #000000;
font-family: "Century Gothic", Helvetica, Arial;
text: #FFFFFF;
}
a {
text-decoration: none;
}
a:hover {
text: #CCCCCC;
}
/* ID Formatting */
#marginWidth {
width: 500px;
background: #E0E0E0;
}
/* Class Formatting */
.link {
font-family: Courier;
}
</script>
[/code]
[sup]NOTE: This is probably buggy.[/sup]
There's so much to cover here, because this is very vital to
making pages look and feel good. The last thing you want is an
unattractive blog, right? Maybe? Anyhow, Let me break this down
for you.
CSS is very different from HTML and very much more related to a
scripting language like Javascript or PHP in a sense. I
personally find CSS easier to read than HTML.
You have the name of the thing you want to edit first. If
there's nothing proceeding the name of the element, it edits the
normal HTML tag with that name, so for example, we have body{},
which edits everything within the <body> tag of our HTML. That's
straightforward, right? The a{} element is an html <a> (anchor).
They're used to display links on pages. Keep in mind, the html
tag <link> exists, but that's used for something else. We have
two CSS elements that relate to the <a> tag: a{}, and a:hover{}.
The element a:hover{} is very special, because it only activates
its style when the cursor goes over the text of our anchor
(link). In this way, since I have "text-decoration" set to
"none" in a{}, which leaves it looking like normal text, people
might not know that it's a link without having their cursor
change when they naturally hover over it. Because of this, it's
important to make your links clear in your blog. To give our
links some more character when hovered, I've set it to change
the text color of the link when someone goes over it. That way,
people should know it does something.
[sup]NOTE: You should be able to do this with normal text too,
but I wouldn't recommend it, because it's confusing for your
readers.[/sup]
Then we move on to ID formatting. ID elements start with a #
(octotrough/hashtag/pound sign) before the name of the element.
These can be used in <div> tags in your CSS by typing your tags
like this: <div id="IDelementName">. Keep in mind, errors can be
made by confusing IDs with Classes and saying <div
class="actuallyAnID">. Our ID here edits margins. If you want to
see more of what CSS can do (which I highly recommend if you're
creating a theme along with me), you can visit the link at the
top of this post to W3 Schools' CSS tutorial.
Classes are just like IDs for the most part, but start with a .
(period/dot) character. Once again, these can be used with <div>
tags and stuff. Sorry, I just really like <div> tags, they can
be used with a lot of other things too.
If you have any questions, which you probably do, [sub]because
CSS is really important and I feel I did a bad job of explaining
it,[/sub] then either reply when the thread is open or message
me.
NOTE: It's best to keep your element names to one easily
referred to word. Also, don't start them with a number character
(1 through 9 and 0) because some browsers won't read it
correctly.
#Post#: 112--------------------------------------------------
Re: How To: Make Your Own Tumblr Themes!
By: Red Date: March 31, 2013, 3:58 am
---------------------------------------------------------
Alright, now that we have the groundwork set for our themes,
just about, it's time I think about how I actually want my
themes to look. My final product won't mess up the original
theme code too much so you can follow along and easily see what
changes.
This is a finalized theme of mine. My CSS elements aren't
identical to the ones used in the post above, but you should be
able to see how the theme operates in theory.
[code]<html>
<head>
<!-- Theme created for Tumblr by Patrick McGee
Title: Scary III ~ Minimal
Date: 3/31/13
Contact: pmcgee33@hotmail.com
-->
<title>{Title}</title>
<style type="text/css">
/* Page Formatting */
body
{
background: #FFF;
}
h3
{
text-align: center;
}
a
{
color: #000;
text-decoration: none;
font-family: "Courier New", Courier, monospace;
}
a:hover
{
color: #F0F0F0;
}
#edging
{
width: 700px;
margin: 0 auto 0 auto;
background: #E0E0E0
}
#linkstuff
{
text-align: center;
}
/* Post Formatting */
.textpost
{
text-align: left;
}
.photopost
{
}
.photosetpost
{
}
.quotepost
{
}
.linkpost
{
text-align: center;
width: 500px;
}
.chatpost
{
text-align: left;
}
.videopost
{
}
.audiopost
{
}
.caption
{
text-align: justify;
width: 500px;
}
.description
{
text-align: justify;
width: 500px;
}
/* Page Elements */
.perm
{
font-size: 125%;
text-decoration: none;
display: block;
float: right;
position: relative;
top: -3px;
left: 0px;
width: 30px;
margin-left: 0px;
color: #000
}
.sep
{
font-size: 75%;
left: 0px;
margin-right: -150px;
text-align: right;
letter-spacing: 1px;
}
</style>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml"
href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}"
/>
{/block:Description}
</head>
<!-- Everything displayed on page -->
<body>
<center><a href="/"><img
src="
HTML http://image.wetpaint.com/image/3/WWolsVKoDe5lWCwHhAUipA7328"<br
/>height="135" width="182" /></a> </center>
<!-- Post code -->
{block:Description}
<p id="description">{Description}</p>
{/block:Description}
<div id="linkstuff">
<p id="footer">
<a href="/media">Media</a> |
{block:PreviousPage}
<a href="{PreviousPage}">Previous</a> |
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next</a> |
{/block:NextPage}
{block:AskEnabled}
<a href="/ask">{AskLabel}</a> |
{/block:AskEnabled}
<a href="/archive">Archive</a>
</p>
</div>
<hr />
<div id="edging">
<center>
<div id="posts">
{block:Posts}
<!--Date stuff-->
{block:NewDayDate}
<div class="sep">
{block:Date}<span
class="date">{DayOfMonth}{DayOfMonthSuffix} of {Month},
{Year}{/block:Date}
</div>
{/block:NewDayDate}
<!-- Permalink Button -->
<a class="perm" href="{Permalink}">&</a>
<!-- Begin Posts -->
{block:Text}
<div class="textpost">
{block:Title}
<h3><a
href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
</div>
<hr />
{/block:Text}
</tr>
{block:Photo}
<div class="photopost">
<img src="{PhotoURL-500}"
alt="{PhotoAlt}"/>
{block:Caption}
<div id="otheredging"
class="caption">{Caption}</div>
{/block:Caption}
</div>
<hr />
{/block:Photo}
{block:Photoset}
<div class="photosetpost">
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
<hr />
{/block:Photoset}
{block:Quote}
<div class="quotepost">
"{Quote}"
{block:Source}
<div class="source"> -
{Source}</div>
{/block:Source}
</div>
<hr />
{/block:Quote}
{block:Link}
<div class="linkpost">
<a href="{URL}" class="link"
{Target}>{Name}</a>
{block:Description}
<div
class="description">{Description}</div>
{/block:Description}
</div>
<hr />
{/block:Link}
{block:Chat}
<div class="chatpost">
{block:Title}
<h3><a
href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt}
user_{UserNumber}">
{block:Label}
<span
class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
<hr />
{/block:Chat}
{block:Video}
<div class="videopost">
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
<hr />
{/block:Video}
{block:Audio}
<div class="audiopost">
{AudioPlayerBlack}
<p>{PlayCount}</p>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
<hr />
{/block:Audio}
</table>
{/block:Posts}
</div>
</center>
</div>
<div id="linkstuff">
<p id="footer">
<a href="/media">Media</a> |
{block:PreviousPage}
<a href="{PreviousPage}">Previous</a> |
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next</a> |
{/block:NextPage}
{block:AskEnabled}
<a href="/ask">{AskLabel}</a> |
{/block:AskEnabled}
<a href="/archive">Archive</a>
</p>
</div>
</body>
</html>[/code]
I'm sorry it's so long. It's still missing a couple things I
find vital, but this is the bare minimum for what I'd look for
in a theme. Here's some features that are pretty important
though.
The Theme in Action:
HTML http://ampersandsublime.tumblr.com/
(not an
exact copy)
- A Permalink Button: Without the ability to just go directly
to a post, blog visitors can't reblog the post they want. This
is the & symbol on the right of the post.
- Extra Buttons: These link to other pages in your blog. To
make a page of just posts with a specific tag, you can create an
<a> tag with the link to "/tagged/whateverYouWantHere/"
#Post#: 113--------------------------------------------------
Re: How To: Make Your Own Tumblr Themes!
By: Red Date: March 31, 2013, 4:14 am
---------------------------------------------------------
That's just about it, all it takes is a vision and hard work. I
highly recommend looking at the HTML and CSS tutorials on the
W3Schools website. They're really awesome and that's where I
learn most of my stuff.
You can use this thread to share different themes you've
created, post any coding questions you have (hopefully related
to this topic), or post ideas for things to be coded and added
to blogs. If people are interested, maybe we'll create a
subforum somewhere for things like this. I'd actually recommend
creating an entire thread for any new themes you create so
people can add on and develop new things for it in an active
topic and it'll remain organized.
Here's some things to try:
- Show the amount of notes on every post
- Show when each post was posted
- List the original poster somewhere on your post
- Create an "About Me" page on your blog with a bio and all
posts with you in them displayed
- Create a "Jukebox" page that people can go to and listen to
all the music posts tagged on your blog.
- Add a picture for the background
- Create a floating sidebar that keeps its "absolute" position
on your blog when you scroll.
- Learn how to make a multi column blog [sub]and then teach me
how to do it...[/sub]
- Have your posts off center on your blog
- Make pictures slightly transparent, but become opaque when
you hover over them
NOTE: I will give +1 karma and a blog promo for the person that
completes a challenge. Multiple karma for every challenge
completed, but only one promo. The solution must be written in
code with an explanation of how it's implemented. Also, an
example in use would be fantastic.
Now go theme to your heart's content!
#Post#: 116--------------------------------------------------
Re: How To: Make Your Own Tumblr Themes!
By: MisterCuttlefish Date: March 31, 2013, 1:58 pm
---------------------------------------------------------
[code]<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#E7D6CF;
}
h1
{
color:#91CFCA;
text-align:center;
font-family:"Kristen ITC";
}
p
{
color:#ffffff;
font-family:"Kristen ITC";
font-size:20px;
}
</style>
</head>
<body>
<h1>To Do:</h1>
<p>-figure out the "enter" button on the script. (x)</p>
<p>-change body font. (x)</p>
<p>-change body text color. (x)</p>
<p>-change title font. (x)</p>
<p>-change title color. (x)</p>
<p>-change background color. (x)</p>
<p> once the easy stuff is done:</p>
<p>-figure out basic text things; ie, italics, bold, etc. whyyyy
is this soo haaard what am i doing wrrroooonganslkgjf ( )</p>
<p>-figure out how to indent???!!?!? ( )</p>
<p>-I wonder if you can do borders? o v o ??????? what no if i
do that everything dies ???????? ( )</p>
<p>-The challenge when i stop being dumb ( )</p>
</body>
</html>
[/code]
So I've been here for like, twenty minutes?
I should probably read something before I start, I've just been
trying to do stuff off of the things I know (which is almost
nothing - v -") and acting like its a language. sweet jesus im
too impatient for this noooo
i just want it all to become really cool really fast.
Turns out: I'm good at finding colors that go together without
looking at color codes. Done, that's it. All of my skill.
#Post#: 117--------------------------------------------------
Re: How To: Make Your Own Tumblr Themes!
By: Red Date: March 31, 2013, 11:35 pm
---------------------------------------------------------
[code]
<p>-figure out basic text things; ie, italics, bold, etc. whyyyy
is this soo haaard what am i doing wrrroooonganslkgjf ( )</p>
<p>-figure out how to indent???!!?!? ( )</p>
<p>-I wonder if you can do borders? o v o ??????? what no if i
do that everything dies ???????? ( )</p>
<p>-The challenge when i stop being dumb ( )</p>
[/code]
For text formatting, I believe people normally do HTML <i> for
italicized and <b> for bold.
You can do it in CSS too by using this:
[code]
<head>
<style>
p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
#example{
font-style: italic;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
<div id="example">
<p>what did you say you little shit</p>
</div>
</body>
[/code]
For indenting, CSS actually has a fancy little thing for that.
[code]
#example {
text-indent: 50px;
}
[/code]
There are tons of borders, but I don't personally use them. You
can use CSS or HTML I believe. Google "CSS borders" or "HTML
borders" and see what comes up.
[code]
<p>-The challenge when i stop being dumb ( <b>X</b> )</p>
[/code]
EDIT:
I cleaned up your <style>! I was bored, so I changed one thing
that saves you a line of code.
[code]
<style>
body
{
background-color:#E7D6CF;
font-family:"Kristen ITC", "Comic Sans";
}
h1
{
color:#91CFCA;
text-align:center;
}
p
{
color:#ffffff;
font-size:20px;
}
</style>
[/code]
*****************************************************