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

Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating Your First Content Node 
11 
6
Creating Your First Content Node 
Our third and final stage to creating our first page in Umbraco is to create a content node where a content 
editor can add the content and then Umbraco will use this along with the Document Type and Template to 
serve up an HTML page to web visitors.  
1.
We’re now ready to create our first page in Umbraco!   Click the 
Content
button (first option in the 
left hand menu).   
2.
Hover over the grey text 
CONTENT
and you’ll see the three dots 
...
– click this.  If you’ve done 
everything correctly so far you should see the option to create our Homepage!  
Figure 15 – Create a Homepage 
If you can’t see this then don’t panic – check that 
Settings> Document Types > Homepage 
node
Structure tab
Allow at root  
is checked. 
3.
Let’s create our homepage. Click the icon and you’ll see what we’ve just been setting up – our 
document type is now going to drive our homepage content – it gives us and the editors the fields 
they need.  
4.
In red at the top you’ll see “
Enter a name...
” click this and enter a name (on some browsers this is 
hard to see as a field – an Umbraco bug has been raised for this).  We’re going to call this 
Homepage
”.  
5.
Fill in the following on the 
Contents
tab: 
Page Title
Welcome to Widgets Ltd 
Body Text
Hello world! We can write what we like here! 
Widgets Ltd 2014”  
Convert fillable pdf to html form - 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 excel spreadsheet to fillable pdf form; pdf add signature field
Convert fillable pdf to html form - 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 pdf to pdf form fillable; pdf fillable form creator
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating Your First Content Node 
12 
Click the Footer tab and enter: 
Footer Text 
“Copyright Widgets Ltd 2014”  
6.
Now click the green 
Save and publish
button.  The menu will reload with our homepage node 
under the 
CONTENT
label. And here’s the good bit... go and refresh your webpage in your browser 
http://localhost
– the default Umbraco page will be gone and we’ll see a very bare, unstyled page! 
We’re getting there! 
Figure 16 – An Unstyled Homepage 
6.2
CSS and Javascript 
1.
Looking at our homepage we’re obviously missing the CSS and JS from the Initializr template. To 
include this navigate to your Umbraco directory in Windows Explorer and copy over the 
css\style.css
file into the 
Umbraco\Css
folder (replace Umbraco with wherever your Umbraco 
instance is being served from – e.g. “
C:\inetpub\wwwroot
”. Now refresh your webpage in your 
browser and you’ll see a more styled page. 
NOTE – you could use the Umbraco UI to create your CSS file. 
Settings > Stylesheets
... > + 
Create
and create a stylesheet called style (don’t add the file suffix .css) and paste the CSS in I find 
it easier to copy the CSS. Using either method should be noted does NOT include them in your HTML 
markup automatically – Umbraco produces clean output and this means you only wire up what you 
want and need.  
C# Create PDF from OpenOffice to convert odt, odp files to PDF in
Convert OpenOffice Text Document to PDF with embedded fonts. An advanced .NET control to change ODT, ODS, ODP forms to fillable PDF formats in Visual C# .NET.
create a fillable pdf form from a word document; change pdf to fillable form
C# PDF Field Edit Library: insert, delete, update pdf form field
A professional PDF form creator supports to create fillable PDF form in C#.NET. An advanced PDF form maker allows users to create editable PDF form in C#.NET.
convert word to fillable pdf form; convert pdf to fillable form
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating Your First Content Node 
13 
2.
Next copy the 
scripts
folder from the js directory of the initializr template to the 
Umbraco\Scripts
directory – we’ll have to update the template to look in \Scripts instead of \js. To do this go to 
Settings > Templates > Homepage
and change line 21 to say “
scripts/...
” and click 
Save
  
<script src="scripts/libs/modernizr-2.0.6.min.js"></script> 
NOTE – you can also use the UI interface to create your JS files too 
Settings > Scripts > ... > + 
Create
(again don’t add the suffix but select .js from the 
Type
dropdown) the reference in your 
template should be “
scripts/myfile.js
”.  
3.
Now in dev tools when looking at the http://localhost
page you should find that the network tab 
doesn’t report any missing assets - if it does have a look and fix any typos / check the files are in the 
right places!  
6.3
Outputting the Umbraco Data Fields 
What you’ll notice though is that our content we added to the homepage isn’t being output. We need to 
wire up the data properties to the template.  Let’s look at our template and identify where the data fields 
we created before should go.   
Figure 17 - Where our Data Fields Content Should be Output 
We’ve marked in blue where we want our data field content to be output. Now we need to wire up the 
relevant fields.  
1.
Go to the 
Settings > Templates > Homepage
. Scroll down and highlight the text “h1#title” 
around line 27.  
C# Create PDF Library SDK to convert PDF from other file formats
HTML webpage to interactive PDF file creator freeware. Create and save editable PDF with a blank page, bookmarks, links Create fillable PDF document with fields.
create a fillable pdf form from a pdf; pdf fillable forms
VB.NET Create PDF from OpenOffice to convert odt, odp files to PDF
PDF in VB.NET, VB.NET convert PDF to HTML, VB.NET convert PDF to Convert OpenOffice Spreadsheet data to PDF. Turn ODT, ODS, ODP forms into fillable PDF formats.
allow users to attach to pdf form; .net fill pdf form
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating Your First Content Node 
14 
Figure 18 - Preparing to replace the hardcoded text with an Umbraco Page Field 
2.
Click the button 
Insert Umbraco Page Field
and under the 
Choose field 
drop down select 
pageTitle
from the 
Custom Fields
section.  
Figure 19 - Umbraco Page Field 
3.
Click the green 
Insert
button then the 
Save
button.   
4.
Next do the same for the content between the “
<header></header>
” tags (around lines 42 -43) 
using field 
bodyText
 Again click the 
Insert
and then 
Save 
buttons.  
VB.NET Create PDF Library SDK to convert PDF from other file
Best VB.NET component to convert Microsoft Office Word Create and save editable PDF with a blank page Create fillable PDF document with fields in Visual Basic
convert fillable pdf to html form; auto fill pdf form from excel
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Create fillable and editable PDF documents from Excel in Create searchable and scanned PDF files from Excel in VB Convert to PDF with embedded fonts or without
convert word document to fillable pdf form; adding signature to pdf form
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating Your First Content Node 
15 
Figure 20 - Replacing the bodyText with the Umbraco Page Field 
5.
Finally we do the footer – between the <h3></h3> tags in the footer div (line 68).  
Figure 21 - Footer Text 
6.
Now go and reload your homepage... viola! We have content!   Now, we could go back and add two 
tabs called Article1, Article 2, Article Footer each containing a title and content field and wire these to 
the relevant places in the template. However this would limit the content manager to always having 
to have these sections. This might be OK but we could also use child nodes – we’ll learn about those 
later.  
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Convert to PDF with embedded fonts or without original fonts fast. Convert multiple pages PowerPoint to fillable and editable PDF documents.
convert pdf to form fill; add fillable fields to pdf online
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Create PDF files from both DOC and DOCX formats. Convert multiple pages Word to fillable and editable PDF documents.
convert html form to pdf fillable form; convert pdf to form fillable
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating More Pages 
16 
7
Creating More Pages 
7.1
Using a Maintainable Template Structure 
We’ve seen how to create a 
Document Type
. We have a simple three page site, Home, News and 
Contact Us. We could easily just create three 
Document Types
and leave 
Create matching template
checkbox checked to also create three matching templates. Then we’d copy the same HTML code, job-lot 
into each template.  This would work – on a very simple site it actually has some merits however once a 
site starts to grow this would lead to problems – for instance changing anything in the menu needs to be 
done on each template - it also means we’d need the user to set the footer on each page etc.  
Umbraco provides us with an elegant solution to keeping a consistent base template – those familiar with 
MVC will recognise it.  
To start we’re going to unpick a little bit of what we did in creating the homepage to sit the homepage 
template under a master.  
7.2
Create a Master Template  
1.
Go to the 
Settings > Templates 
and open up the tree.  At the moment we just have our 
Homepage
template.  Hover over the 
Templates
menu and click the menu 
...
button. Create a new 
template called Master, click 
+ Create 
and then give it the name “
Master”
. Remember to click 
Save
 
Figure 22 - Master Template 
2.
Now we’re going to move the 
Homepage
template under the 
Master
template. To do this select 
the 
Settings > Homepage node
and from the 
Properties tab >Master template drop down
select “
Master”
and then click 
Save
 This will update the Razor code section to change “
Layout = 
null
”; to 
“Layout = “Master.cshtml”” 
(you may have to click off the 
Homepage node
and back on to 
see this update – a bug that will be fixed in a future release of Umbraco).  
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Convert multiple pages Word to fillable and editable PDF documents in both .NET WinForms and ASP.NET. Convert both DOC and DOCX formats to PDF files.
add attachment to pdf form; change font in pdf fillable form
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Convert multiple pages PowerPoint to fillable and editable PDF documents. Easy to create searchable and scanned PDF files from PowerPoint.
convert pdf fill form; create a pdf with fields to fill in
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating More Pages 
17 
Figure 23 - Homepage Template now sits under the Master 
3.
Now we need to move the parts of our HTML template that are common across all pages into the 
Master
. This is where as a developer you might need to use your brain as it will be slightly different 
for different websites – e.g. do all pages have a <div id=”main”> as so can we put this in the master 
or does this belong to only certain pages? For this site we’ll assume this is part of the child page. Cut 
everything from the closing curly brace to line 37 
<div id=”main-container”>
- we’re going to move 
the header and nav of the site to the master template. Cut this and click 
Save
 
Figure 24 - Homepage Template After Cutting the Header 
4.
Now click on your 
Master
template and paste this HTML markup after the closing curly brace and 
remember to click 
Save
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating More Pages 
18 
Figure 25 - Master Template after Pasting the Header 
5.
At the end of this markup we need to tell Umbraco to insert the child template’s content – this is 
done by adding the code 
@RenderBody()
at the end (around line 37). Click 
Save
 
Figure 26 - Adding RenderBody() to the Master Template 
6.
Now we’ll do the same with the footer content. Cut everything from the opening of the 
footer-
container 
div (approximately line 33) from the 
Settings > Templates > Homepage > template 
tab
, click 
Save
and then paste this into the 
Master
template under the 
@RenderBody
field we’ve 
just added. Remember to click 
Save
.  
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating More Pages 
19 
Figure 27 – Completed Master Template 
7.
Now we’ve done a lot of work – and what we should see if we refresh our localhost page is nothing 
has changed!  If you have a compilation error you’ve perhaps mistyped 
@RenderBody()
. If you’re 
missing any content (header or footer) check that what you have in the templates matches the 
following: 
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage 
@{ 
Layout = null; 
}<!doctype html> 
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]--> 
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]--> 
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title></title> 
<meta name="description" content=""> 
<meta name="author" content=""> 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
<link rel="stylesheet" href="css/style.css"> 
<script src="js/libs/modernizr-2.0.6.min.js"></script> 
</head> 
<body> 
<div id="header-container"> 
<header class="wrapper clearfix"> 
<h1 id="title">@Umbraco.Field("pageTitle")</h1> 
<nav> 
<ul> 
<li><a href="#">nav ul li a</a></li> 
<li><a href="#">nav ul li a</a></li> 
Siempre Solutions Ltd – www.siempresolutions.co.uk | Creating More Pages 
20 
<li><a href="#">nav ul li a</a></li> 
</ul> 
</nav> 
</header> 
</div> 
@RenderBody() 
<div id="footer-container"> 
<footer class="wrapper"> 
<h3>@Umbraco.Field("footerText")</h3> 
</footer> 
</div> 
</body> 
</html> 
Figure 28 - Complete Master Template 
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage 
@{ 
Layout = "Master.cshtml"; 
<div id="main-container"> 
<div id="main" class="wrapper clearfix"> 
<article> 
<header> 
@Umbraco.Field("bodyText") 
</header> 
<section> 
<h2>article section h2</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum 
iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis 
nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit 
suscipit ultrices. Proin in est sed erat facilisis pharetra.</p> 
</section> 
<section> 
<h2>article section h2</h2> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum 
iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis 
nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit 
suscipit ultrices. Proin in est sed erat facilisis pharetra.</p> 
</section> 
<footer> 
<h3>article footer h3</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 
elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum 
iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis 
nec. Curabitur posuere enim eget turpis feugiat tempor.</p> 
</footer> 
</article> 
<aside> 
<h3>aside</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis 
libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. 
Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit 
suscipit ultrices.</p> 
</aside> 
</div> <!-- #main --> 
</div> <!-- #main-container --> 
Figure 29 - Complete Homepage Template 
If you’re new to these concepts then I don’t think what we’ve just done is going to make much sense 
until we make our next page.  
7.3
Creating More Pages Using the Master – Contact Us 
1.
We’re now going to make a simple page where we’ll just put our contact details. For added 
functionality you might want to look at replacing this with a contact us form – see 
Documents you may be interested
Documents you may be interested