Yes, you can host websites from your computer. Other people can’t view it, obviously, because it isn’t hosted on the internet. But hosting a website on your computer (known as localhost) allows you to create a fully-functional website so that everything is ready before you upload it to a live website. This also holds true for Subeta. You can code your Custom CSS, profile, or pet profile from your localhost and then upload your completed code to Subeta.

There’s a few reasons you might want to do this. First of all, it can be frustrating having to constantly save your code on Subeta since every time you save, you lose your place in your coding and get sent back to the top of the textbox. However, even more importantly, hosting your code on your localhost gives you the ability to use your own text editor. Why use an advanced text editor?

Once you’ve gotten set up with a decent text editor, it’s time to grab some stuff from Subeta so you can get started with your coding. I’m going to show you how to do Custom CSS this way, but the same method will work for anything on Subeta.

First we are going to put a little note in the Custom CSS on Subeta. That way once the code is in our text editor, we can easily find the spot in the document where we have to put our Custom CSS code. Go to your Custom CSS page. If you have any Custom CSS already there, you can delete it. (Don’t forget to save it somewhere first!) Then put this in the Custom CSS box:

<style type=text/css>
/*text here*/
</style>

Now we have to grab the code from a page on Subeta. It’s not really important which one since your Custom CSS will show up on all of them once it’s completed. For the tutorial I’ll grab the Item Hunt page. Go to View – Page Source in your menu bar (or View Source depending on your browser) and copy the code for the entire page. (Yes, it’s long!) Open up a new page in your text editor and paste the code in there. Now we’re going to save that. The name you give it isn’t really important, but you must give it the file extension of .html. So if you give yours the name of “customcss” it should look like this:

customcss.html

Once you’ve got it saved, it’s time to open it up in an internet browser so we can see what it looks like as a webpage. Locate the file in your computer (for example, in your My Documents folder). Right-click on the file, go to “Open With…” and select your browser from there. (Remember, I’m using a Mac operating system, so if you’re on Windows it will look a bit different.)

A new window should pop up showing our new webpage. YES, IT LOOKS AWFUL! That’s okay though. We just need to tweak some things in the code.

The reason it’s a bit of a mess is because some of the default Subeta stylesheets are linked into the page using a relative URL. Let’s look at the code.

<link rel="stylesheet" href="/layouts/widgets/events.css"/>
<link rel="stylesheet" href="/layouts/widgets/login.css"/>
<link rel="stylesheet" href="/layouts/widgets/friends.css"/>
<link rel="stylesheet" href="/layouts/widgets/wardrobe.css"/>
<link rel="stylesheet" href="/layouts/widgets/notepad.css"/>

Rather than linking the stylesheets in with an absolute URL of http://www.subeta.net/blah.css, it has been coded using relative URLs, which basically means it doesn’t include the actual website in the URL. That works fine when the code is being used on Subeta. But now that we are hosting it from our localhost, it will no longer work, so the stylesheets are broken. No problem! We just have to convert them to absolute URLs by adding http://www.subeta.net to the beginning of all of these links. There are quite a few of them, so I usually try to get as many of them as possible by using Find and Replace. Hit Ctrl+F to open the Find dialogue box. You can search for text in the document from here, and also replace all of the results. First we have to correct a bit of a bug in the coding, so we’ll start with:
Find:  =”//
Replace with: =”http://

Once that’s done, we have to convert the relative URLs to absolute URLs:
Find:  =”/
Replace with:  =”http://subeta.net/

If you re-save your document and refresh your browser, your webpage should now look mostly like Subeta! Don’t worry about any broken images – it won’t affect your Custom CSS at all.

Now the last step is the actual coding! You have to put all of your coding in a specific part of the page – the place it will show up once it is actually on Subeta. It is near the top of the page. We can use Ctrl+F again to find the note we put in the Custom CSS earlier – search for text here.

The area in between:

<style type=text/css>

and

</style>

Is where you do all of your css coding. You can preview it as you go by saving the document and then refreshing your browser window. Cool, right?

Have any questions or comments? Feel free to comment on this post!