A) Getting Started
BRIX is a clean, modern, and fully responsive Muse Template. it is designed for app, ios, android, software, windows, application, ui, ux. design, businesses, or any type of person or business who wants to showcase their work, music and professional way. BRIX Template’s uniqueness is due to its amazingly beautiful designs and easy to use Website template solution that maximizes user satisfaction. It is built using bootstrap 4.2 framework, works totally responsive, easy to customise, well commented codes and seo friendly
This template made with Bootstrap, using HTML5, SASS, CSS3, JS and jQuery.
Get Yourself a Code Editor
Yes, it’s completely possible to edit HTML in Notepad or a similar program, but things will go much more smoothly for you if you use a proper code editing app. One of the main reasons is you’ll get colored highlighting of your code, as you’ll see shortly, which will make it much easier to read and edit.
I recommend Sublime Text, which you can download here: https://www.sublimetext.com/3
SASS (Syntactically Awesome Style Sheets) is mainly an extension of CSS. For using variables, nested rules, and more SASS is very much helpful. LESS is also part of CSS which allows you to make CSS more maintainable, extendable and themeable. Browsers can’t read SASS, LESS or Stylus. They are compiled on the server side like PHP. For that compiler is needed. I recommend Using SASS, which you can download here: Koala App
10+ Best Tools and Resources to Compile & Manage SASS, LESS, and Stylus – CSS Preprocessors: Link
Download the template main files from Themeforest
- First, you need to download the template files from your Themeforest account. Navigate to your Downloads tab on Themeforest.
- Find the templates.
- Click the Download button,
- and then click "All Files and documentation".
Most HTML templates will come in a ZIP file - if so, go ahead and extract yours now. Then look around inside the template’s folders until you find the “index.html” or “index.htm” file.
In our example template the “index.html” file is found in the “HTML” directory.
B) HTML Structure
<!-- LOAD PAGE --> <div class="animationload"> ... </div> <!-- BACK TO TOP SECTION --> <a href="#0" class="cd-top cd-is-visible cd-fade-out">Top <!-- HEADER --> <div class="header header-1"> ... </div> <!-- BANNER --> <div class="section banner-full bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- FEATURES --> <div id="features" class="bg-gray-light"> ... </div> <!-- OUR TESTIMONIALS --> <div id="review" class="section bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- ABOUT --> <div id="about" class="section bg-gray-light"> ... </div> <!-- FUN FACT --> <div class="section bg-secondary"> ... </div> <!-- FEATURE --> <div class="section bgi-cover-fixed" data-background="images/dummy-img.jpg"> ... </div> <!-- SCREENSHOT --> <div id="screenshot" class="section"> ... </div> <!-- VIDEO --> <div id="demo" class="section bgi-cover-center" data-background="images/dummy-img.jpg"> ... </div> <!-- AWESOME --> <div class="section section-border"> ... </div> <!-- CTA --> <div class="section bgi-cover-center bg-primary" data-background="images/dummy-img.jpg"> ... </div> <!-- PRICING --> <div id="pricing" class="section"> ... </div> <!-- CTA --> <div id="support" class="section bgi-cover-center bg-primary" data-background="images/dummy-img.jpg"> ... </div> <!-- FOOTER SECTION --> <div class="footer"> ... </div>
How Change color schema by scss
Open sass/variable.scss file and change following area
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Coda&display=swap');
$font-primary : 'Open Sans', sans-serif;
$font-secondary : 'Coda', sans-serif;
$font-tertiary : '', sans-serif;
$font-heading : $font-secondary;
$font-icon: FontAwesome;
$font-sas: 'sas-webfont';
$black: #222;
$white: #ffffff;
// Global
$color-body: #999999;
$color-primary: #29ABE2;
$color-secondary: #19202E;
$color-tertiary: transparent;
$color-quaternary: transparent;
$body-bg: #fff;
$font-body: $font-primary;
$content-padding: 100px;
/* --------------------
TOPBAR SETTING
-----------------------*/
$topbar-bg: $color-secondary;
$topbar-color: $white;
$topbar-nav-color: $white;
$topbar-nav-hover-color: $color-primary;
$topbar-font: $font-primary;
/* --------------------
NAVBAR SETTING
-----------------------*/
$navbar-bg: $white;
$navbar-font: $font-secondary;
$navbar-color: $color-body;
$navbar-hover-color: $color-primary;
$navbar-active-color: $color-primary;
$navbar-bg-stiky: $white;
$navbar-stiky-color: $black;
$navbar-stiky-active-color: $color-primary;
/* --------------------
FOOTER SETTING
-----------------------*/
$footer-bg: #F8F8F8;
$footer-bg-copyright: darken($color-secondary, 10%);
$footer-font-color: $color-body;
/* --------------------
BUTTON SETTING
-----------------------*/
$btn-primary-hover: $color-secondary;
If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:
.section-heading { color: #someColor; }
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.
.services .section-heading { color: #someColor; }
So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.
C) CSS Files and Structure
On the CSS side, we load different css files depending on the page that loads.
How to change a background-image
Replace "images/bg-map-dot.jpg" with your image url source or website name .
How to change a title/font from css
We recommend using the FireBug add on in Firefox for a fast identification of the css properties that you might want to change. Lets say for example that we want to change the color and add a link to the h1 represented in the picture below.
Open the style.css file form the root folder and search h1 until you find the color property in the file. Its on line 661 and it looks line this:
h1, .page-header {
font-size: 40px;
line-height: normal; }
h2, .single-news .blok-title, .news-item .blok-title {
font-size: 32px;
line-height: normal; }
Change the color with the one you want and hit save. If you want to change only the h1 color, you have to separate the h1 and give it another color. The css should look like this.
.page-header {
font-size: 40px;
line-height: normal; }
h1{
color: #12aaeb;
font-size: 40px;
line-height: normal; }
Now, lets say we wanted h1 to poin to http://google.com. At this point the h1 looks like this:<h1>Shortcodes: Typography & paragraph styles</h1>
To make it point to a specific URL the h1 must look like this:
<h1><a href="http://www.google.com">Shortcodes: Typography & paragraph styles</a></h1>
You can make changes to the css to any elements. You just need to know the name of the element or div either by using FireBug or by opening the HTML and then search for that element in the css. Piece of cake!
Social Icons
To add a link to your social icon paste the necessary URL into the <a href=> tag. See the example below:
<a href="#"><i class="fa fa-facebook"></i></a>
D) JavaScript
This template imports different js files for the different sliders, lightboxes and interactive tabs from the homeplage and the rest of the pages. All the js is built around JQuery. What follows are some examples where jQuery was used:
Slider Homepage Settings
/* =================================
BANNER ROTATOR IMAGE
=================================== */
var slides = $(".full-screen"),
b = slides.find('.item');
b.each(function(){
var e = $(this),
ocImg = e.find('img.img-slider').attr('src');
e.css({'background-image': 'url(' + ocImg + ')'});
});
slides.owlCarousel({
// stagePadding: 50,
loop: true,
// margin: 10,
autoplay: true,
autoplayTimeout: 5000,
nav: true,
dots: false,
navText: [
'<h1><i class="fa fa-angle-left" aria-hidden="true"<h1></i>',
'<h1><i class="fa fa-angle-right" aria-hidden="true"><h1></i>',
],
navContainer: '.banner .custom-nav',
items: 1,
});
Replace fadeIn and rollOut for slider animate homepage. To change the animate, please see animate.css documentation animate.css
Maps Google
Open contact.html file and change following area
<div class="maps-wraper"> <div id="cd-zoom-in"></div> <div id="cd-zoom-out"></div> <div id="maps" class="maps" data-lat="-7.452278" data-lng="112.708992" data-marker="images/cd-icon-location.png"> </div> </div>
you can change coordinate google map by edited the atribute data-lat for latitute and data-lng for langitude. And Icon Marker by edited the attribute data-marker.
Open contact.html file and change following area with your Google Map API KEY Get Api Key
Contact Form (phpMailer with SMTP Gmail)
You can install your form simply and quickly. Open php/form-process.php file and change following area
Simple and fast validation function is end of file js/vendor/form-scripts.js. After passing this stage in the php/form-process.php file is checked in the email. Email can not pass through the control, script stops running and turns back EMAIL-ERROR error.
/* Contact Form Setup Begin */ $send_name = "Rometheme"; // Replace your name $send_title = "Rometheme Send Mail"; // Replace email sent title $send_address = "name@domain.com"; // Replace your email address $smtp_address = "mail@gmail.com"; // Replace your email GMail address $smtp_password = "12345"; // Replace your email password $smtp_server = "smtp.gmail.com"; // Replace your email server address
E) Search Engine Optimization
In order to improve your search engine ranking, and thus enable your web site to appear among search results, please don't forget to change the description and keywords with your own.
<meta name="description" content=""> <meta name="keywords" content="">
F) Sources and Credits
I've used the following images, icons or other files as listed.
HTML, CSS and JS:
Images:
Fonts:
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Rometheme
Back to Top