A) Getting Started
To use the Acropolis - HTML version template, after downloading the package from templateForest, you just need to extract the files into your Host or localhost. (By clicking on every HTML files you will be see template on the browsers But we recommend that before checking template, extract it)
Note : If you clicked on one of Acropolis HTML files and fonts, icon-fonts doesn't work correctly, don't be disappointed for buying this template! If you open your browser's console you can find out some of required files like fonts, js files and etc doesn't load. It's a common issue for opening external links in local files ( Google Fonts, Font icons and etc ). To avoid this issue extract the package to your localhost or your online hosts and then open the HTML file's URL and enjoy the beautiful fonts and parts of template!
B) Package Content
- HTML Files : These files contain HTML codes that you can view them on browsers by clicking on them. Except the 2 versions of home page files the other HTML files are located in the "Pages" folder.
- Assets Folder : This folder contains all the external files that are used in HTML files like JS, CSS and Images files.
- CSS Folder : It contains all the css files of the template.
- IMG Folder : This folders contains all the images which are used in all pages. All the images are categorized based on the pages in which are used.
- JS Folder : It contains all the js files which are used in template.
- Fonts Folder : It contains the main files of FontIcons which is used in template "FontAwesome" and "Glyphicons".
C) Preset Colors
How To Use:For switching between the preset colors you just need to change the path of main css files of each page's template. As you might know all the stylesheet files are located in the head section of an HTML file. Here is a preview of head section of index.HTML. As you can see all the codes are well documented but we will describe the head section tags here:
- Title : The website's title will be located in this tags. This title will be shown in the browser's tab.
- Description : This tag is for SEO purpose and you can put a short description about your website and your services in it.
- Keywors : This tag is for SEO purpose too. Add your Real Estate or business Keywords in this tag.
- Author : Author tag contains the author's info.
- ViewPort : This tag is used for responsiveness of template so , DO NOT change or remove it.
- Google Font : By adding this tag we added template's required font which is hosted by Google. If you are not familiar with CSS or HTML, DO NOT change or remove it.
- Main Stylesheet File : This tag is added the main css file of template to the HTML files. As you can see the path of this files is added by "href" attribute, so you can find and customize this file in this path "assets/css/style.css"
Header: Header contains the logo, main menu, mobile menu, search form and side menu that you can change them easily by replacing the text, URL and you can remove unnecessary menu item based on your needs.
Note: In this sections we have a section which are highlighted as "mobile menu" in the below screenshot, it is the menu container that we used it in responsive views, so please do not remove template unless you know what to do :)
Footer: The footer section is separated in 2 internal section, Top Section and Bottom Section. In top section of footer which is called Widget Area we added 3 predefined widgets in this sections. Text Widget, Latest Posts and Contact Us are 3 widgets that we added for this section.
Bottom section of Footer contains copy right and social icons of website that we added both of them in this sections for your future uses
Js Section: For speeding up the template's loading time we added all the js files at the bottom of codes (before the end of body tag), so if you want to add your js files and codes, put them in this section.
D) Helper Classes
.boxed : In boxed view all of your content will be shown in a boxed container and you will have extra space around your content. If you need to have this design, you just need to add this class to "body".
.pattern-1 to .pattern-10 : When you are using the boxed version of template, you have enough space to show some pattern, by using the pattern classes you can add your suitable pattern for your template. Here are available classes for patterns: