Thank you for purchasing the Wordbench HTML template!
Being a HTML template, it requires some basic knowledge of HTML (and ideally also CSS and JavaScript) to customize. However, it is obviously out of the scope of this documentation to teach you all these skils. Instead, we will focus only on template-specific features.
We hope you will find this documentation helpful and will enjoy working with Wordbench template as much as we enjoyed developing it.
Let's start with a pro tip: if you aren't already, make yourself familiar with the Object Inspector tool of your browser of choice. Every modern browser has this tool built-in. This will GREATLY facilitate your HTML and CSS customization efforts. Not just with this template, but with any other you will encounter in the future. Teaching you the ropes of this tool is out of the scope of this documentation, so please use the power of the internet to learn more about it (we can't stress enough how important this is!).
CSS for this template was generated using the SASS language. It is NOT recommended to edit the core CSS/SCSS files in assets folder, as that will greatly complicate any potential template updates in the future. But if you don't care about that, then feel free to modify any files you want of course.
However, if you know your object inspector, then there shouldn't be any need to ever access those core files. You can use the inspector to display all the styles for any element on the page, edit it directly in the inpector to see any changes in the real time, and then finally put your CSS definitions into style.css file located in the template root folder. All core CSS definitions were written in a way so they can be easily overridden, there should never be a need to use "hacks" like for example infamous "!important" statement. If everything else fails, just prefix your CSS selector with body like this:
body .header__inner { padding-top: 100px; }
To change the width of the logo image, open style.css file (in the root folder) and change the value of max-width attribute in the header-logo class on line 24. Or just override the whole definition with the following CSS code, which you can add at the end of your style.css file:
.header-logo { max-width: 150px; }
To change the template fonts, you first need to change the Google Fonts URL found in the style.css file on line 17. You can generate the new URL with fonts of your choice on Google Fonts website.
Once done, you need to actually change the font in style.css file on line 20.
When it comes to changing the color scheme of the template, there are two choices: you can use one of the predefined ones or create your own.
To change to a different predefined cheme, simply change the assets/css/color-schemes/default.css URL in all .html template files to assets/css/color-schemes/[color-scheme].css where [color-scheme] can be one of these values: default, scheme2, scheme3 or scheme4. For example, use assets/css/color-schemes/scheme3.css for scheme3 color scheme. Again, you need to do it for all of your .html files.
Let's describe the process of creating your own custom color scheme:
$accent1: #4935C5; // primary accent color $accent2: #FA6D4B; // secondary accent color
There are many online tools where you can generate a hex code for your color, for example colorhexa.com. Just change #xxxxxx to the hex code of your custom color (don't forget that it has to start with the # sign). Feel free to change the values of other color variables or any other color definitions in the rest of the file if you want.
Grid system of this template was build using the Flexbox. There are usually two use cases where you would use a grid system: as a layout grid (think sidebar + content, or image + side paragraph), or as an equal width columns grid, often spanning several rows (for example image gallery or a "masonry" post list).
Layout grid usually consists of only two to three columns in a single row (at least on the desktop resolution).
<div class="lsvr-grid"> <div class="lsvr-grid__col lsvr-grid__col--span-12"> CONTENT </div> <div class="lsvr-grid__col lsvr-grid__col--span-3"> SIDEBAR </div> </div>
It always starts with the lsvr-grid element. This is the main container for the grid. Each direct child element has to have lsvr-grid__col class. To set the width of the columns themselves, you need to use lsvr-grid__col--span-[span-value] modifier class, where [span-value] can be the value from 1 to 12, representing the number of columns it should span.
This will cover all the screen sizes above 480px screen width. Whole layout will turn into a single column under this size. Obviously, you may want to control the columns width for different break points. That's where additional modifier classes come to play. In case of our example layout, we want to break the layout to a single column much sooner than under 480px, we want to do it under 990px.
<div class="lsvr-grid"> <div class="lsvr-grid__col lsvr-grid__col--span-12 lsvr-grid__col--md-span-12"> CONTENT </div> <div class="lsvr-grid__col lsvr-grid__col--span-3 lsvr-grid__col--md-span-12"> SIDEBAR </div> </div>
We've added the lsvr-grid__col--[break-point]-span-[span-value] class modifier. Again, [span-value] can be set to a value from 1 to 12. The [break-point] specifies which break point this new column width will apply to. You can use these values:
Remember that column spans are inherited when going down to lower break points. For example lsvr-grid__col--lg-span-5 span will be also applied to md break point as well, unless you override it with additional modifier targeting the md break point (for example lsvr-grid__col--md-span-3). Column span will automatically resets to a single column on xs break point unless you specify this breakpoint span using the xs modifier.
Sometimes it may be important to change the order of your grid columns, but without touching their position in the HTML code. The good example can be found in sidebar-left.html page, where we wanted to put a sidebar on the left side, but still keep the content column before the sidebar column in the HTML code (so for example screen readers will get to the content before the sidebar). This can be done using the lsvr-grid__col--order-[order-value] class modifier. Similarly to "span" modifier, the [order-value] can be set to a value from 1 to 12.
<div class="lsvr-grid"> <div class="lsvr-grid__col lsvr-grid__col--span-12 lsvr-grid__col--md-span-12 lsvr-grid__col--order-2"> CONTENT </div> <div class="lsvr-grid__col lsvr-grid__col--span-3 lsvr-grid__col--md-span-12 lsvr-grid__col--order-1"> SIDEBAR </div> </div>
Same as with the "span" modifier, you can specify the order for each break point. Since we are turning the layout to a single column on a md break point, we want to change the order as well, so the content comes first, using the lsvr-grid__col--[break-point]-order-[order-value] modifier. [break-point] can be set to the same values as for the "span" modifier (xl, lg, md, sm, xs).
<div class="lsvr-grid"> <div class="lsvr-grid__col lsvr-grid__col--span-12 lsvr-grid__col--md-span-12 lsvr-grid__col--order-2 lsvr-grid__col--md-order-1"> CONTENT </div> <div class="lsvr-grid__col lsvr-grid__col--span-3 lsvr-grid__col--md-span-12 lsvr-grid__col--order-1 lsvr-grid__col--md-order-2"> SIDEBAR </div> </div>
The basic layout is exactly the same as with Layout Grid using the lsvr-grid for the main container and lsvr-grid__col classes for column elements. Since the point of this grid type is to have all the columns of the same width, all the heavy lifting is done in lsvr-grid element.
<div class="lsvr-grid lsvr-grid--4-cols"> <div class="lsvr-grid__col"> IMAGE </div> <div class="lsvr-grid__col"> IMAGE </div> <div class="lsvr-grid__col"> IMAGE </div> <div class="lsvr-grid__col"> IMAGE </div> <div class="lsvr-grid__col"> IMAGE </div> ... </div>
The number of columns is set using the lsvr-grid--[columns]-cols class modifier, where [columns] can be a value from 1 to 5. Same as with the previous grid type, you can set the number of columns for various break points using the lsvr-grid--[break-point]-[columns]-cols class modifier. Again, [break-point] can have all the same values as the "span" modifier (xl, lg, md, sm, xs), with values being inherited downwards and reset on xs break point (unless you specify the value for this break point).
<div class="lsvr-grid lsvr-grid--4-cols lsvr-grid--md-2-cols"> <div class="lsvr-grid__col"> IMAGE </div> <div class="lsvr-grid__col"> IMAGE </div> ... </div>
You can still use the lsvr-grid__col--order-[order-value] modifier for lsvr-grid__col elements if you want to change order of columns.
If you want to build a grid with elements of different height, you may want to display them in a "masonry" layout. To do so, simply add lsvr-grid--masonry class modifier to the lsvr-grid element.
<div class="lsvr-grid lsvr-grid--masonry lsvr-grid--4-cols lsvr-grid--md-2-cols"> <div class="lsvr-grid__col"> IMAGE </div> <div class="lsvr-grid__col"> IMAGE </div> ... </div>
All grid columns have a small margin on both sides by default. To disable that, just add lsvr-grid--gapless class modifier to the lsvr-grid element.
<div class="lsvr-grid lsvr-grid--gapless lsvr-grid--4-cols lsvr-grid--md-2-cols"> <div class="lsvr-grid__col"> IMAGE </div> <div class="lsvr-grid__col"> IMAGE </div> ... </div>
The contact form consists of two parts: the HTML part which you can find in contact.html file and the PHP part which can be found in php/contact-form.php file.
By default, you just have to change the $email_to and $email_from variables in php/contact-form.php file to your own email adresses and host your site on a PHP server for contact form to work.
However, if you plan to change default form fields, it will need a bit more work. If you will add or remove any fields, you will need to mirror this change in the $form_fields array variable in php/contact-form.php file. This array has to contain all form fields you plan to send with the form. The key of each array item is the name attribute of each form field. You can also change its label which will be used in email message and set if the field is required (this should be set in both HTML code using the lsvr-form__field-input--required class and in the .php file in the $form_fields variable).
In case you want to create your own server-side script for sending the form, just remove the lsvr-form--contact and lsvr-form--ajax classes from the lsvr-form form element. The basic JavaScript validation will still be applied to all fields with lsvr-form__field-input--required class.
Check out the list of all built-in icons here.
You can add an icon to a page like this:
<span class="lsvr-icon-basket"></span>
RTL version of the template can be found in the RTL Version folder in the full package. The only code difference between the RTL and standard (LTR) version is dir="rtl" attribute in the html tag at the top of each .html file and rtl.css file being loaded right before the color scheme .css file inside the head tag in each .html file as well.