convert pdf byte array to image byte array c# : Create fillable form pdf online control application platform web page azure asp.net web browser Umbraco%20Manual%207.1%20-%20How%20to%20Create%20an%20Umbraco%20Website%20from%20Flat%20HTML%20Files0-part1129

Siempre Solutions Ltd – www.siempresolutions.co.uk | Introduction 
Steve Morgan – www.siempresolutions.co.uk
How to Create an Umbraco Website from 
Flat HTML Files 
Revision History 
Version 
Release Date 
Author 
Comment / Amends 
1.0 
20/04/2014 
Steve Morgan 
Initial Release. 
Create fillable form pdf online - C# PDF Form Data fill-in Library: auto fill-in PDF form data in C#.net, ASP.NET, MVC, WinForms, WPF
Online C# Tutorial to Automatically Fill in Field Data to PDF
convert pdf forms to fillable; convert pdf fillable form
Create fillable form pdf online - VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
VB.NET PDF Form Data fill-in library: auto fill-in PDF form data in vb.net, ASP.NET, MVC, WinForms, WPF
convert word to pdf fillable form; create a pdf form to fill out and save
Siempre Solutions Ltd – www.siempresolutions.co.uk | Introduction 
1
Introduction  
The idea of this document is to take you step by step through an Umbraco website build. It will allow you 
to take any website “template” (e.g. flat HTML, CSS and JS) and install it into a fresh Umbraco and wire up 
the sections that need content managing in Umbraco.  Umbraco is a seriously powerful CMS but many find 
the learning curve of installing a website from scratch a little too much – this guide aims to explain the 
mysteries! 
We avoid using one of the starter kits as when it comes to building your own site these don’t give you an 
understanding of the basics of Umbraco Document Types and Templates and how these work together to 
build pages.  
2
What You’ll Need 
To take you through a demo of installing a basic site in Umbraco you need the following: 
A clean, empty installation of Umbraco – e.g. no starter site installed, see the notes below what to 
do when running through the installation wizard. Use the latest main 7.X download. Follow the 
installation steps in the documentation http://our.umbraco.org/documentation/Installation
A copy of Initializr – a HTML5, responsive template which is a nice start for any website. 
https://github.com/verekia/initializr-template/archive/master.zip
if you prefer you can use your own 
flat HTML files but my examples will use this. 
3
Getting Started 
3.1
Installing an Empty Umbraco 
This guide doesn’t cover the installation of Umbraco – follow the instructions in 
http://our.umbraco.org/documentation/Installation
. When you see the first splash screen click 
customize
– either fill in your MS SQL blank DB credentials or use the CE option – then on the final screen use the 
No thanks I do not want to use a starter website
”.  
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Convert multiple pages Word to fillable and editable Easy to create searchable and scanned PDF files
adding a signature to a pdf form; create a pdf form to fill out
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Bookmark. Metadata: Edit, Delete Metadata. Form Process. multiple pages PowerPoint to fillable and editable Create PDF file from PowerPoint free online without
pdf signature field; convert word form to fillable pdf
Siempre Solutions Ltd – www.siempresolutions.co.uk | Getting Started 
Figure 1 - Installation Splash Screen - note the Customize link 
Figure 2 - Install a starter website - No Thanks! 
3.2
Checking you have an Empty Umbraco Install 
When you hit your local host address (http://localhost
or whatever you’ve set up) you should see the 
Umbraco empty page screen.  
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create fillable and editable PDF documents from Excel Create searchable and scanned PDF files from
convert pdf to fillable form online; fillable pdf forms
C# Create PDF from Excel Library to convert xlsx, xls to PDF in C#
Create fillable and editable PDF documents from Excel in both Create searchable and scanned PDF files from Excel. Export PDF from Excel with cell border or no
convert pdf to fill in form; acrobat fill in pdf forms
Siempre Solutions Ltd – www.siempresolutions.co.uk | Getting Started 
Figure 3 - This is correct – we have a blank, empty Umbraco website! 
If you can see the Umbraco Starter kit site you’ve missed the option to install Umbraco with no starter site.   
Figure 4- You should NOT see this! 
You need to reinstall Umbraco if you can see the starter kit – if you did a manual install you can delete all 
files in the directory where your local host is being served from, copy the Umbraco zip contents back in and 
then hit localhost.   
3.3
Preparing the Initializr Template Site  
C# Create PDF Library SDK to convert PDF from other file formats
Create fillable PDF document with fields. Preview PDF documents without other plug-ins. Able to download free trial and use online example source code in C#
convert word doc to fillable pdf form; change font size pdf fillable form
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Convert multiple pages PowerPoint to fillable and editable Easy to create searchable and scanned PDF files Export PowerPoint hyperlink to PDF in .NET console
convert fillable pdf to word fillable form; add signature field to pdf
Siempre Solutions Ltd – www.siempresolutions.co.uk | Document Types 
Now unzip the Initializr contents to a folder onto your desktop (or a place of your choosing).  Now open 
the 
index.html
from this directory in your preferred browser to see the template – you can see it’s full of 
lovely filler text with dummy links. We’re going to turn this into a fully fledged, working site!  
Figure 5 - The Initializr Template 
Log into your Umbraco installation (e.g. go to http://localhost/umbraco
in your browser).  You should be 
faced with an empty Umbraco installation – but where to start!? 
Figure 6 - A barren, empty Umbraco installation 
4
Document Types 
4.1
Data first – nothing in = nothing out! 
Step 1 of any site is to create a “
Document Type
” – after a few installations you’ll speak this terminology 
but at the start it’s a little bit bewildering.  A 
Document Type
is a data container in Umbraco where you 
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Convert multiple pages Word to fillable and editable PDF Easy to create searchable and scanned PDF files Change Word hyperlink to PDF hyperlink and bookmark.
change font size in pdf fillable form; convert word form to pdf with fillable
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
Edit Bookmark. Metadata: Edit, Delete Metadata. Form Process. Create PDF document from OpenOffice Text Document with ODT, ODS, ODP forms into fillable PDF formats
auto fill pdf form fields; create fill in pdf forms
Siempre Solutions Ltd – www.siempresolutions.co.uk | Document Types 
can add data fields / attributes where the editor user can input data and Umbraco can use it to output it in 
the relevant part of a “
template
” (more on these later).   
Document Types
are infinitely extendable but usually you’ll add data fields something like the following: 
Page title 
Sub Heading 
Body Text 
Meta Title 
Meta Description 
... 
Each 
Data Field
has a type - e.g. a text string or a number or rich text body... we’ll come to this later. 
4.2
Creating your first Document Type 
1.
Right, let’s get busy. Go to the 
Settings 
menu in Umbraco. This is the third button on the left hand 
black menu with the spanner. Then you’ll see a long list of settings – don’t worry about these yet, 
we’ll introduce them as we need them.  
2.
Document Types
is strangely positioned as the last option in the list yet it’s always the starting 
point for any Umbraco build.  Hover over the 
Document Types
node
and you’ll see three dots 
...
click this to see the menu. Then click 
+  Create 
button.  
Figure 7 - Creating a Document Type 
3.
Ignore the 
Master Document Type
drop down for now. Give our new 
Document Type
the 
Name
= “
HomePage”
and ensure the 
Create matching template
checkbox is checked.  Click 
Create
.  
VB.NET Create PDF Library SDK to convert PDF from other file
Create fillable PDF document with fields in Visual Basic .NET Load PDF from stream programmatically in VB.NET. Free trial and use online source code are
convert pdf fillable form to html; asp.net fill pdf form
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
Create PDF document from OpenOffice Presentation in both .NET WinForms and ODT, ODS, ODP forms to fillable PDF formats in Online source code for C#.NET class.
attach file to pdf form; create fillable form pdf online
Siempre Solutions Ltd – www.siempresolutions.co.uk | Document Types 
Figure 8 – Name your Document Type 
4.
Umbraco now adds a 
Document Type
to the tree under the node. You’ll see four tabs 
Info
,
Structure
Generic properties
Tabs
 Click 
Info
(should already be selected) and then the 
Choose...
link next to the 
Icon
label.   Enter “
home
” into the search and you'll have a house icon – 
this will help our editors in the 
Content
tree later. 
Figure 9 - Adding an Icon to Document Type 
5.
Enter in the 
Description
field “
This is our homepage template
”.  This text is used to help the user 
select the correct document type later.  
6.
Next click the 
Structure
tab and check 
Allow at root. 
This will allow us to create a homepage at 
the root (simple huh?).  
7.
Next we go to the 
Tabs
tab. Create a new tab called “
Contents
” and then another called “
Footer
” 
(enter the name and click the 
New tab 
button remembering to click 
Save
after). 
Siempre Solutions Ltd – www.siempresolutions.co.uk | Document Types 
Figure 10 - Document Types - Adding Tabs 
8.
Now go to the 
Generic properties
– this tab is where we create the data containers that the 
homepage will need and use.  Click on the link 
Click here to add a new property
. Enter the 
Name
Page Title
”. When you move to the next field you’ll see Umbraco helpfully gives you the alias 
“pageTitle”.  The 
Type
is defaulted to “
Textstring”
and 
Tab
= “
Contents
” (remember, we just 
created that!).  
Description
again helps the editor so we’ll fill this in “
The main title of the page 
(e.g. Welcome to Widgets Ltd).
“  
Figure 11 - Creating our pageTitle Data Type 
9.
Ignore the rest of the fields for now and click the green 
Save
button at the top right.  
10.
Repeat this step, clicking the 
Click here to add a new property link
at the top of the 
Generic 
Properties tab
and create these (remembering to click 
Save
each time): 
Siempre Solutions Ltd – www.siempresolutions.co.uk | Document Types 
Name
:  
Body Text 
Alias
 
bodyText 
Type
 
Richtext editor 
(click the arrow on the Type field!)
Tab:
Contents 
Description
:  
The main content of the page.  
Name
  
Footer Text 
Alias
 
footerText 
Type
 
Textstring  
Tab:
Footer 
(remember to change this!)
Description
:  
Copyright notice for the footer.   
11.
You should now have a 
Generic Properties tab
that looks like this: 
Figure 12 - Generic Properties Tab of your Homepage Document Type 
We’ve now created our first Document Type – Umbraco needs three things to create a webpage and this is 
the first and most important. It takes the data inside an instance of the Document Type and merges it with 
a template – we’ll edit our template next. 
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating (Editing) Your First Template 
10 
5
Creating (Editing) Your First Template 
1.
Next click the expand node icon (it’s the small triangle)  behind the 
Settings >
Templates folder
– you should then see a child node titled “
Homepage
” – we created this automatically when we 
created the 
Document Type
(remember that checkbox?).  
NOTE – in early versions of 7.1 the tree doesn’t automatically refresh to show you this, if it’s missing 
try a hard refresh of Umbraco (Ctrl+F5) – should be fixed soon.   
Clicking on the 
Homepage node
will load the template – which, except for a little bit of Razor code, 
is empty! 
Figure 13 - Empty Homepage Template 
2.
Leaving the code that’s there (if you don’t understand it, don’t worry!) let’s copy our template code 
in. Open up 
index.html
from the 
Initializr
template in your favourite text editor (Notepad++ is 
good).  Copy and paste the whole thing into this template **after** the closing curly brace “}”.  Your 
template should now look like below: 
Figure 14 - Homepage template 
3.
Click the 
Save
button.   
We now have a template. That’s two out of the three stages complete for our first page.  
Documents you may be interested
Documents you may be interested