Building your Website Using an Existing Theme

Note: Prior to following this tutorial, please visit Importing an Existing Theme. You will need this pre-requisite knowledge prior to building your website using your existing theme.

Step 1 - Migrate your content to 'web files' directory

Step 1.1 - Open the 'www' directory and select all HTML files. Click Move.

Note: Notice how we only selected the HTML files in the 'www' directory to be moved to the web files directory. That is because we want to leave all assets (css, fonts, images, javascript, etc.) in the 'www' directory.

Step 1.2 - Open the 'web files' directory. Select the "content" folder and click Submit.

Note: Now all of your HTML files live in the 'web files' directory in the 'content' folder.

Step 1.3 - Select all files in the 'content' folder and click Publish

Note: Now it's time to start building out your page templates

Step 2 - Create Page Templates

So now all of our HTML content is in the 'web files' directory and our assets are in the 'www' directory. In order to speed up web development we're going to create three core page templates to build out the rest of our website. Alternately, you can use as many as you want but for the sake of this tutorial we will create three page templates.

Base Template

This is typically the template that all of your web pages will use including your page templates. A base template includes resources and assets that will be site wide such as references to your CSS, JS, Fonts, as well as navigation such as your header and footer. To create our base template we will open up index.html.

Step 2.1 - Open your index.html file in the 'web files' directory

Step 2.2 - Click Source to access the code powering your index.html file

Step 2.3 - Copy your resources/asset references and all navigation (header/footer) code into a file in any text editor as shown below

Note: It is required to add a dynamic div in between your header and footer to create a dropzone where you can place content later.

Step 2.4 - Create a new file in the 'templates' folder 

Step 2.4 - Name your file baseTemplate.tpl. Copy and paste the code from the base template you created into this file. Click Save.

Below is your newly created base template. 

Below is how this base template appears when added to a page appears without modification.

Now we need to turn this into a page template that can be re-used. In order to do this we navigate to the templates folder.

Step 2.5 - Click Add->Page

Step 2.5 - Name the file baseTemplate and click Save

Step 2.6 - Select the drop zone until it turns blue as shown below

Step 2.6 - Select the baseTemplate.tpl file in the template folder. Click Publish.

Step 2.7 - Toggle over to the Meta Information Tab. Select isTemplate. Click Publish

You now have a base template that can be re-used to avoid the need for duplicate HTML code. 

Step 3 - Build out your Web Pages

Now we have a base template to build out our web pages with. We already have our HTML content for each page but remember our base template already contains the header, footer, and resource references that each of our HTML files contains. So to build our first page using our newly create base template, we'll need to strip that code out of our index.html file so it's not there twice.

Note: For the HTML pages in web files, you will need to strip redundant code out of the file prior to adding it to a drop zone in a web page.

Step 3.1 - Clear base template contents from index.html

Open your content folder in the 'web files' directory and navigate to your HTML page. Clear out your header, footer, resources/assets and anything else you put into your base template.

Step 3.2 - Click Publish

You'll notice the page lost some of its styles and assets. That's because we just pulled all of them because they're already in the base template.

Step 3.3 - Open the 'www' directory and click Add->Page

Step 3.4 - Name the page index and select baseTemplate.stml as your template. Click Save.

Step 3.5 - Select a dynamic div (drop zone) until it turns blue

Step 3.6 - Select index.html from the content folder in the 'web files' directory as shown below

Step 3.7 - Publish your page and it will appear as it does below

Below is your newly created web page from the view of a browser.

Now you've build your first web page in Solodev using your existing theme! You can build out your entire website using a only few page templates and speed up development time tremendously using this system.



Please sign in to leave a comment.