Prettying Up The Site

Poutine_Paladin

Hey all,

I know many of you are super busy getting geared up for your new game (sounds like it'll be fun, keep us all up to date on it's progress) but I could use a hand.

I'm at the point where I'm sick of just adding more and more information to my site (okay, technically it's not mine, but I call it mine, as I'm the one working on it currently, our site GM has been stupid busy pretty much since he introduced me to the site) and it's time to start making it attractive/cooler. My coding skills are not so advanced, so I was hoping that you guys could hook me up with some basics. I already grabbed a stat block chunk of code from Gnunn (thanks again) to cool up my character pages, but what I'd really like next is some form of button background so that links are not just simply the words themselves, but have some sort of shape or aesthetic. Flags, or pennants, or scrolls, or something...would be cool.

Thanks in advance.

gnunn

This can be done pretty easily. You just have to create an image to be your buttons. Then put it on your page as a linked image.

The basic code for two buttons, titled "back" & "main" might look something like this:



|={width:100px}. !http://backimage.jpg!:http://desiredpageurl.com | |={width:100px}. !http://mainimage.jpg!:http://mainpageurl.com |



A couple important notes on this code:
This code does the following:
Creates a div that is 205 pixels wide and centered horizontally on the page.
Places a table within that div that will contain your two buttons in the 1st and 3rd cells. The center cell acts as a sort of spacer to provide attractive blank space between the buttons.
Uses two linked images as your buttons. They could be anything from a rectangle with an attractive bevel and the "words" back & "main" to a picture of your face. Just design the look of your button in a graphic editor and upload it as a jpg.

Keep in mind:
It's a good idea to have the button image you create set to the same size as the table cell that will contain it. In the example above, the table cells are 100px wide. I'd make a button image 100px wide too.
If you want a little separation between your buttons, make the containing div slightly wider than the sum of all your buttons.

Play around with this code for a bit, and I'm fairly certain you'll come up with something awesome. I haven't done it for my site yet because I've grown lazy of late.

Also, for a general reference on Textile, check out http://redcloth.org/hobix.com/textile/ It's a great quick reference tool that will address most of your coding needs.

Poutine_Paladin

Thanks gnunn, I'll fool around with it, and try to use that reference site for future easy things like this, but I've found so far that forum peeps will gladly provide basic code lines that I can adjust to suit my needs, rather than starting from scratch, as I literally have no programming background, so having a starting point for things is important for me.

Thanks again.