create new ticket
check ticket statusThe following page contains the Homepage HTML code for some different themes available in 3.12. Simply download the text file associated with the theme you would like to use and paste it into the Homepage HTML box under "Customize This Portal" on your portal's edit page. For more information, see Online Configuration-Portals.
Sketch & Print
Copy and paste the following code into your portal's Custom Homepage HTML box:
<section class="hero">
<div class="row secondary-bg-color-theme">
<div class="col-md-4 col-sm-6 no-padding"><img src="https://support.docketmanager.net/portals/sketch-print/homepage-banner-1.jpg" alt="homepage-banner-1" /></div>
<div class="col-md-4 col-sm-6 no-padding"><img src="https://support.docketmanager.net/portals/sketch-print/homepage-banner-2.jpg" alt="homepage-banner-2" /></div>
<div class="col-md-4 col-sm-12 no-padding hero-message">
<h4>Bringing your ideas to life for over 10 years</h4>
<a href="/ProductList.aspx?" class="btn btn-lg btn-primary primary-bg-color-theme text-center">Explore our products</a>
</div>
</div>
</section>
<section class="how-it-works">
<div class="row">
<div class="col-md-3 step">
<img src="https://support.docketmanager.net/portals/sketch-print/design.png" alt="design" />
<h4>Design</h4>
<p>Use your existing designs or our pre-designed templates to create the perfect masterpiece!</p>
</div>
<div class="col-md-3 step">
<img src="https://support.docketmanager.net/portals/sketch-print/customize.png" alt="customize" />
<h4>Customize</h4>
<p>With Sketch & Print you always have access to any the stock and finishing options you could want. </p>
</div>
<div class="col-md-3 step">
<img src="https://support.docketmanager.net/portals/sketch-print/order.png" alt="order" />
<h4>Order</h4>
<p>This is the easy part! Our checkout process is fast so you can get back to more important stuff!</p>
</div>
<div class="col-md-3 step">
<img src="https://support.docketmanager.net/portals/sketch-print/collect.png" alt="collect" />
<h4>Collect</h4>
<p>Have it shipped right to your door or pick up from the store! Rest assured your order will be ready fast!</p>
</div>
</div>
</section>
<section class="making-it-happen secondary-bg-color-theme">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-5 text no-padding primary-bg-color-theme">
<h2 class="secondary-color-theme">Making it happen</h2>
<p>You think it, we print it. Sketch & Print can take the guess work out of your production process and let you focus on being creative. Ask us about our new textured stocks!</p>
</div>
<div class="col-md-3 no-padding">
<img class="round-image" src="https://support.docketmanager.net/portals/sketch-print/rounded-print.jpg" alt="rounded-image" />
</div>
<div class="col-md-2">
</div>
</div>
</section>
<section class="services primary-bg-color-theme">
<div class="row no-padding">
<div class="col-md-8 service-left no-padding">
<div class="row">
<div class="col-md-4 service">
<img src="https://support.docketmanager.net/portals/sketch-print/branding.png" alt="branding" />
<h4>Design & Branding</h4>
<p>Let our talented team of graphic designers create the perfect logo or printed materials!</p>
</div>
<div class="col-md-4 service">
<img src="https://support.docketmanager.net/portals/sketch-print/print.png" alt="print-copy" />
<h4>Print & Copy</h4>
<p>Prints and copies are available in a wide range of sizes so that all your needs are met. </p>
</div>
<div class="col-md-4 service">
<img src="https://support.docketmanager.net/portals/sketch-print/apparel.png" alt="apparel" />
<h4>Apparel</h4>
<p>We can print on almost any type of apparel. Ask about our sports teams specials today!</p>
</div>
</div>
<div class="row">
<div class="col-md-4 service">
<img src="https://support.docketmanager.net/portals/sketch-print/blueprints.png" alt="blueprints" />
<h4>Blueprints</h4>
<p>Large format blueprints available in black and white, line color, and on colored stocks.</p>
</div>
<div class="col-md-4 service">
<img src="https://support.docketmanager.net/portals/sketch-print/signage.png" alt="signage" />
<h4>Outdoor Signage</h4>
<p>Did you know that we can print and install your outdoor signage? Contact us for a quote. </p>
</div>
<div class="col-md-4 service">
<img src="https://support.docketmanager.net/portals/sketch-print/direct-mail.png" alt="direct-mail" />
<h4>Direct Mail</h4>
<p>Get the word out with our direct mailing packages! Prices vary - contact for more details!</p>
</div>
</div>
</div>
<div class="col-md-4 service-right">
<h2 class="secondary-color-theme">Our Services</h2>
<p>With Sketch & Print you never have to guess. Our quality, service, and customer appreciation is always consistent. We wouldn’t be here without you!
<br /><br />
Don’t see what you’re looking for? Give us a shout and we’ll point you in the right direction. We are constantly expanding our services to meet your needs! </p>
<a href="/ProductList.aspx?" class="btn btn-lg btn-primary secondary-bg-color-theme text-center">View More</a>
</div>
</div>
</section>
<section class="call-to-action">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center cta-text">
<h3 class="">Get started with our new customizable template library!</h3>
<a href="/ProductList.aspx?" class="btn btn-lg btn-primary primary-bg-color-theme text-center">Let's go!</a>
</div>
<div class="col-md-4"></div>
</div>
</section>Charcoal Studio
Copy and paste the following code into your portal's Custom Homepage HTML box:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="/ProductList.aspx"><img src="https://support.docketmanager.net/portals/paper-studio/slider1.jpg" alt="slide 1" ></a>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<a href="/ProductList.aspx"><img src="https://support.docketmanager.net/portals/paper-studio/slider2.jpg" alt="slide 2" ></a>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<a href="/ProductList.aspx"><img src="https://support.docketmanager.net/portals/paper-studio/slider1.jpg" alt="slide 3" ></a>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Left and right controls
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-right fas fa-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right fas fa-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a> -->
</div>
</div>
<section class="products-list" style="padding-top:25px;">
<!-- Products Row Starts -->
<div class="row">
<!-- Product #1-->
<div class="col-md-4 col-sm-6">
<div class="product-col">
<!--Image Link-->
<div class="image"><img src="https://support.docketmanager.net/portals/paper-studio/Leather-Drawstring-Pouch-MockUp.jpg" alt="product" class="img-responsive" /></div>
<div class="caption">
<!--Title-->
<h4><a href="ProductList.aspx?Id=e714b165-20b9-412f-b4eb-2ef490196369">Apparel</a></h4>
<!--Button-->
<div class="cart-button"><a href="ProductList.aspx?Id=e714b165-20b9-412f-b4eb-2ef490196369" class="btn btn-cart">View Now</a> </div>
</div>
</div>
</div>
<!-- Product #2-->
<div class="col-md-4 col-sm-6">
<div class="product-col">
<!--Image Link-->
<div class="image"><img src="https://support.docketmanager.net/portals/paper-studio/Rubber-Stamp-PSD-MockUp-3.jpg" alt="product" class="img-responsive" /></div>
<div class="caption">
<!--Title-->
<h4><a href="ProductList.aspx?Id=e714b165-20b9-412f-b4eb-2ef490196369">Stamps & Seals</a></h4>
<!--Button-->
<div class="cart-button"><a href="ProductList.aspx?Id=e714b165-20b9-412f-b4eb-2ef490196369" class="btn btn-cart">View Now</a> </div>
</div>
</div>
</div>
<!-- Product #3 -->
<div class="col-md-4 col-sm-6">
<div class="product-col">
<!--Image Link-->
<div class="image"><img src="https://support.docketmanager.net/portals/paper-studio/Mug-PSD-MockUp-3.jpg" alt="product" class="img-responsive" /></div>
<div class="caption">
<!--Title-->
<h4><a href="ProductList.aspx?Id=e714b165-20b9-412f-b4eb-2ef490196369">Mugs</a></h4>
<!--Button-->
<div class="cart-button"><a href="ProductList.aspx?Id=e714b165-20b9-412f-b4eb-2ef490196369" class="btn btn-cart">View Now</a> </div>
</div>
</div>
</div>
</div>
<!-- Products Row Ends -->
</section>Color Blocks
Copy and paste the following code into your portal's Custom Homepage HTML box:
<div class="row pageheight">
<!--Block 1-->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 blocks burgundy">
<!--Category-->
<h5 style="color:#fff;">Stationery</h5>
<!--Title-->
<h1>Business Cards</h1>
<!--Text-->
<p><br>
Networking has never been easier. Create a Business Card that gets you noticed. Same Day Business Cards are also available. <br>
Choose from our business card templates, or upload your own design.<br>
Variety of business card stock and finishes to choose from. </p>
<div class="cart-button"><a href="ProductList.aspx?" class="btn btn-cart secondary-bg-color-theme" style="color:#fff;">View Now</a> </div>
</div>
<!--Block 2-->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 blocks salmon">
<!--Category-->
<h5 style="color:#fff;">Marketing</h5>
<!--Title-->
<h1>Posters</h1>
<!--Text-->
<p><br>
Make a statement with Posters and signature large prints! Simply choose your poster print size and upload your image.<br>
Getting the word out about your business has never been easier.<br>
We have dozens of paper types and colours to choose from. Select from our many templates or use your own.</p>
<div class="cart-button"><a href="ProductList.aspx?" class="btn btn-cart secondary-bg-color-theme" style="color:#fff;">View Now</a> </div>
</div>
<!--Block 3-->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 blocks navy">
<!--Category-->
<h5 style="color:#fff;">Promotional</h5>
<!--Title-->
<h1>Banners</h1>
<!--Text-->
<p><br>
Insert your picture, logo and text quick and easy! Now you can create an envelope with mixed designs! Choose from printed envelopes or customer labels.<br>
Give your mailing presence a professional front with branded envelopes.
Dozens of paper types, colours, and weights to choose from.</p>
<div class="cart-button"><a href="/ProductList.aspx?" class="btn btn-cart secondary-bg-color-theme" style="color:#fff;">View Now</a> </div>
</div>
<!--Block 4-->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 blocks red">
<!--Category-->
<h5 style="color:#fff;">Stationery</h5>
<!--Title-->
<h1>Letterhead</h1>
<!--Text-->
<p><br>
Display your business info on custom letterhead.
Order custom letterhead in as few as 250 sheets per package.<br>
Increase brand awareness and show off your business with letterhead you can be proud of. <br>
Add your own text and logos to create a custom design your customers will remember. </p>
<div class="cart-button"><a href="ProductList.aspx?" class="btn btn-cart secondary-bg-color-theme" style="color:#fff;">View Now</a> </div>
</div>
<!--Block 5-->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 blocks mint">
<!--Category-->
<h5 style="color:#fff;">Marketing</h5>
<!--Title-->
<h1>Brochures</h1>
<!--Text-->
<p><br>
Trifold or bifold brochures with full color on both sides.<br>
Available in a flat-matte or glossy finish.
Choose from multiple templates or design your own.<br>
We have dozens of paper types and colours to choose from. <br>
Select from templates or use a custom design.</p>
<div class="cart-button"><a href="ProductList.aspx?" class="btn btn-cart secondary-bg-color-theme" style="color:#fff;">View Now</a> </div>
</div>
<!--Block 6-->
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 blocks green">
<!--Category-->
<h5 style="color:#fff;">Stationery</h5>
<!--Title-->
<h1>Forms</h1>
<!--Text-->
<p><br>
If you're tired of writing things by hand or depending on computer templates, you can use pre-printed business forms, including purchase orders, petty cash vouchers, sales orders, and receipt vouchers, to complete your transactions. Available in bilingual formats to be accessible for all.</p>
<div class="cart-button"><a href="ProductList.aspx?" class="btn btn-cart secondary-bg-color-theme" style="color:#fff;">View Now</a> </div>
</div>
</div>Rainbow Pixels
Copy and paste the following code into your portal's Custom Homepage HTML box:
<!--Featured Product Row-->
<div class="row featureproductrow">
<!--Product 1-->
<div class="col-md-3 col-sm-3 col-xs-6 featureproduct"> <a href="ProductList.aspx?Id=452f1fdd-7d09-4c08-9be5-49040acf2429">
<!--Product 1 Image-->
<img src="https://support.docketmanager.net/portals/pixel-print/buscard.png"/>
<!--Product 1 Title-->
<h4 class="secondary-color-theme">Business Cards</h4>
</a> </div>
<!--Product 2-->
<div class="col-md-3 col-sm-3 col-xs-6 featureproduct"> <a href="ProductList.aspx?Id=d4ed31ae-5d9c-49d4-9e5b-a3fa292f237f">
<!--Product 2 Image-->
<img src="https://support.docketmanager.net/portals/pixel-print/poster.png"/>
<!--Product 2 Title-->
<h4 class="secondary-color-theme">Posters</h4>
</a> </div>
<!--Product 3-->
<div class="col-md-3 col-sm-3 col-xs-6 featureproduct"> <a href="ProductList.aspx?Id=ca613eb3-778c-4796-951d-8c50bf77aad1">
<!--Product 3 Image-->
<img src="https://support.docketmanager.net/portals/pixel-print/envelopes.png"/>
<!--Product 2 Title-->
<h4 class="secondary-color-theme">Envelopes</h4>
</a> </div>
<!--Product 4-->
<div class="col-md-3 col-sm-3 col-xs-6 featureproduct"> <a href="ProductList.aspx?Id=67eb7edb-9435-4c94-8aa9-62e344e6e1a4">
<!--Product 4 Image-->
<img src="https://support.docketmanager.net/portals/pixel-print/letterhead.png"/>
<!--Product 4 Title-->
<h4 class="secondary-color-theme">Letterhead</h4>
</a> </div>
</div>
<div class="row afterfeaturerow">
<!--Side Menu-->
<div class="col-md-3 col-sm-4 hidden-xs">
<h3 class="side-heading primary-color-theme secondary-bg-color-theme">What We Offer:</h3>
<div class="list-group categories"> {{NavigationDisplay}} </div>
</div>
<!--Image/Text Slider-->
<div class="col-md-9 col-sm-8 productslider">
<div id="slideshow">
<!--Slide 1-->
<div class="col-md-12 col-sm-12">
<div class="col-md-5 col-sm-5 col-xs-12 slideshowpic">
<!--Slide 1 Image-->
<img src="https://support.docketmanager.net/portals/pixel-print/buscard.png"> </div>
<div class="col-md-7 col-sm-7 col-xs-12 slideshowtext">
<!--Slide 1 Category-->
<h5>Stationery</h5>
<!--Slide 1 Title-->
<h1> Business Cards</h1>
<!--Slide 1 Text-->
<p><br>
Networking has never been easier. Create a Business Card that gets you noticed. Same Day Business Cards are also available. <br>
Choose from our business card templates, or upload your own design.<br>
Variety of business card stock and finishes to choose from <br>
Great for promoting your business and networking! </p>
<!--Slide 1 Button-->
<div class="cart-button"><a href="ProductList.aspx?Id=452f1fdd-7d09-4c08-9be5-49040acf2429" class="btn btn-cart primary-bg-color-theme">View Now</a> </div>
</div>
</div>
<!--Slide 2-->
<div class="col-md-12 col-sm-12">
<div class="col-md-5 col-sm-5 col-xs-12 slideshowpic">
<!--Slide 2 Image-->
<img src="https://support.docketmanager.net/portals/pixel-print/poster.png"> </div>
<div class="col-md-7 col-sm-7 col-xs-12 slideshowtext">
<!--Slide 2 Category-->
<h5>Marketing</h5>
<!--Slide 2 Title-->
<h1> Posters</h1>
<!--Slide 2 Text-->
<p><br>
Make a statement with Posters and signature large prints! Simply choose your poster print size and upload your image.<br>
Getting the word out about your business has never been easier.<br>
We have dozens of paper types and colours to choose from. Select from our many templates or use your own custom design or layout.</p>
<!--Slide 2 Button-->
<div class="cart-button"><a href="ProductList.aspx?Id=d4ed31ae-5d9c-49d4-9e5b-a3fa292f237f" class="btn btn-cart primary-bg-color-theme">View Now</a> </div>
</div>
</div>
<!--Slide 3-->
<div class="col-md-12 col-sm-12">
<div class="col-md-5 col-sm-5 col-xs-12 slideshowpic">
<!--Slide 3 Image-->
<img src="https://support.docketmanager.net/portals/pixel-print/envelopes.png"> </div>
<div class="col-md-7 col-sm-7 col-xs-12 slideshowtext">
<!--Slide 3 Category-->
<h5>Stationery</h5>
<!--Slide 3 Title-->
<h1>Envelopes</h1>
<!--Slide 3 Text-->
<p><br>
Insert your picture, logo and text quick and easy! Now you can create an envelope with mixed designs! <br>
Choose from printed envelopes or customer labels.<br>
Give your mailing presence a professional front with branded envelopes.<br>
Dozens of paper types and colours to choose from. Select from our many templates or use your own custom design or layout.</p>
<!--Slide 3 Button-->
<div class="cart-button"><a href="ProductList.aspx?Id=ca613eb3-778c-4796-951d-8c50bf77aad1" class="btn btn-cart primary-bg-color-theme">View Now</a> </div>
</div>
</div>
</div>
</div>
</div>Vintage Video
Copy and paste the following code into your portal's Custom Homepage HTML box:
<video autoplay muted loop id="myVideo"> <!--Video Link--> <source src="https://support.docketmanager.net/portals/full-screen-video/Blurry%20Video%20Of%20People%20Working.mp4" type="video/mp4"> </video> <!--Logo Link--> <div class="col-md-12 logomain"> <img src="https://support.docketmanager.net/portals/full-screen-video/vintage-shadow.png"/> <!--Tagline--> <h2 class="slogan">Where technology & craftsmanship meet.</h2> <!--Button--> <div class="homebutton btn btn-lg"><a href="ProductList.aspx?" class="primary-color-theme"><strong style="color:#cc7833;">View Our Products</strong></a></div> </div>
Electro Green
Copy and paste the following code into your portal's Custom Homepage HTML box:
<div class="col-md-3">
<h3 class="side-heading">Categories</h3>
<div class="list-group categories">
{{NavigationDisplay}}
</div><img src="https://support.docketmanager.net/OnlineOrdering/images/side-banner1.jpg" alt="Side Banner" class="img-responsive" /></i>
</i>
</i>
</div>
<div class="col-md-9">
<div class="welcome">
<h2>Welcome back, <span class="name">{{ContactName}}</span></i>
</i>
</i>
</h2>
<h3>For the month of september receive</i>
</i>
</i>
</h3>
<h4>free shipping!</i>
</i>
</i>
</h4>
</div>
<div class="col2-banners">
<ul class="row list-unstyled">
<li class="col-sm-8"><img src="https://support.docketmanager.net/OnlineOrdering/images/homebanner1.jpg" alt="banners" class="img-responsive" /></i>
</i>
</i>
</li>
<li class="col-sm-4"><img src="https://support.docketmanager.net/OnlineOrdering/images/homebanner2.jpg" alt="banners" class="img-responsive" /></i>
</i>
</i>
</li>
</ul>
</div>
<section class="products-list">
<!-- Heading Starts -->
<h2 class="product-head">Specials Products</h2>
<!-- Heading Ends -->
<!-- Products Row Starts -->
<div class="row">
<!-- Product #1 Starts -->
<div class="col-md-4 col-sm-6">
<div class="product-col">
<div class="image"><img src="https://support.docketmanager.net/OnlineOrdering/images/brochures.png" alt="product" class="img-responsive" /></div>
<div class="caption">
<h4><a href="ProductDetails.aspx?TemplateOrderItemId=4da538a8-13b8-4c9a-b2c2-9ffb7f782141">Brochures</a></h4>
<div class="description"> Lorem ipsum nunc ut lorem maximus, fringilla odio id, vehicula adipiscing velit... </div>
<div class="price"><span class="price-new">$49.00</span> <span class="price-old">$65.99</span></div>
<div class="cart-button"><a href="ProductDetails.aspx?TemplateOrderItemId=4da538a8-13b8-4c9a-b2c2-9ffb7f782141" class="btn btn-cart">Order Now </a> </div>
</div>
</div>
</div>
<!-- Product #1 Ends -->
<!-- Product #2 Starts -->
<div class="col-md-4 col-sm-6">
<div class="product-col">
<div class="image"><img src="https://support.docketmanager.net/OnlineOrdering/images/BusinessCard.png" alt="product" class="img-responsive" /></div>
<div class="caption">
<h4><a href="ProductEdit.aspx?TemplateOrderItemId=ccd41b9b-80d0-499b-9934-1f3647f2ee48">full color business cards</a></h4>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit dapibus accumsan nisl... </div>
<div class="price"><span class="price-new">$19.50</span> <span class="price-old">$24.50</span></div>
<div class="cart-button"><a href="ProductEdit.aspx?TemplateOrderItemId=ccd41b9b-80d0-499b-9934-1f3647f2ee48" class="btn btn-cart">Order Now </a> </div>
</div>
</div>
</div>
<!-- Product #2 Ends -->
<!-- Product #3 Starts -->
<div class="col-md-4 col-sm-6">
<div class="product-col">
<div class="image"><img src="https://support.docketmanager.net/OnlineOrdering/images/3198f5c3-386b-440c-a222-781d85dab746.png" alt="product" class="img-responsive" /></div>
<div class="caption">
<h4><a href="ProductDetails.aspx?TemplateOrderItemId=ebe2021b-d5f0-4cd7-9eab-640f85278928">Promotional Pens</a></h4>
<div class="description">Lorem ipsum maecenas maximus, sem ut vulputate congue, libero consequat leo... </div>
<div class="price"><span class="price-new">$9.99</span> <span class="price-old">$14.75</span></div>
<div class="cart-button"><a href="ProductDetails.aspx?TemplateOrderItemId=ebe2021b-d5f0-4cd7-9eab-640f85278928" class="btn btn-cart">Order Now </a> </div>
</div>
</div>
</div>
<!-- Product #3 Ends -->
</div>
<!-- Products Row Ends -->
</i>
</i>
</i>
</section>
</div>Default Theme
Copy and paste the following code into your portal's Custom Homepage HTML box:
<img src="https://support.docketmanager.net/Images/demo2welcome.jpg" />
<h2 class="contactname">{{ContactName}}</h2>