Aug 05 2009
Adding Extras
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:
- arial
- comic sans ms
- century gothic
- times new roman
- 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>
Okay, I need help again lol
I can’t figure out how to change the font, I don’t know where I should put the text goes here
The whole line, with the codes just goes anywhere in the table as long as it’s on a new line. You don’t need to copy the whole code in if you don’t want another text column. You could just use the “font color=”#000000″ where you would like the color. Don’t forget to add it in a text code though!
You don’t know the code you have to use to change the size of the text? Is it the normal font size=”x” or someone else?
Hey jessica this is really great but I am so stuck on putting in the picture… I’ll PM howrse you.
Where do i put the scroll box code? When i put it in a random place i get a scroll box l l that big
Right after the td (text) tag. As for the size, make sure that you have entered the width and height correctly.
Hi,
Great website and thank you for all the help! Just one question. In the presentation, is there any way to get the screen to become larger. I have my layout fixed and everything but it’s too big to viewed fully so people always have to scroll around to view the layout and stuff. I’ve seen it done on other players page just not sure how to do it..
Thanks!
Oh… got it thanks…. but how come sometimes my presentation does not show? even though all the html is there
1.Go to your profile and right next to the modify button, there will be two other links: Reinitialize & Options. Reinitialize means deleting your profile code, so you probably don’t want to ever click that. ;)
2.Click on Options
3.Make the height the largest (1,000 pixels)
4.Make the width “Large”
Could you be a bit more descriptive with that? If the screen is white, usually it just needs to be saved again. If a warning comes up, your HTML coding could be too long or it won’t have proper ending tags.
mine kind of worked,but i turned out all black :(
Did you enter color codes? Was the color #000000? That’s the color code for black, so that might have been what happened. Feel free to PM me on Howrse if you have any more questions. My user name is Jessica27.
im doing it right the text just doesnt turn out and i cant make it bigger and how do you enter a pic?
I can’t get the color widget to work. what do i do?
Sorry about that. I suggest to just search “HTML color codes” into Google. You’ll get plenty of codes. What browser do you use? Maybe try using a different one? You could also try to refresh the page…I was experiencing some trouble with it myself.
None of the codes work
I know, sorry. I am working on that.
Hey I am just wondering how do you get a layout with a photo on top and 3 scroll boxes under it one under another like this sentence
how
do
you
do
Thanks
~xob~
You need to combine the cells at the top and just add the three at the bottom. I would show you, but I can’t on the comments since the code will get deleted.
hey i added colors to mine from the color thing above…and it came up blank?? what do i do?!
The whole presentation came up blank? Make sure you don’t have any coding errors. Feel free to PM me the code so I can take a glance at it. ;)
the font code didn’t work! I tried using it with Typewriter Rough and it just came up normal on my Howrse page!
Howrse might not work with certain fonts..I’ll double check the font code to see that it’s working correctly. Try typing font face= instead of copying/pasting.
I dont get how to use the Chart maker thing!! help :(
For the horse charts? I’m still working on coding them. ;)
Hey, my howrse username is Zippos Pistol Pete I want to add color to the background in my layout text boxes but i cant figure out how the color number thing works. Your color mixer on this mage doesnt work for me, all i see i 6 lines with all the same shade (black faded to white). Please help!
this website has been very helpful, but the only thing i’m having trouble is with the picture. when i copy it into the cell “picture goes here” and save it the picture disappears. what am i doing wrong? :)
Are you adding the image link in the HTML mode? That’s the best way instead of copying/pasting it. ;)
thanks alot :) that really helped me!
I’m getting farly good at the whole layout thing. but I have one question, how do you make scroll or text boxes sort of “on top” of a picture so they are half translusive, or invisable, so you can see text on top of the picture?
Sorry, I can’t put code in comments, as it won’t come up. If you PM me, I can send it to you. ;)
I’m having trouble. I can make layouts with one ohto, and a scroll box on it just fine, but howrse keeps showing me an error when I try to post a header+footer.
I’ll post the code I used here. Can you direct me to my mistake?
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
Proin at eros non eros adipiscing mollis. Donec semper turpis sed diam. Sed consequat ligula nec tortor. Integer eget sem. Ut vitae enim eu est vehicula gravida. Morbi ipsum ipsum, porta nec, tempor id, auctor vitae, purus. Pellentesque neque. Nulla luctus erat vitae libero. Integer nec enim. Phasellus aliquam enim et tortor. Quisque aliquet, quam elementum condimentum feugiat, tellus odio consectetuer wisi, vel nonummy sem neque in elit. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non velit non ligula laoreet ultrices. Praesent ultricies facilisis nisl. Vivamus luctus elit sit amet mi. Phasellus pellentesque, erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.
Oh it didn’t show up. Can you tell me how to contact you?
My user name is Jessica27 on Howrse, although I think I already received the message from you. ;)
do you know what the color code is for seamless layouts?
oh never mind i figured it out
My presintation on my page doesn’t show up for some reason, i can add stuff to it and then when i press save changes it shows up blank i don’t get it, please help.
Try deleting you cookies and cache. ;)
The cell boxes don’t work, I need to use footers as text boxes! The picture doesn’t go all the was accross, cell 2 is left with nothing above it. The scroll doesn’t works either, but I think im not using it right, HELP ME, PLEASE!
hi how can you put images in the text box? thanks x
Is there anyway to get a border color?
Yup – message me on Howrse since I can’t display coding in the comments.
Ok, I have read this a lot but its a little bit confusing to be more specific I don’t get how I do the scroll boxes, picture and I am not sure where to put the background color do I put it in the beginning, end or middle? Please help :)
I am confused how to add a text box. can you please explain this to me??? everytime a put a code and saved it didn’t do anything.
btw… knitting92 is my user in horse
I can only get
1.arial
2.comic sans ms
3.century gothic
4.times new roman
5.verdana
I really want to get some other. I suggest Maybe making a list of the ones that work
Please, can you make a hack-free presentation for me, please… someone? My user on howrse is IngridBLillyFun and I joined yesterday, but I have been trying to make a howrse presentation, and without any successful attempts, so can anyone help me?
I dont understand. For the scroll box, do you need the ENTIRE code you have posted for one box, or just one of the lines. And where do you put the code? Would you put it after the “cell number one” in the HTML code, or somewhere else? Lol, I’m lost
Hi! I’m confused about where to put each code? Like after the table code where do you put the boxes, pictures, and font’s so that they are where you want them? Also, How do you put a picture underneath the text so that you can see the picture but also the text on top? This is confusing…
If you have to send me codes or something my user name is CatherineGrace99.
I’m so confused! I understand all the html codes and stuff like that. But I don’t understand how to use those in layouts like you normally see on howrse, instead of just tables likes these codes. HELP! feel free to pm me on howrse, my username is Tgirl16.
I used the html code tester, with the example code for the scroll boxes, but it doesn’t work!
Please, whenever I generate a layout….I can’t get it on my presentation…its just a lot of code once i save the presentation and you can’t see layout…what am i doing wrong?
Alananh1510
When copying and pasting the code to the layout you need to make sure your presentation is in HTML mode before you paste the coding onto the editing box. Otherwise, the only thing that will show is the coding itself.
To do this go to Profile > My Page > Edit My Presentation > Click on the Green Butotn that says “HTML Mode”. Located just above the smileys.
AFter you’ve clicked on that you can then paste the Coding onto the presentation area and save it. before you change anything. That way you can make sure that you copied the coding correctly. Once it’s up you’ll need to remember to go into HTML Mode before making any changes to the layout. Otherwise, it could cause the layout coding not to work properly. Also, if you’re not sure about where to put something or how to change the background color or size of font or other similar issues you can contact me on Howrse Player name is DixieRebelRose on the International Server. I’ve also got an account on the U.S. Server my Player name there is “RebelRoseCowgirl” :)
i make layouts already, but this looks alot better but i was wondering if you could add a background?
Merry xmas
Mollaysammi
Hi OK so I have an image, and I want to add a scroll box to it. Not underneath it, but ontop of it. Can I have a little help? thanks!
Hey, I’m just having some problems with the fonts. None of them seem to work on my howrse page. my username is marketta on howrse, if you’d like to pm me.
You’ll see the font once the layout is saved, not in the editing mode.
WHat in the world? Your layouts on the other sight works but why dosen’t this?
i don’t get any of this
Okay, i get everything, but my only problem is, how do you get a seperate colour for the borders, because all i have is a background colour, and no cell borders are visible.