54 coaches online • Server time: 23:43
Forum Chat
Log in
Recent Forum Topics goto Post Creating a custom to...goto Post ramchop takes on the...goto Post NBFL Season 32: The ...
SearchSearch 
Post new topic   Reply to topic
View previous topic Log in to check your private messages View next topic
BlackNWhiteDog



Joined: Feb 05, 2006

Post 1 Posted: Nov 01, 2006 - 22:31 Reply with quote Back to top

Simple html code for editing group pages and bio's

Coaches keep asking me how to edit their team bio's & group pages with simple links and images. So to save myself some time in the long run I have prepaired this post to help explain some simple code to customise your team bio's, etc.

The following examples are colour coded to show the components that make up html code.
Colour code
Red = html code
Blue = Url's
Black = Normal text
(unless stated otherwise)


Links & Images

To make a link with text, like this... fumbbl.com (text links apear on the page in bold and underlined)
Use this code...
<a href="http://fumbbl.com/">fumbbl.com</a>
So first comes the code <a href=" then the url you wish to link to http://fumbbl.com/ next, close the link code "> now add the text here fumbbl.com and finaly finish the code with </a>

Top Tip - Use copy then paste, to copy the url from your browser address bar into the code, to stop typo's.

To place an image on a page use the following code...
<img src="http://fumbbl.com/themes/v3/images/logo4.jpg">
To find an images url. First right click on the image to bring up the menu, at the bottom of the list click 'Properties'. This will bring up the properties tab.
You are looking for the images 'Address' (url). Copy and paste the url in place of the url seen in the code above.

Next comes making a link using an image, like this... Image
To do this you will be using the 'link code' and the 'image code' shown in the two examples above.
Use this code...
<a href="http://fumbbl.com/"><img src="http://fumbbl.com/themes/v3/images/logo4.jpg"></a>
The link code is shown in red, the image code is in blue.

Warning. If you are typing code into a team bio or group page, make sure you do not hit enter on you keyboard untill the code is finished. If you do the code will not work properly.

Top Tip - Keyboad shortcuts are, Ctrl + C to copy selected object. Ctrl + V to paste the copyied object.


Aligning Text & Images

Sometimes you may wish to align objects to the center, left & right. To do this use the following code...
<div align="left">BlackNWhiteDog</div>
<div align="center">BlackNWhiteDog</div>
<div align="right">BlackNWhiteDog</div>
This tag will align every thing between the two bits of code (>BlackNWhiteDog<) including images and tables.


Fotmating Text

To create bold text like this BlackNWhiteDog
Use this code...
<b>BlackNWhiteDog</b>

To create underlined text like this BlackNWhiteDog
Use this code...
<u>BlackNWhiteDog</u>

To create italic text like this BlackNWhiteDog
Use this code...
<i>BlackNWhiteDog</i>

To create headings. There are six sizes of headings 1-6, "1" is the largest heading "6" is the smalest.
Examples...
h1 = BlackNWhiteDog, h3 = BlackNWhiteDog, h6 = BlackNWhiteDog
Use the following code...
<h1>BlackNWhiteDog</h1>, <h3>BlackNWhiteDog</h3>, <h6>BlackNWhiteDog</h6>
Note. Headings create a blank line below themselves so when adding code to your bio's you shold start the next line directly below the heading tag like this...
<h3>BlackNWhiteDog</h3>
<i>Woof Woof Grrrrrrrr Arrrroooooooooooooo!</i>

Top Tip - If you don't understand a word I've said, try copy and pasting the codes I've used as examples into your team bio to see what they do.

To change the font colour like this, this and this...
Use this code...
<font color="blue">BlackNWhiteDog</font>
Note: Instead of writing in the font colour you require such as Blue, you can use the # key followed by a 6 didgit code that represents a certain colour.
Examples...
Blue=#0000ff, Red=#ff0000.

Yearbooks

Some of you may have come across yearbooks in team bios on fumbbl. Yearbooks are a good way of displaying your player pictures and bio's on a single page.
They are remarkably simple to do as they are a normal link as seen erlier in this post.

All you need to do is copy and paste the link shown below and substitute the team id shown in purple for your own team id.
You can find your own teams id by clicking on your team to bring up the team page. Look in the address bar for the url of the team page, the numbers at the end of your teams url are the team id.

<a href="http://fumbbl.com/FUMBBL.php?page=yearbook&team_id=307741">Yearbook</a>

Tables

Ok, this is more tricky and can be very confusing when writing tables in team bios.
The reason for this is the entire table must be writen on one line without hitting the enter key. Tables are normaly writen on multiple lines to avoid confusion.
As you can't use multiple lines in your team bio's I sugest you use the space bar to make each element of the table grid start on the next line of you team bio editing box.

I have prepared the following images to help explain tables,
Image 1: A table as seen in a code editor
Image

Image 2: The corosponding table as seen on a page
Image

The Tags

<table> - This is the first stage off making a table.
Attributes can be added inside the table tags such as:
cellpadding="2" - changes the space around the text/image in the table.
cellspacing="2" - changes the space between the cells of the table.
border="2" - changes the thickness of the boarder.
width="px or %" - needs no explanation.

<tr> Makes a new row in the table.
Attributes can be added inside the table tags such as:
bgcolor="red" - changes the background color of the row.
align="left/center/right" - changes the horosontal formating of the cells in the row.
valign"bottom/middle/top" - changes the vertical formating of the row.
height="#px" - needs no explanation.

<td> Makes a new column in the table.
Attributes can be added inside the table tags such as:
bgcolor="red" - changes the background color of the cell.
align="left/center/right" - changes the horosontal formating of the cell. (note - formating the row is much quicker than formating individual cells)
valign"bottom/middle/top" - changes the vertical formating of the cell.
height="px or %" - needs no explanation. (note - if you wish to set a column width you only need to do it in the first row of column tags)

Sorry been distracted, i'll finish ASAP

Watch this space Smile

_________________
Shameless Advertising!
[url=http://www.nicklovick.co.uk/NLFPbutton.gif]Image[/url] [url=http://www.nicklovick.co.uk/01_Fumbbl/BB7/7s.gif]Image[/url]


Last edited by BlackNWhiteDog on Mar 14, 2007 - 22:27; edited 9 times in total
BlackNWhiteDog



Joined: Feb 05, 2006

Post   Posted: Nov 01, 2006 - 22:32 Reply with quote Back to top

more to follow soon

_________________
Shameless Advertising!
[url=http://www.nicklovick.co.uk/NLFPbutton.gif]Image[/url] [url=http://www.nicklovick.co.uk/01_Fumbbl/BB7/7s.gif]Image[/url]
BlackNWhiteDog



Joined: Feb 05, 2006

Post   Posted: Nov 01, 2006 - 22:32 Reply with quote Back to top

Some images here I have edited. The pictures were all from google all I have done is added backgrounds etc.

Chaos
Image Image Image Image Image Image Image Image Image Image
Image Image Image Image Image Image

Ogres
Image Image Image Image Image Image Image Image

Fairies
Image Image Image

Goblins
Image Image Image Image Image Image Image Image Image

_________________
Shameless Advertising!
[url=http://www.nicklovick.co.uk/NLFPbutton.gif]Image[/url] [url=http://www.nicklovick.co.uk/01_Fumbbl/BB7/7s.gif]Image[/url]


Last edited by BlackNWhiteDog on Feb 06, 2007 - 09:41; edited 2 times in total
Idolen



Joined: Aug 02, 2003

Post   Posted: Nov 01, 2006 - 22:54 Reply with quote Back to top

Nice, and very good tips for people with little skill in computers.. thanks mate Smile

_________________
1f u c4n r34d th1s u r34lly n33d t0 g37 l41d
PLATYPUS



Joined: Aug 02, 2003

Post   Posted: Nov 01, 2006 - 23:28 Reply with quote Back to top

Cheers mate.

What about e.g. bold, underlined, tables, colours,...?
spubbbba



Joined: Jul 31, 2006

Post   Posted: Nov 01, 2006 - 23:43 Reply with quote Back to top

Yeah thanks a lot!

This is really useful for us computer Luddites (my solution of mashing the keyboard with my fist and swearing at the computer wasn't working no matter where I hit it or how rude the curses I used).

Any more tips on how to do coloured text, undelines etc would be greatly appreciated.

One more thing, how do I write in the purple text on chat like the cool coaches? Cos I want to pretend I'm not a stoopid noob and fit in Embarassed

_________________
British or British based and looking to join a League?
Then check out theWhite Isle Fringe
SnakeSanders



Joined: Aug 02, 2003

Post   Posted: Nov 02, 2006 - 00:15 Reply with quote Back to top

type

/me

that then dsplays your coachname etc

so /me wants to play! will be *brownrob wants to play! (only purple)
BlackNWhiteDog



Joined: Feb 05, 2006

Post   Posted: Nov 02, 2006 - 00:25 Reply with quote Back to top

PLATYPUS wrote:
Cheers mate.

What about e.g. bold, underlined, tables, colours,...?


spubbbba wrote:
Any more tips on how to do coloured text, undelines etc would be greatly appreciated.


I'll be adding more in the next few days.
I'm self taught with html code, I learn't all the basics from coaches on fumbbl (Cheers guys, you know who u are!).
Now I'm just explaining what I learnt and putting it in one place. Very Happy

Glad u like it, my appologies for the spelling Wink

_________________
Shameless Advertising!
[url=http://www.nicklovick.co.uk/NLFPbutton.gif]Image[/url] [url=http://www.nicklovick.co.uk/01_Fumbbl/BB7/7s.gif]Image[/url]
Astereth



Joined: Sep 05, 2006

Post   Posted: Nov 02, 2006 - 00:41 Reply with quote Back to top

Great topic, I'll be keeping an eye on it...

As an aside, did you create the gif in your sig? It's great Cool
Laviak



Joined: Jul 19, 2004

Post   Posted: Nov 02, 2006 - 03:50 Reply with quote Back to top

Html code for tables:

The number one trick for making tables look nice is to remove all the carriage returns (enter key) in the table. It makes it very difficult to edit, so I like to keep a text file on my own PC, and remove all the line breaks right when I upload it.

Edit: The alternative (see later posts in this thread) is to use html comment syntax to skip over the automatically added line breaks - this is what is done in the example.

The full syntax is as follows:
<table> this is how you indicate that you are starting a table block, the table should end with </table>
<tr> this indicates the start of a new row, the row should end with </tr>
<th> this indicates a new header cell in the table, the cell should end with </th>
<td> this indicates a new content cell in the table, the cell should end with </td>

For a table without a border (very useful for laying things out neatly), use:
Code:
<table style="border: none; margin-left: auto; margin-right: auto;" border="0" cellspacing="0" cellpadding="5">


For a table with a border use:
Code:
<table style="border: solid 2px black; margin-left: auto; margin-right: auto;" border="0" cellspacing="0" cellpadding="5">


For a nice header row, with the black background, and white text, use:
Code:
<tr valign="top" style="text-align: center; background: #000000; color: white;">


For alternating light/dark rows, using the same colours as the user's fumbbl theme, use:
Code:
<tr class="odd"> ... </tr>
<tr class="even"> ... </tr>


If you need an empty cell, use:
Code:
<td>&nbsp;</td>


If you want to do anything much more than that, I suggest looking up one of those html syntax pages.

Example
The following example comes directly from the We Fink Wer Orks schedule table - it's set up so that the results can be filled into the final column.
Code:
<table style='border: solid 1px black; margin-left: auto; margin-right: auto;' border=0 cellspacing=0 cellpadding=5><tbody align=justify valign=top><!--
-->    <tr style='background: #000000; color: white;'><!--
-->      <th>&nbsp;</th><!--
-->      <th>Coach</th><!--
-->      <th>Team</th><!--
-->      <th>Results</th><!--
-->    </tr> <!--
-->    <tr class=odd><!--
-->      <td>1</td><!--
-->      <td><a title='Coach Bio' href=~OldBugman>OldBugman</a></td><!--
-->      <td><a title='Team Bio' href=FUMBBL.php?page=team&op=view&team_id=174310>Karak-Varn FC</a></td><!--
-->      <td align=center><a title= href=></a></td><!--
-->    </tr> <!--
-->    <tr class=even><!--
-->      <td>2</td><!--
-->      <td><a title='Coach Bio' href=~ArtaXerxes>ArtaXerxes</a></td><!--
-->      <td><a title='Team Bio' href=FUMBBL.php?page=team&op=view&team_id=187005>Fast Fossils</a></td><!--
-->      <td align=center><a title= href=></a></td><!--
-->    </tr> <!--
-->    <tr class=odd><!--
-->      <td>3</td><!--
-->      <td><a title='Coach Bio' href=~FLo711>FLo711</a></td><!--
-->      <td><a title='Team Bio' href=FUMBBL.php?page=team&op=view&team_id=23941>Zen Adepts</a></td><!--
-->      <td align=center><a title= href=></a></td><!--
-->    </tr> <!--
-->    <tr class=even><!--
-->      <td>4</td><!--
-->      <td><a title='Coach Bio' href=~erikekers>erikekers</a></td><!--
-->      <td><a title='Team Bio' href=FUMBBL.php?page=team&op=view&team_id=225196>Woodies Double Double</a></td><!--
-->      <td align=center><a title= href=></a></td><!--
-->    </tr> <!--
-->    <tr class=odd><!--
-->      <td>5</td><!--
-->      <td><a title='Coach Bio' href=~justbob>justbob</a></td><!--
-->      <td><a title='Team Bio' href=FUMBBL.php?page=team&op=view&team_id=225324>Aberration Theatre</a></td><!--
-->      <td align=center><a title= href=></a></td><!--
-->    </tr> <!--
-->    <tr class=even><!--
-->      <td>6</td><!--
-->      <td><a title='Coach Bio' href=~Patrician>Patrician</a></td><!--
-->      <td><a title='Team Bio' href=FUMBBL.php?page=team&op=view&team_id=225215>Northern Blight</a></td><!--
-->      <td align=center><a title= href=></a></td><!--
-->    </tr> <!--
-->    <tr class=odd><!--
-->      <td>7</td><!--
-->      <td><a title='Coach Bio' href=~Longshanks>Longshanks</a></td><!--
-->      <td><a title='Team Bio' href=FUMBBL.php?page=team&op=view&team_id=154031>Sinister Duskriders</a></td><!--
-->      <td align=center><a title= href=></a></td><!--
-->    </tr> <!--
-->  </tbody></table>

_________________
We Fink Wer Orks
--------
Help save blood bowl, foul an elf today!.


Last edited by Laviak on Jan 15, 2007 - 08:56; edited 1 time in total
pac



Joined: Oct 03, 2005

Post   Posted: Nov 02, 2006 - 10:36 Reply with quote Back to top

This thread should be a candidate for stickying - although I'd suggest moving it to the FUMBBL --> User Guide forum first (as it's a little out of place in the Java Client Customisation forum).

I too learnt virtually all the html I know (which still isn't that much) here on fumbbl - it's not as hard as you think!
Mezir



Joined: Aug 02, 2003

Post   Posted: Nov 02, 2006 - 10:51 Reply with quote Back to top

Nifty trick: The FUMBBL php form adds a <br /> tag for every line break in what you submit. This can seriously screw up table lay-outs unless you put all the code on a single line - which then becomes a female dog to edit. Adding // to the end of a line circumvents this action, because it comments out the <br />.

Code:
<table>//
  <tr><td>//
    Bla//
  </tr></td>//
</table>//

_________________
Build a man a fire and he's warm for a day; set a man on fire and he's warm for the rest of his life.
Laviak



Joined: Jul 19, 2004

Post   Posted: Nov 02, 2006 - 11:06 Reply with quote Back to top

Mezir wrote:
Adding // to the end of a line circumvents this action, because it comments out the <br />.


OK, that is way nicer than what i've been doing - very nice tip Mez.

_________________
We Fink Wer Orks
--------
Help save blood bowl, foul an elf today!.
BlackNWhiteDog



Joined: Feb 05, 2006

Post   Posted: Nov 02, 2006 - 11:12 Reply with quote Back to top

Astereth wrote:
Great topic, I'll be keeping an eye on it...

As an aside, did you create the gif in your sig? It's great Cool


yep, took a while to get right Smile

Mizer wrote:
Nifty trick: The FUMBBL php form adds a <br /> tag for every line break in what you submit. This can seriously screw up table lay-outs unless you put all the code on a single line - which then becomes a female dog to edit. Adding // to the end of a line circumvents this action, because it comments out the <br />.


didn't know that one, cheers Mizer!

(i'll b writing a table tutorial once i've covered the basics as their a bit more advanced)

_________________
Shameless Advertising!
[url=http://www.nicklovick.co.uk/NLFPbutton.gif]Image[/url] [url=http://www.nicklovick.co.uk/01_Fumbbl/BB7/7s.gif]Image[/url]
PARC



Joined: Sep 06, 2006

Post   Posted: Nov 02, 2006 - 11:31 Reply with quote Back to top

BlackNWhiteDog you probably know but this is great site for someone to add the small player icons to their team bios
http://www.nicklovick.co.uk/01_fumbbl/BB7/images/

example:
<img src="http://www.nicklovick.co.uk/01_fumbbl/BB7/images/hlineman1.gif">

I've been searching for those icons for a lot of time so this may save so time to others...
and if someone needs a few basic tips check my team bio
http://fumbbl.com/FUMBBL.php?page=team&op=view&team_id=289787
if u want to i can post here or send a pm with the stuff i done.
Cya all
Display posts from previous:     
 Jump to:   
All times are GMT + 1 Hour
Post new topic   Reply to topic
View previous topic Log in to check your private messages View next topic