Construcción y gestión de las ventas de 380 viviendas de interés social prioritario y las obras de urbanismo que corresponda de acuerdo a licencia de urbanización y construcción, en las diferentes etapas en que se encuentra divido las UEU 1, 2 y 3 del sector La Avanzada, conforme a la Resolución de Adopción del Macroproyecto San José.
Proposito: Mejorar la calidad de vida de la comunidad del Municipio de Manizales a través del desarrollo de proyectos de vivienda de interés social, programas de mejoramiento de vivienda y titulación de predios.
Programa: Gestión y mejoramiento de vivienda.
Objeto: Construcción y gestión de las ventas de 380 viviendas de interés social prioritario y las obras de urbanismo que corresponda de acuerdo a licencia de urbanización y construcción, en las diferentes etapas en que se encuentra divido las UEU 1, 2 y 3 del sector La Avanzada, conforme a la Resolución de Adopción del Macroproyecto San José.
How to change the logo
The logo of the template has an image, text headline and sub-headline. The image logo should be 130px in height maximum. Replace the logo.gif file in /imgs folder.
If you want to change height of the logo, open master.css file in /css folder, locate line for #logo and change the height in pixels.
If you don't want the text headlines, remove them from html:
<div id="logo"> <h1> <a href="/" rel="home"><img src="imgs/logo.gif" alt="inHarmony Logo" /></a> REMOVE FROM HERE <a href="/" rel="home">inHarmony<span class="blue">.</span></a> <br /> <span class="subtitle">Just another HTML template</span> TO HERE </h1> </div>
The <span class="blue">.</span> is just a design touch, you can remove it too if you like.
Change the address and social links
The #address-block in header is a microdata rich snippet, which helps your business to be better seen and previewed by search engines, especially Google, in search results. Fill out the fields of the address, don't forget the mailto: parameter (or remove the a link for a span if you don't want the email address to be clickable).
Below the address are the social links. The icons are Font Awesome icons and you have more of them to your disposal - they are commented, choose the ones useful for you. Fill out the href links to your social profiles, with target="_blank", it all opens in a new window.
You can change the colors and size of the social icons in the master.css file. Locate #social-block a i,
Setting up Google Custom Search & Google Analytics
You'll need a gmail account for all of this. For Google CSE Search, go to https://www.google.com/cse/, add new custom search, use the domain name of your website and save the ID (of your newly created custom search). Go to the .php file (all of them), locate this line and put the ID there:
var cx = '017683756184911932766:rvnzs1j9m1g';
For Google Analytics, go to https://www.google.com/analytics/, set up the Analytics for your website and save its UX- number. Go to the .php file (all of them) at the bottom and put the number there:
Setting up your homepage: slider
The #slider is operated by a jQuery Cycle Plugin by malsup. Every .slide has 3 layers: the background image layer (the main one), the semi-transparent image layer over it (the girl on the first slider for example) and the text box with paragraphs:
- .slide-back (jpg image)
- .slide-image (png image)
- .slide-text (paragraphs)
You will need to have at least one jpg image (.slide-back) to have the slider functioning. This image should be 1065 x 450 px.
The image on top of the background image is a png image with transparency.
The paragraphs in .slide-text are all animated. For best experience, have 4 of them at most.
Tip: If you want to have a button there, make sure the paragraph has an inline class, like so:
<p class="inline"><a href="#" class="button">Buy it</a></p>
The script operating the cycle slider can be found at the bottom of index.php file. Here are some parameters you can change:
- fx - transition effect. Best is fade. Others can be found here.
- speed - how long does it take for the the background to fade out (in miliseconds)
- timeout - how long does the slide stays visible (in miliseconds)
For professionals, here are all options for the slider.
The subtle animation of paragraphs is handled in before and after functions.
You can have as many slides as you wish.
Warning: If you only have one .slide, the plugin will not work and you'll see blank space.
Setting up your homepage: content and widgets
Homepage comprises of these content components:
- #slider (cycle slider)
- #features (6 icons)
- #slogan (grey box with text)
- #latest-projects (images in carousel)
- #recent-news (vertical carousel)
- #testimonials (quotes in a cycle)
- #clients (client logos in carousel)
Plugins operating the components can be found at the bottom of index.php file:
- #slider (operated by Cycle)
- #latest-projects (operated by jCarousel)
- #recent-news (operated by jCarousel)
- #testimonials (ooperated by Cycle)
- #clients (operated by jCarousel)
This component is explained by detail in the previous section of this documentation.
Features - 6 icons
Every .feature takes up 1/6 of the content width (16.67%). If you want to have less features, change the percentage in css/master.css (locate .feature line). Icons in the features are Font Awesome icons - take a look at 350+ Font Awesome icons - you can have any icon there! Just change the class in the i tag:
You can control the color and size of the icons in the css file.
Here you can have anything, it is just a grey box with centered text.
This is a jCarousel carousel. It is composed by .carousel4 li items, each having the popup image, headline and brief description. The popup is controlled with the Magnific Popup plugin. Every popup image is encapsulated in a link with a .popup class. Here is the code:
<a class="popup" href="LARGE IMAGE"><img src="THUMBNAIL" alt="DESCRIPTION" /></a>
Each project is 264px wide. Make sure the thumbnail image is at least 264px in width (ideally 480px in width, but the size can be anything). Also, the thumbnails should have the same height, otherwise you end up with an odd-looking carousel.
If you choose to have a lot of portfolio pieces in the carousel, go to css/master.css file, locate ul.carousel4 line and make sure it's width is sufficient (right now it's 3000px, which is enough for 8 pieces).
This component is operated by jCarousel, its orientation is vertical.
In css/master.css file, this is styled as .carousel-vert4
This component (#quotes) is operated similarly to the slider, by the Cycle plugin.
In css/master.css file, this is styled as .quote
This component is operated by jCarousel, you can change the automatic movement timing (interval) in the script at the end of index.php file.
In css/master.css file, this is styled as .carousel7
The client logo image should have maximum width of 160px and maximum height of 150px.
Columns in footer
Each .footerbox takes up 1/4 of content space. It's basically up to you what you put in it. The newsletter sign-up form is just an example, it is not functioning. If you're using Mailchimp for your subscriptions, I recommend this article.
If you want to have a 3-column footer instead, go to css/master.css and locate line .footerbox. Change the width to 30%.
Make sure that the last .footerbox has class .last:
<div class="footerbox last">
Setting up layouts and sidebar for pages
Page layout are easy. You have 3 of them to your disposal (each are represented as a body class):
- .full - page with no sidebar
- .right-sidebar - content on the left, sidebar floating on the right
- .left-sidebar - content on the right, sidebar floating on the left
<body class="left-sidebar"> <div id="content"> CONTENT </div> <aside id="sidebar"> SIDEBAR </aside> </body>
Each component in the sidebar is encapsulated in .widget element.
Setting up portfolio
Portfolio is operated by the Mixitup plugin, which handles its filtering.
Code nessessery to create a category menu:
<ul id="menu-portfolio-items" class="tags"> <li><a href="#" data-filter="all" class="active">All</a></li> <li><a href="#" data-filter="cat-1">Category 1</a></li> </ul>
The .gallery has many .gallery-items and these gallery items sit in .gallery-rows.
If you want 4-column gallery, make sure that each .gallery-item has class .col-4 and that there are exactly 4 gallery items in each gallery row.
Similarly, 3-column gallery will have gallery items with class .col-3 and there will be exactly 3 gallery items in each gallery row.
Each gallery item has categories as classes for filtering, make sure they correspond with the data-filter attributes in the category menu.
<div class="gallery"> <div class="gallery-row"> <dl class="gallery-item col-NUMBER CATEGORY"> <dt class="gallery-icon"> <a href="LARGE IMAGE"><img src="THUMBNAIL IMAGE" alt="" /></a> </dt> <dd class="gallery-caption"> <strong>HEADING</strong> <span class="small">DESCRIPTION OR CATEGORIES</span> </dd> </dl> </div> </div>
Make sure the thumbnail images have the same width and height, ideally 480px in width.
Setting up blog pages
Blog page consists of:
- article - one blog post
- .post-thumb - wide thumbnail
- .entry-byline - meta info with author vcard
- .entry-summary - excerpt
- h1 - heading
- p - excerpt
- .entry-footer - meta info
Choose the layout of the blog page by adding a .left-sidebar or .right-sidebar class to the body tag.
Tip: In the author's vcard, use your google plus account link - that way your page will appear in search results like this:
Setting up contact page, map and contact form
Open the contact.php file and go to the bottom, where the map script is. Here, fill the address twice (on two lines). Make sure that maps.google.com recognizes this address. You can play with the zoom property to get a perfect map granularity.
All files needed for the contact form to work are in the /contact folder. Open the contact.php file and change the email address to yours. You can try the contact form, but first it has to be uploaded on a server with php.
Creating your own color scheme
Each html file uses a colors-classic.css color scheme. There are more to your disposal in the /css folder. Take any you like the most and copy it. Keep it in the /css folder. Include the link to your newly created color scheme in the <head> section of your html files.
The color scheme css file has only a couple colors. If you take a closer look, each section divided by comments has one color. So if you want to change blue for red, make sure you change the color hex code in the whole section.
For a perfect color scheme with harmonious colors, I recommend colorschemedesigner.com.