Importing an existing Bootstrap theme into RWSkinz
There are a large number of high quality, free and paid Bootstrap theme designs available from different websites. When we're talking about a Bootstrap theme, we're typically implying a complete webpage template; including the CSS, HTML, images and Javascript. This is slightly different to a regular skin; which is typically just a single CSS file controlling colours and font styling. A full Bootstrap theme or template is an altogether more complete package of files.You would think that trying to import one of these Bootstrap themes into RWSkinz is something that would be asking the impossible! However RWSkinz has had some intelligent, built-in functionality that can actually make the process straightforward for anybody with moderate HTML developer skills.
Much of the process basically involves adding the theme to the website (either as a RapidWeaver resource or uploaded to the web server), slicing the theme index.html file into two parts, updating the links in the HTML and adding the markup back into RapidWeaver.
A video demonstrating the process can also be viewed here on YouTube:
https://www.youtube.com/watch?v=ez6KB9zsL3Q
By importing an existing Bootstrap theme into RWSkinz, you can continue to have RapidWeaver help you to structure the website, insert your page meta data, construct the menu navigation links and publish the completed website. Our demo flaunts some attractive single-page designs, but a multi-page website is equally feasible to build too.
Obviously imported themes only work with page types like Stacks and the HTML Code page type supplied with RapidWeaver. You would have no means of being able to get the HTML code into other page types, like a RapidWeaver blog, styled text, Markdown or photo album page type.
Step 1
To start with, add a new HTML Code or Stacks page in RapidWeaver, (if the latter, add an HTML stack on the page too). Go into the RWSkinz theme Miscellaneous settings, check the option marked Build Entire Page With Stacks. Then uncheck the option marked Load Bootstrap From Theme to use your version instead. This step prepares RWSkinz to import your theme.Step 2
Download a suitable Bootstrap theme from a website like startbootstrap.com, bootstrapmade.com or another website. Give the downloaded package a sensible folder name. It is also wise to do a little 'house keeping' at this stage to delete files you do not need in the theme; like gulp, SASS, SCSS, JSON or others. Retain basic files like CSS, HTML, images and Javascript. Either upload the theme folder to your server (via FTP) or add it as a resource to RapidWeaver.Step 3
Create a new plain text file in your preferred code editor. Open the index.html file of your downloaded theme (again in your preferred code editor) and copy-over all the<link> tags from the <head> section of the index.html file into your blank HTML file. Ignore other content like meta tags.Step 4
If you have added the theme as a RapidWeaver resource, change the links in your newly created HTML file, so they all use RapidWeaver%resource()% syntax and point to the same files and folder name you added to RapidWeaver as a resource. Example:<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">becomes...
<link href="%resource(brilliant_theme/vendor/bootstrap/css/bootstrap.min.css)%" rel="stylesheet">Otherwise if you are using the theme stored on your web server, update the links to point to that URL via an absolute address. Example:
<link href="https://example.com/assets/brilliant_theme/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">Step 5
Now copy this modified HTML markup from the new text file into your RapidWeaver Custom Header box (in either the Page Inspector or Site Setup). Delete your plain text file clean in readiness of the next step.Step 6
Repeat steps 3 and 4 again - only this time use the HTML markup in your theme index.html file between the opening<body> and closing </body> tags. Again, go-through this markup and update any links accordingly, so that CSS, Javascript and Image files point to the correct location - either RapidWeaver resources or the files stored on your hosting server.Step 7
Paste this more extensive HTML markup into the content area of your webpage or the HTML stack you added. You should have something in RapidWeaver preview that now closely resembles the theme you downloaded. All the different file calls will be in the correct place and you now have the ability to edit the HTML to include your own content and links.Other notes
Use the browser web inspector tools to look at the console and check for any broken links. This might be a common cause for pages not rendering correctly.Don't forget that you can still use various settings in RWSkinz like embedded font faces. You can actually remove calls to Google embedded font faces and Font Awesome icons, if you prefer to use the locally hosted ones supplied in RWSkins already. Another option is to replace pieces of content with RapidWeaver Theme Template Variables, like
%site_title%, %site_slogan%, %logo%, %sidebar_title%, %sidebar%, %navigation%, %breadcrumb% and %footer% to denote parts of the page you want RapidWeaver to populate with its own content.How would you go about editing the content? Well, you could either edit the HTML as it is shown to you in the page. Many of these free and paid Bootstrap themes are designed to be edited this way. The markup is typically indented and commented, making things easier.
If using Stacks, another option to edit the page is to split your codebase some more, by means of segregating areas above and below your main content container into separate stacks. If you wanted to, you could clear-out the entire content area and make this a blank area you can populate with Stacks. Then you can use additional stack elements to build-up your main content container. An example of this can be found here.