Acropolis - Creative Interior Design Agency Template - HTML Version - V1

Documented by RavisTheme - at 2017-12-04

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

The downloaded package contains some files and folders that are listed as below:
  • 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

For this template we have designed 7 preset colors which can be used for your template just by changing the path of template's css files. We will describe how you can use these preset colors in below: 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. Head Preview As you can see all the codes are well documented but we will describe the head section tags here:
  1. Title : The website's title will be located in this tags. This title will be shown in the browser's tab.
  2. Description : This tag is for SEO purpose and you can put a short description about your website and your services in it.
  3. Keywors : This tag is for SEO purpose too. Add your Real Estate or business Keywords in this tag.
  4. Author : Author tag contains the author's info.
  5. ViewPort : This tag is used for responsiveness of template so , DO NOT change or remove it.
  6. 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.
  7. 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"
All the preset css files are located in "assets/css/" folder, so for changing the preset color of template you just need to change the path of main stylesheet of template to your desired ones. For example if you want to choose the second preset color, you just need to change the "assets/css/style.css" to "assets/css/style-1.css". The preview of the preset colors and their names are shown in the above image.

D) Customization

First of all for customizing template, you need to have knowledge about HTML/ CSS and JS, so if you don't have any information about them don't try to customize it. By the way, we explain all the sections and how to use them in your projects.

Common Sections:

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 :)


Breadcrumb: This section contains the breadcrumb section which is used in internal pages and show the path of the current page and the title of page. Header

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 Footer

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. Footer

D) Headers

In this template we have designed 4 different styles for header section which every of theme has its own features and items that you can choose the best one to create your own website. These header designs are listed in the below screenshote. Footer

D) Footers

Another feature of Acropolis is having 4 different styles for its footer that you can easily use the best which covers your needs. These footer designs are listed in the below screenshote. Footer

D) Helper Classes

.bordered : We have a bordered version of template in which in all pages we added a thick border around the content of page. Bordered

.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". Boxed

.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: Pattern Class Pattern Items

.sticky-header : If you need to have an sticky header for your website, you just need to add this class to body tag of the pages. Sticky Header

.header-type-1 : If the first header is your choice for your website, you must add this class to body of pages. Header

.header-type-2 : If the second header is your choice for your website, you must add this class to body of pages. Header

.header-type-3 : If the third header is your choice for your website, you must add this class to body of pages. Header

.header-type-4 : If the fourth header is your choice for your website, you must add this class to body of pages. Header

.gallery-slideshow : If you need to have gallery page in slideshow style, you must add this class to the body to apply the required changes for the slideshow. Slide Show

.left-sidebar : If your design needs to have left sidebar in blog page, you need to add this class the main container of blog pages which has "blog-page" id. Left Blog

G) Credits

We want to thank people and website whose works has helped us to make this template. Thank you so much!

H) Support

If you have any questions that you can't find your answer in this documentation, feel free to contact us via Email, templateForest user profile or the support tab of template.