Building your Website Using an 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.
Step 1.2 - Open the 'web files' directory. Select the "content" folder and click Submit.
Step 1.3 - Select all files in the 'content' folder and click Publish
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.
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
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.
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.