Xanga Look-hacks
(2007)
Intro:
I [used to] keep my blog on Xanga... It's one of those things where you can pay
extra for more features and particularly customizability of pages.
I don't, though I've considered it in the past.Said Xanga, which isn't going to be shared via here, isn't a crown jewel of looks, but I do have one advantage over the unlearnt masses... my posts have individual backgrounds on them that make them possible to read against the page's main background. I've had a few requests to detail how I do this.
There are two ways to do this, HTML, and CSS. I use the latter these days, and it's faster to use. I'll start with the HTML method...
HTML:
When you create a new entry, you have two views you can write your post
in, standard view, and HTML view. Standard takes care of the
minimal HTML that is needed to preserve the format that you type in.
(Such as converting line breaks made with enter/return to
<br> tags.)The original method I did for this was to create a table, then type text into it. Switch to HTML view and type in the following:
<table bgcolor=darkblue border=2 width=750><tr><td>D
This does the following:
- Creates a "table" element, with the following properties:
- Background color is "darkblue" which is a value that is predefined for websites. You can also use #000000 to define the colors in RGB format.
- Border of 2 pixels... just for looks
- Sets the width of the table to 750 pixels. You can do more/less if you want your site to be narrower.
- Creates "tr" and "td" elements which define one table row, and one column item within that row, respectively.
Xanga fills in the necessary closing tags when you actually submit your post. The D at the end of that line is just a placeholder... When you switch back to the standard view without a placeholder, you'll have a blue strip in the window, but no way to type within it. The placeholder gets around this.
That's a pretty short line, but still can be annoying to type it out (and remember it, as you might well need to, initially)
CSS:
I first implemented this approach in early 2007. In the
opinion of many, "table" elements should not be used for
anything but tables of data. Personally, I don't really care,
but have jumped on the alternative bandwagon: using "div" tags for
similar effect.This method requires two steps, putting an 'internal stylesheet' into your page, and then adding a much shorter line of HTML at the start of each entry.
A disclaimer before I continue: I have not "upgraded" to the newer system of "Xanga Themes." I have not checked to see whether this method works under that system.
First bit of code will be inserted into the Website Stats box on the Look & Feel page.
<style type="text/css">
div.x {
background-color: #00008B;
width: 750px;
padding: 5px;
border: 2px outset yellow;
background: url(http://www-personal.umich.edu/~erelson/BlueCarbonTexture.jpg) repeat;
color: #FFCC00;
}
</style>
The language here should be pretty self-explanatory. A few points though...
- "div.x" defines a subclass of the "div" tag with the name "x"
- "background-color" in this instance is actually unecessary... just shows that I haven't touched this any more than the tinkering it took to get the desired effect. But now you have a reference if you wanted to just do a color instead of an image
- "color" defines the text color
- "border" has multiple properties which could be individually set with properties such as "border-color"
- "padding" is how far from the borders text starts... padding = empty space
- I host my small background image on my UM webspace (as you could probably infer). "repeat" means it's tiled and covers the entirety of the "div"'s box.
Now when you create a new post, you switch to HTML, and insert the following:
<div class=x>D
Again, there's a placeholder. Unlike with the HTML table, you don't get a colored box indicating where you want to be typing. That's the only disadvantage of this approach. "class=x" simply tells the "div" to use the properties outlined above.
Other:
If you want to look at other things you can do with CSS, I recommend this
link.And that's a wrap... If you've still got questions send me an email or something.
-10-20-07