"Solid" is part of the OnePagers collection of sleek single-page website templates by @HaydenRyan.

• Fully responsive, based on Bootstrap
• Valid HTML, clean coding, easy to customise
• 148 colours included
• FontAwesome 4.7.0 included

1. What's Inside
2. Installation
3. Changing Content
   1. Changing Section Names and Links
4. Changing the Colours
5. Adding Extra Sections
6. Change navbar transparency

Download the latest release as a .zip archive To install, simply upload the following files to your host:

• css/
  • colours.min.css
  • onepagers-solid.css
  • bootstrap-theme.min.css
  • bootstrap.min.css
• font-awesome/
  • upload this whole directory (if you're using Font Awesome icons)
• js/
  • bootstrap.min.js
• index.html

No other files are required for the template to work.

In index.html, you can easily delete the demo content. Start with deleting the Demo Colours - lines 97-915. Alternatively, search the code for the string DELETE THIS.

The template is broken up into 4 sections, by default. To add more, read the documentation on adding extra sections.

Each section's content is marked at the beginning with the tag <-- START SECTION x --> and at the end with <-- END SECTION x -->.

For exmple, to replace the content in Section 2, change the content between <!-- START SECTION 2 --> and <-- END SECTION 2 --> in the main index.html file

By default, the sections are named section1, section2 etc. This results in the links for each section being labelled https://youraddresshere/#section1 This is pretty bland and you should change this.

To change the name of a section:

1. Change the bold section link in the navbar (~line 50) <li><a href="#section2">The Colours</a></li>

2. Change the ID of the corresponding div, for example <div class="col-md-12 section deep-space1" id="section2">

To choose a colour, visit the demo and scroll to the "Colours" section. Each colour is listed with its class name.

To change a section's colour, change its last class (this is where we place the colour class, by default). For example to change Section 2 from deep-space1 to aubergine2, change <div class="col-md-12 section deep-space1" id="section2"> to <div class="col-md-12 section aubergine2" id="section2">

To add an extra section, copy and paste the code below into index.html AFTER the tag <!-- END SECTION 4 -->, making sure to change INSERT_COLOUR_NAME and INSERT_SECTION_ID:

<!-- START EXTRA SECTION -->
<div class="row">
<div class="col-md-12 section innershadow INSERT_COLOUR_NAME" id="INSERT_SECTION_ID">
<div class="col-md-1">
</div>
<div class="col-md-10">
<!-- START EXTRA SECTION CONTENT -->
<h1>Heading</h1><br>
<p class="lead">Lead Paragraph</p>
<p>Next Paragraph</p>
<!-- END EXTRA SECTION CONTENT -->
</div>
<div class="col-md-1">
</div></div></div>
<!-- END EXTRA SECTION -->

Don't forget to add the section to the navbar, for example:

<li><a href="#INSERT_SECTION_ID">Section Name</a></li>

Want to change the transparency of the navbar? It's easy! By default, it's set to 95% opaque.

Simply go to line 108 of css/onepagers-solid.css and edit the following code:

background-color: rgba(34, 34, 34, 0.95) !important;

Changing 0.95 to a different value. If you want it to be completely opaque, change this to 1. If you want to make it more transparent, change it to something like 0.5. Have a play around!

GNU GPLv3