> Support > Setting Up Your Venue > Quote, Contact & BEO Template Setup > Advanced Template editing

Advanced Template editing


Moving items in html, and doing extra styling that is not available from the iVvy toolbar, is something that you can do through the source code of the template. For those who are more knowledgeable in HTML you can also write your own css. This is for more HTML savvy users however, iVvy staff do not educate users on how to manipulate HTML code, but we give you the option to do so if you have the ability. For those that do not have a lot of experience in HTML will not know that you cannot just copy fonts or tables and paste them in another place without losing the formatting and code that is necessary to keep the formatting of the data being moved.

This we will provide instructions and assistance for below to assist in moving your data around the page.

Moving Merge/Custom Fields

Any item that has a [ ] around it, is a merge field, or a block merge field, while will pull information from your venue or booking data into the template as you create your quote, contract or BEO. To move these, copying and pasting will work, however we always recommend to be efficient and so there is no corruption of code, make sure you delete the field, put the cursor where you want it to go, and click the insert field button to add it in the correct place.
If you are unsure on how to insert these fields refer to Adding Custom Fields to a HTML Template

Moving Tables

If you created a table using the insert table button, then you can’t just drag across it and copy the code. You need to copy it in the source code, and paste it in the source code so that it takes the whole table formatting across with it.

To move a table within your template:

  1. I would recommend putting in a place holder for your table first so you can find where to copy your table to easily in the source code. Put the cursor in the position of where you wish your table to be moved to and insert a table with one row and one column. Leave all the other options as they are.
  2. Then click on the “Source” button
  3. Click “CTRL + F” to do a search and type in <table>
  4. This will take you down to a table field within your template
  5. Check the table is the correct one that you want to move (not the place holder one that we created, you will see the example below) by scouring the next few lines and checking the text is that in fact that in the table you wish to move.
  6. Put your cursor before the < symbol of the <table> field, and drag and highlight the code down the page until you find </table> field. Highlight until after the > symbol. Right click and cut the code.
  7. Search the code for the placeholder you inserted earlier. 

    It will look like this:

    <table border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
         <tbody>
              <tr>
                   <td>
                   &nbsp;</td>
              </tr>
         </tbody>
    </table>
     
  8. Highlight all of the code above, and paste what you have copied of your existing table. Click on the source code again and your table will have moved. 

Moving Text That Is Formatted

Moving formatted text (text that is styled with fonts, font sizes, colors) can be tricky. If you cut and paste, as you paste the information you lose of the formatting that you have previously loaded. To move text and retain the formatting needs to be done in the source code of your document.

To move the text within your document you will need to copy the paragraph and paste it elsewhere in the “Source Code” to retain the coding that formats it:

  1. Firstly I find it easiest to put in a place holder to made it easy to find in the source code where to paste your paragraph. I would recommend typing in something like placeholder, or aaa. Something that isn’t going to be a word within your document.
  2. Click on the "source" code button on your toolbar
  3. Click “CTRL + F” to bring up a find box and type in the first couple of works in your paragraph exactly as they are in your document. Your document will highlight where the text is from the search
  4. At the start of this paragraph there will be <p> which indicates the opening of the paragraph. You will need to put the cursor in front of the < symbol and then drag it down until you come to </p> which indicates the paragraph is closing. Stop the cursor after the > symbol, right click and cut. You have now copied your text and the web code that formats it.
  5. Now you will need to navigate to where in the source code that you wish to paste it, and the paste it. Do a “CTRL + F” again and search for your place holder text you created in step one. Lets say that we used placeholder. You will be taken to code that looks like this:
    <p>
         placeholder</p>
  6. Highlight the whole code by dragging your mouse over it and then right click and paste to replace it with your paragraph code. 

If at any time you make a mistake, click the cancel button instead of saving your template so you don’t lose the original information so you can try again.

Setting Your Font For Your Template

The toolbar gives you the ability to set the size of your font, however you may have a different font that iVvy doesn’t supply. iVvy’s default font is Arial however if you have a preference to Georgia or Times New Roman for example this will give you the ability to edit your font here.

If you wish to change the font, then we are going to assume that you wish to change the font of the whole document, not just one paragraph. To change the font of your document, you need to make the change in all three sections of your document, header, content area and footer. To make this change:

  1. Go to the first section and click on the “source” button
  2. Click on “CTRL + F” and type in body{
  3. Put the cursor after the { symbol, enter to the next line and add in the following code, with the name of the font (which you can get from the web safe font link provided) in place of FONTNAME.

    font-family:FONTNAME;
    e.g. font-family:Verdana;
     
  4. Click on the source button and the font will have changed. 

This needs to be repeated for all three sections.

Web Safe Fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp
HTML Color Picker: http://www.w3schools.com/tags/ref_colorpicker.asp

You may also be interested in ...
Was this information helpful?
Rating:  
  1 2 3 4 5