We explain how easy is to customize the template through HTML, SCSS or JS changes to suit your needs.
We use Google Poppins and Caveat fonts by default.
To change the embedded font, open the HTML page you want and locate the head section and change the font as you wish. Make sure to change the font names in CSS files as well.
<link href="https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
Once you have changed the font, look for $font-family-base and $font-family-handwritten variables in /SCSS/shared/import/_bootstrap-overwrite.scss and /SCSS/shared/import/_variables.scss files respectively, make your adjustments properly.
// _bootstrap-overwrite.scss
$font-family-base: "Poppins", sans-serif !default;
// _variables.scss
$font-family-handwritten: "Caveat", cursive, $font-family-base !default;
This template is ready to use any colors scheme, for wich we use SCSS to create colors pallete and process the CSS dynamically and show your colors right away.
You change your colors scheme in /SCSS/shared/import/_palette.scss.
We use 6 main colors for each scheme which can be completely customized to fit your needs.
To include your own colors just change variables to your values and compile.
$color-primary: $color-1 !default;
$color-secondary: $gray-700 !default;
$color-success: $color-3 !default;
$color-info: $color-2 !default;
$color-warning: $color-6-light-2x !default;
$color-danger: $color-auxiliary-light-4x !default;
$color-light: $color-5-light-5x !default;
$color-dark: $gray-900 !default;
$color-gray-light: $gray-400 !default;
$color-gray: $gray-600 !default;
$color-gray-dark: $gray-800 !default;
Overlay
In addition to the image cover background, each section may include an overlay. There are so many colors of overlays as defined in the colors scheme, all named by its index (.overlay-1, .overlay-2, .overlay-3 and so on).
You can choose the level of opacity 10 to 90 by using the alpha-? css class.
Make sure you have included .overlay class.
<div class="overlay overlay-4 alpha-9">
<!-- CONTENT HERE -->
</div>
DashCore comes with fully functional form submission. Every form has an action attribute, this is the script which will process the form in server side. We have set up those scripts in srv folder.
<form action="srv/subscribe.php" class="form form-subscribe" method="post" data-response-message-animation="slide-in-left">
<input type="text" name="Contact[fullName]"/>
...
</form>
<div class="response-message">
<h4 class="bold"><i class="icon font-md inline fa-envelope-o"></i>One last step!!!</h4>
<small>To complete the subscription process, please click the link in the email we just sent you.</small>
</div>
The name of the inputs should be in array format, for example: Contact[fullName], this way is easier to read on the server, and bind the values into the corresponding model.
The value inside the squared brackets is the name of the attribute in your model, it is case sensitive.
Each script has references to the core libraries we have developed.
// srv/suscribe.php
include('./integration/MailChimp.php');
include('./models/SubscribeModel.php');
// srv/models/SubscribeModel.php
namespace models;
include __DIR__ . '/../components/Model.php';
use components\Model;
All of these references are located relatively to the scripts. You can change the location of the files or rename them, by doing this you must update the files to reflect your changes.
Note how each file has include statements, and how the path is relative to its container, this way PHP knows where to find those references.
data-response-message-animation
Advice response-message-animation="slide-in-left" in the form tag.
This attribute indicates the notification message animation should be when a response is available. If the attribute is present you must provide an element with response-message css class next to the form.
When the response is available the message will replace the form with the animation you indicated. At this time only slide-in-left animation is available, but you can create your owns. __forms.scss is where you may want to create the animations for your forms
