Integrating HTML themes

Todd Gordner

April 01, 2022 17:13

The skeleton file below is a stripped down version of a PrintnowDisplay.master to use in theme development. It includes the minimum code required to convert a standard HTML bootstrap theme into a Print Store theme. There are other master pages you will find in the Print Store theme structure but this one is the core file you will work with to complete a standard integration.

Tip

It's highly recommended to use a developer comfortable with HTML & CSS to integrate HTML themes. PrintNow does offer a theme integration service to consider.

Follow these basic steps to get started:

Get started reviewing Theme development and Print Store theme structure.
Search sites like themeforest.net for an HTML Bootstrap 4 template.
Purchase a license and download all the files.
Download the skeleton.zip file.
Working with the HTML Bootstrap template start by modifying a new HTML template that includes the header, home page, and footer design you want. It's easier to work with the HTML template files on your desktop until your satisfied with the design and layout integrating it into PrintNow.
After completing the header, home page, and footer all in one template save a new copy that has the home page center content removed. You can add the home page to a Print Store CMS page later in the process. You essentially want a header, blank center content, and footer to work with.
The next step is to take the code found in the skeleton PrintnowDisplay.master file and wrap it around your html content where appropriate (head, body, form) as shown.
Make sure not to have any duplicate form tags or it will error and not render correctly. We tend to hide the form controls section with CSS while we are developing the theme.
Duplicate a theme in Print Store you can work with to post changes to the server.
Create an FTP account in Domain Tools to access the Site Themes directory remotely.
Upload your theme and replace all files and directories.
Test your changes on the front end by publishing your theme.
You can copy your home page code into the Print Store CMS "default" home page now. The cpMainBody control is where the CMS content will render into.
You can wire up some of the other controls like search, shopping cart carts.
Continue to test your changes until all controls are working in the theme and it previews exactly like the HTML version you started from.

PrintnowDisplay.master skeleton

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="PrintnowDisplay.Master.vb" Inherits="Printnow.PrintnowDisplay" %>
<!DOCTYPE html>
<html>
	<head runat="server">
		<%-- required default styles and scripts --%>
		<link rel="stylesheet" href="/{pn_theme_path}/css/bootstrap.css">
		<link href="/{pn_theme_path}/css/pn-bootstrap.css" rel="stylesheet">
		<script src="/{pn_theme_path}/js/jquery.js"></script>
		<%-- cpHead content place holder should be last tag in head --%>
		<asp:ContentPlaceHolder ID="cpHead" runat="server"></asp:ContentPlaceHolder>
	</head>
	<body>
		<form id="form1" runat="server">
			<%-- radskinmanager and scriptmanager are invisible --%>
			<telerik:radskinmanager id="RadSkinman" runat="server" skin="Default" />
			<asp:ScriptManager ID="ScriptManager1" runat="server" />
			<%-- logout waning control, gets hidden with jquery --%>
			<printnow:warnBeforeLogout runat="server" />
			<%-- search text input and button --%>
			<asp:TextBox ID="search" runat="server" CssClass="form-control search"></asp:TextBox>
			<pn:ButtonEx ID="searchButton" runat="server" Text="<i class='icon icon-search'></i>" CssClass="btn btn-default" CausesValidation="false" />
			<%-- simple welcome message --%>
			<pn:WelcomeUser runat="server" MessageFormat="Welcome, {name}" />
			<%-- login/logout button --%>
			<printnow:AccountHeaderPane runat="server"  />
			<%-- shopping cart item count --%>
			<pn:CartCount runat="server" EmptyWhenZero="True" />
			<%-- built-in breadcrumb system --%>
			<pn:Breadcrumb ID="breadcrumb1" runat="server" />
			<%-- page title bar (not really used) --%>
			<asp:ContentPlaceHolder ID="cpTitleBar" runat="server" />
			<%-- main body content --%>
			<asp:ContentPlaceHolder ID="cpMainBody" runat="server" />
			<%-- one more required script just before end form tag --%>
			<script src="/{pn_theme_path}/js/bootstrap.js"></script>
		</form>
	</body>
</html>

Integrating HTML themes

Tip

PrintnowDisplay.master skeleton

Related topics

Comments