Aug 05 2009

Adding Extras

Published by

After understanding how to create tables, you can start to customize it by adding fonts and colors. Here is a basic table that many people use for layouts. (When I made layouts, users always asked for this layout)

<table>
<td colspan=”2″>Picture can be added here</td>
<tr>
<td>cell number one. Place text here.</td>
<td>cell number two. Place more text here.</td>
<tr>
<td colspan=2>Layout from HowrseHelper.com Learn how to make your own!</td>
</table>

Copy and paste this in your Howrse page. First, add borders, cell padding, cell spacing, and the width. (For all Howrse layouts, the width is usually 550.) This is the first line:

<table width=”550″ border=”2″ cellspacing=”3″ cellpadding=”3″>

You can change all of the number in the quotation marks to fit your style. Normally, I take out the border or else make it one instead of two. I keep cell spacing and cell padding at three and the width and 550. Play around with that and see how you like it.

Adding Color:

All you need to do is find a color you like and copy the code (including the number sign) then enter this code to the first line line of HTML. It doesn’t matter where you put it, but I prefer to put it next to the border code.

<table bgcolor=”#000000″>

The color that I chose was black. Don’t forget to add the quotations. This makes it the background color. To make the text a certain color, put this in the text code:

<td font color=”000000″>text goes here</td>

Use this color widget to find the right color code for your layout. Simply click on a color or drag the circle around with your mouse.

Adding Fonts

Adding fonts is very simple. All you need to do is post this code in front of all the text codes where you would like the font:

<td font face=”Arial”>text goes here</td>

Here’s a list of some pretty basic fonts that you could use:

Most Basic / Used Often:

  1. arial
  2. comic sans ms
  3. century gothic
  4. times new roman
  5. verdana

There are many many fonts to choose from so if you would like a more decorative font, try looking in a word document or Google.

Scrolling Text Boxes:

Practice creating your own basic layout first. Once you have that covered, you can move on to a more advanced form of HTML, which includes scrolling text boxes. This is like a regular text box code, so it’s not too hard to understand.

<td>

<div style=”overflow: auto; width: 130px; height: 150px;”><span>Title<br><br>Adjust the width/height in the HTML mode as you would like. Once more text is added, it scrolls. (text placed here)<br></span></div></td>

It will appear as this:

Once more text is added, your text box will begin to scroll

As you can see, there are new codes that you might not recognize. The <br> code just means you’re adding a space. These are necessarily needed in your code. The <div> code is the actual text box code. (The <td> code is a cell code. However, it acts as a text box usually.) The code that allows the text box to scroll is the phrase style=”overflow: auto;”. Without this, your text box wouldn’t be able to scroll.

This is how it will appear in a full layout:

<table width=”350″ border=”2″ height=”260″>
<tbody><tr><td>
<div style=”overflow: auto; width: 130px; height: 150px;”><span>text placed here<br></span></div></td>
<tr>
<td>text goes here (doesn’t scroll)</td>
</td></tr></tbody></table>

88 responses so far

88 Responses to “Adding Extras”

  1. GirlyKat123on 19 Aug 2013 at 2:22 pm

    How do I space the boxes (e.i upwards, to the left, ect)??????????????? Plz help!!

  2. Dwarfon 05 Jan 2014 at 5:36 pm

    Hpow do you get images into the layout? I am used to real html, so when I did my coding for my layout – thingie, it doesn’t work. At all. Am I just stupid or what?
    My layout is a “design” , a picture. With text boxes and stuff. But I need html text boxes, so there is actually text in them. But first, I need the picture to get on my profile. fml

  3. NOMI22on 04 Apr 2014 at 6:55 pm

    hey…so im like REALLY confused at how to change the font:( i just dont get it. i put the code in and it says name too long

  4. Addion 26 May 2014 at 5:33 pm

    Hey I didn’t know if it was possible to have a picture “underneath” the scroll boxes in the cells, or if it just had to be color?
    Thanks!

  5. Elrondon 27 Oct 2014 at 9:47 pm

    how do you do fonts for the EC name to have it all special like i have seen people have

  6. Mata.Novoton 14 Nov 2014 at 9:49 am

    Hello. I have a problem with the scrolling text. I copy the code a put a text there, but everytime, the box stretches around the text without any scroll bar.

  7. Chook101on 02 Jan 2015 at 1:23 am

    How do you put an image as a background?
    Also just thought I’d tell you that when I copy paste some of your code into notepad, the quotation marks don’t come out quite right and it stuffs the code.
    Also also (last one I promise :p) good job on updating your copyright so fast haha it’s only the second of January and it already says 2015.
    I’m chook101 on Australian howrse if you want to PM me.

  8. Goaton 07 Feb 2015 at 9:37 pm

    Jessica, I have all of this down. You do a great job at expaining! I was wondering if you could add how to add background images? I am confused there… Thank you so much!~ ponycrazy14 :)

  9. Goaton 07 Feb 2015 at 9:39 pm

    Oops! I’m on the international server… Forgot to add that!

  10. AussieGirl01on 28 Apr 2015 at 11:05 am

    i was trying to put in the Comic Sans MS font and nothing changed. I had copied the code line, added it, then typed in the font name, but nothing changed. After that I tried to paste in the name from this page, but still nothing changed. If you want to reply on Howrse, I put my username as my name. I am on International with this name, or US as QueenRaine1314, but I’m not on that one much.

Trackback URI | Comments RSS

Leave a Reply