Creating your own ScoreBoard Start Tile

NOTE: The final creation of your personal scoreboard requires a monitor that can display a 1242 x 828 pixel image, but all of the work leading up to actually printing the image can be done on a smaller monitor, just reduce the zoom factor while you are designing your scoreboard. When you are done, just copy your Tile1 directory to a thumb drive so you can display your scoreboard on a computer with a larger monitor. Then you can use any image editor, like Microsoft Paint, to save your scoreboard as a JPEG file.

Step 1: Create an empty working directory on your PC, for example, "Tile1".

Step 2: Display the Carcassonne Tiles, then, Depending on your browser/operating system

or

and



Corner Tiles
           

River Tiles
             

Edge Tiles
         

Overlay Tiles
     

Scoreboard and Grid displayed at 25%,
But they can still be dragged or copied as is
 

After copying all of these image files to your Tile1 directory,

Step 3: Create an empty "MyBoard.txt" in your Tile1 directory

Step 4: Use notebook to open your MyBoard.txt file

Step 5: Click "Display HTML Code" in your byo page



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML LANG="en-US">
<HEAD>
<TITLE>River 1 w/ Inn Cath</TITLE>

<style>

/* display playing board with no extra spacing */

table.board { border-collapse:collapse;
padding:0px; border:0px; margin:0px; }
table.board td { border-collapse:collapse;
padding:0px; border:0px; }

/* Display Rotated Tiles */

img.ct0 { width:207px; height:207px; }
img.ct1 { width:207px; height:207px; transform:rotate(90deg); }
img.ct2 { width:207px; height:207px; transform:rotate(180deg); }
img.ct3 { width:207px; height:207px; transform:rotate(270deg); }

/* Overlay the scoreboard on top of the tiles */

td.overlay { position: relative; left: 0; top: 0;
             vertical-align:top; }

/* Absolute size of BYO half scoreboard overlay while working*/

img.xx { position:absolute; width:621px; height:414px;
         left:103px; top:0px; z-index:1;}

/* Absolute size of final scoreboard overlay */

img.sb { position:absolute; width:1242px; height:828px;
         left:-207px; top:-207px; z-index:1;}

img.gd { position:absolute; width:1242px; height:828px;
         left:-207px; top:-207px; z-index:1;}
img.hd { position:absolute; width:1242px; height:828px;
         left:-207px; top:-207px; z-index:-1;}

</style>

</head>

<body>

<br>

<center><table class=board>
  <tr>
    <td><img class=ct0 src=RVTL.jpg></td>
    <td><img class=ct0 src=CFCF.jpg></td>
    <td><img class=ct3 src=FFFF.jpg></td>
    <td><img class=ct3 src=Road.jpg></td>
    <td><img class=ct2 src=CFCF.jpg></td>
    <td><img class=ct0 src=Cath.jpg></td>
  </tr>
  <tr>
    <td><img class=ct1 src=CFCF.jpg></td>
      <td class=overlay rowspan=2 colspan=4>
        <img id="ScoreBoard" class=xx src=C2Track.gif>
        <img id="Grid" class=gd src=Grid.gif>
      </td>
    <td><img class=ct1 src=CFCF.jpg></td>
  </tr>
  <tr>
    <td><img class=ct0 src=Things.jpg></td>
    <td><img class=ct0 src=Road.jpg></td>
  </tr>
  <tr>
    <td><img class=ct3 src=IFFI.jpg></td>
    <td><img class=ct2 src=FFFF.jpg></td>
    <td><img class=ct0 src=RFIF.jpg></td>
    <td><img class=ct1 src=FFFF.jpg></td>
    <td><img class=ct2 src=CFCF.jpg></td>
    <td><img class=ct0 src=RVBR.jpg></td>
  </tr>
</table></center>

<br>
<hr>
<center>
<button onclick="FullSize()">Final Image</button>
   
<button onclick="HalfSize()">Smaller Image</button>
</center>
<script>
function FullSize() {
var x = document.getElementById("ScoreBoard");
x.className="sb";
x = document.getElementById("Grid");
if(x)x.className="hd";
}
function HalfSize() {
var x = document.getElementById("ScoreBoard");
x.className="xx";
x = document.getElementById("Grid");
if(x)x.className="gd";
}
</script>
</body>

</HTML>



After copying the blue HTML code to the MyBoard.txt file in your Tile1 directory,

Step 6: Copy the blue HTML Code to your MyBoard.txt file and save it.

Step 7: Rename your MyBoard.txt file to MyBoard.htm.

Step 8: Change to your Tile1 directory and double click the MyBoard.htm file

          Your display should look like this: but about 4 times larger

Now it is time to create your HTML files, BUT, this cannot be done with the same drag and drop process used for copying the tiles to your directory!

For each of the following htm file links:

  1. Open a DOS command prompt window
  2. cd Change to your Tile1 Directory
  3. Create the empty file: "notepad Basic.htm" (Using the name of the scoreboard file you are trying to copy)
  4. When the pop-up window says that it cannot find the file and asks if you want to create it, Answer Yes.
  5. Now click on the scoreboard filename link below.
  6. When the file opens:
  7. Right-click on the empty white space to the left or right of the scoreboard.
  8. Select "View Page Source" from the pop-up window.
  9. Then enter Ctrl-A and Ctrl-C on your keyboard to copy the page to your clipboard,
  10. Then click on the empty notepad page you created and enter Ctrl-V on your keyboard to copy the clipboard to the notepad page.
  11. Save the notepad page and close the notepad window

Repeat this process for as many of the scoreboard sample files as you want to copy.

Basic.htm     2Rivers.htm     3Rivers.htm     InnCath.htm     RivInn.htm

If all the files are now in your Tile1 folder, you can follow this link back to the HowToBYO Page.