Discussion on Tectonic - Responsive HTML5 Template

Discussion on Tectonic - Responsive HTML5 Template

Cart 390 sales
Well Documented

emerald does not currently provide support for this item.

38 comments found.

I try with the original html of that section and it looks the same. Instead of 3 columns it comes out to two. I do not know why the html code is not copied.

Hi David,

Check your HTML code for errors. You can see it here:


First of all, pay attention on errors with opening/closing tags.

Let me know if you need more assistance.

It continues giving problems in that point of the page. How can I send you screenshot or html file?

There is no need for you to send me the screenshot or html file because I can see you website online and I can view the html code.

It seems that 3-column features on your homepage are displayed properly now… but you still have a few errors with open/unclosed tags:

Check the code between <!-- Sidebar --> and <!-- end Sidebar -->

Hello Emerald Great job especially to show my videography sector. I’ve done a photography section and all the galleries come for horizontal photographs. How can I create one for vertical photos? Thank you very much.

De nada :)

Hi, how are you? I have problems with a recent change in this section of the index. I do not know what I changed but I get two columns instead of three. And the web goes wrong. How can I solve that? I do not give with the solution. A greeting. <!- Features: Picture Type -> <section class=”features-picture-type clearfix margin-bottom-30px”>

What We Do

Sed ut unde omnis iste natus illo inventore fringilla tempor dignissim at, pretium et arcu luctus.

Read more </article>
<article> \\
Our Projects

Accusantium et veritatis architecto, eaque faucibus luctus quae ab vest id ligula porta felis semper.

Read more </article> <article> \\
Meet the Team

Fusce porttitor turpis quis molestie costant equat ante ipsum primis in ultrices posuere cubilia quis cursus.

Read more </article>
<!- end Features ->

section class=”features-picture-type clearfix margin-bottom-30px”>


Todo en lo que pueda servirle tanto si es particular o profesionales del sector audiovisual.

Servicios </article>
<article> \\
Detras del visor

David Teide, permítame presentarme si lo desea….

Leer más… </article> <article> Mañana del Domingo de Ramos de 2011.
Madre y Maestra

Documental sobre el año del Centenario de la Banda de CCTT del Real Cuerpo de Bomberos de Málaga.

Leer más… </article>
<!- end Features ->
            <!- Features: Picture Type ->
<section class="features-picture-type clearfix margin-bottom-30px">
<article> \\
El Corto de Viñeros

La Leyenda de Jesús Nazareno de Viñeros

Leer más… y véalo. </article> <article> \\
Documental Luz y Mar

Proyecto de documental para presentar una Hermandad que ha conquistado toda una zona de Málaga

Leer más… </article> <article> \\
Tvrris Fortissima

Documental de animación de como se transforma la Giralda de Sevilla, de Alminar a Campanario.

Leer más… </article>
<!- end Features -

Hello I can’t install the template.

“Csomag kitömörítése …

A sablon telepítése.…

A csomag nem telepíthető. A sablon nem tartalmazza a style.css fájlt.

Sablontelepítési hiba!”

What can I do?

Help me Thanks


This is not a WordPress theme, it is an HTML5 template (as well as all files in the “HTML” section on Themeforest.net). The Tectonic WordPress theme is available here.

If you needed the WordPress theme but accidentally purchased HTML template, you can request a refund on the template after buying the WP theme. Then I will approve the request, and you will get your money back in 3-5 business days.

Regards, emerald

I’ve recently purchased this theme and begun creating my site. Recently when I returned to a page to edit a text block, I got the message, “TypeError: undefined is not a function (evaluating ‘type_select.removeClass(‘st-arrow-down’)’)” and can no longer edit the text block (or any other, including a new one). The page displays as it always has. Please advise as to how to repair this.

Please update the theme to latest version 1.0.3 (see “Updating The Theme” section in documentation for detailed instructions on how to update the theme).

Any chance you have this as a wordpress theme?

I can wait a week. Thanks.

Hello jonbellemore,

I haven’t managed to complete the Tectonic WP theme yet. As you don’t have time to wait, I can provide you with the theme files so you can start working on your website now. Once the theme is available on Themeforest, you will purchase it. The theme itself is ready to use, the documentation is not finished. Send me a private message using the form on my profile page, so I can tell you how to download the files.

sorry this is so late. PM sent.

Great Template. Giving me a slight run for my money as my html knowledge is basic. This is the javascript on the google map section

var posType = ‘address’, address = ‘1730 San Antonio Ave, Alameda, CA 94501’, // map and marker address mapCoords = {lat: 37.7668, lng: -122.2579}, // map coordinates markerCoords = {lat: 37.7668, lng: -122.2579}, // marker coordinates mapZoom = 15, infoTitle = ‘Some title goes here..’, infoString = ‘

ABC Ipsum Studios

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

’, infoMaxWidth = 250, mapPosition, markerPosition;

This is the address I need to change it to, but can’t figure out how to get the correct info/coordinates. Has google changed how they do things?

Harlow Hills Farm 11900 NE Flett Rd Gaston, OR 97119

Thanks! Patty

Hi Patty,

Just set address to “Harlow Hills Farm 11900 NE Flett Rd Gaston, OR 97119” (leave posType = 'address') or specify coordinates for mapCoords and markerCoords (set posType = 'coordinates'). You can get coordinates by address using a service like this, for example.

Hope I got your question right.

Is it possible that the main navigation does not go across the entire width? As wide as the footer?


Yes, it’s possible. Open layout.css, find Section #28 (Media Queries) / “Screens with 768 pixels wide and higher”, and make the following changes in this subsection:

1) Replace .pattern-background #header with .pattern-background #header .sixteen.columns

2) Replace .image-background #header with .image-background #header .sixteen.columns

3) Add new style: #navigation { margin-right: 40px; }

Hi, I have some items in my sub menus that are a tad on the long side and instead of wrapping, they’re being cut off. How can I fix that?

Thanks :) Lee

Hi Lee,

Actually, they are wrapping but not visible (because the height of a sub-menu item has a fixed value).

You can fix it by one of two methods of your choice:

1) Increasing the width of sub-menu: find “Primary Navigation” section in layout.css and replace all “170px” to a bigger value. This will change the width of ALL submenus.

2) Setting the width for a certain submenu (and, if needed, “left” property for a sub-sub-menu), like this:

<li><a href="portfolio-2-columns.html">Portfolio</a>
   <ul style="width: 230px">
      <li><a href="portfolio-1-column.html">1 Column</a></li>
      <li><a href="single-project-video-youtube.html">Project with Video</a>
         <ul style="left: 230px">
            <li><a href="single-project-video-youtube.html">YouTube Video</a></li>


I’ll be on holiday from 16th to 25th of August with no internet connection. I will certainly reply to all questions and comments received as soon as I come back from the trip.

Thank you for your patience.

I agree, this is a great template. Unfortunately, I can’t find where in the css to change two items. I can manage simple css, and can trouble shoot quite a bit… these responsive templates have so much more in them! :)

I would like to change the organge that appears in the info-board (where the large heads are on the left side of each page). I have made changes in all of the rules that include that name but nothing works.

I would also like to change the background image of the grey water. In the css there are LOTS of different images documented but i can’t figure out what rule controls what is displayed. (They can’t all be displayed, can they?)

Thanks! Patty

Hello Patty,

1) The background color of the Info Board section is defined in layout.css (section #5) and overwritten further in the CSS file of the chosen color scheme. So if you did not change the default color scheme (“brown”) – just open “css/colors/brown.css”, and find the lines #35-38:

#info-board.colored {
   background-color: #d08d62;
   background: rgba(193, 98, 37, 0.7);

The first line background-color: #d08d62; is for IE7-IE8 (without transparency). The second line is for other browsers (RGBA format).

2) The using of body background image classes is described in “CSS Files” section of the Documentation. If you need more details on this, please ask.

Hi Emerald,

I have another question. My logo and /icons/big are appearing blurry on retina displays. I have searched for some fixes and have been given two options to try. Basically, create another image twice the size and add the following to the .css file… .logo { background-image: url(normal_image.png); } @media only screen and (-webkit-min-device-pixel-ratio: 2) { .logo { background-image:url(big_image.png); } } Or to simply add this… @media only screen and (-webkit-min-device-pixel-ratio: 2) { #map-page .ui-icon { background-image: url("/images/logo.png"); } } I’m not familiar with the #map-page. Do you know which will work best and then what section of the .css file do I add it in? And which .css file do I add it into…base.css or layout.css?

Thanks a lot!

Hi InanimateOne,

The logo image and other images that can’t be scaled (big and small icons) are appearing blurry on retina displays because the Tectonic template is not “retina ready” (defined as “High Resolution: No” on item details page).

I’ve done a little research on this subject and found pretty simple solution for logo image.

1) Create another logo image twice the size.

2) Make the following changes in .html files:

<div id="logo">
   <a href="index.html">
      <div class="logo"></div>

3) Add the following code in layout.css (section #2):

.logo {
   background: url(../images/logo.png) no-repeat;
   background-size: 130px 54px;
   width: 130px;
   height: 54px;
@media only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and (min--moz-device-pixel-ratio: 2),
   only screen and (min-device-pixel-ratio: 2) {
   .logo {
      background-image: url(../images/logo-2x.png);

You can open the index page to see how it works.

You can also try to use the approach above with /icons/big…

Thanks Emerald! You’re the best. I was aware the template wasn’t retina ready but just wasn’t sure which was the best way to solve the issue. So I read some more on it as well and see that above is a fix for Retina displays but there may be a more future proof fix for “all devices with a 25% higher resolution.” I will try both and test on all available devices. Just in case anyone else is having the same problem, here is the .css code to use along with the image .
.logo {
   background: url(../images/logo.png) no-repeat;
   background-size: 130px 54px;
   width: 130px;
   height: 54px;
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
    .logo {
      background-image: url(../images/logo-2x.png);
Source Link Here. Thanks again for all your help.

Gorgeous template. Great work! Read the comments and it seems you are very helpful to your purchasers. I’ll let you know if I have any questions as well. I also bought your Flash Estetica site which I may use later. Great portfolio Emerald!

The documentation is fantastic! You have made it very easy. I do have one question at the moment…where did you get the …/icons/big/ from? I’m looking for a package similar to use for “Services” icons. Cheers!

Those icons were taken from the old version of free iconSweets2 set, and slightly simplified (without shadow and gradient). As I can see, the same (or nearly the same) set of vector icons can be downloaded under “Try a Sample” link.

<punintended>Sweet!</punintended> Cheers Emerald!

Hi! I’ve just purchased this template and I want to congratulate you for its design :-) I’ll let you know if I have any questions. Greetings!

Thank you, gonzaloastorga!

I would like to purchase this template. I usually purchase Wordpress so i am not sure how can i make changes in this one. For example all the pages are too lengthy for me. i.e the homepage includes twitter feed and other stuff plus few things in main body content that i don’t like. Similarly on other pages.

How would i remove those things? Kindly note i am not a professional coder.

Secondly, can you please put up a picture how it would appear on mobile? main reason i intend to purchase is because i want a mobile-version enabled template

Hello HR_Designs,

You can make changes in the template by editing HTML files located in the root folder of the template (about-us.html, services.html etc). Each of these files represents a corresponding HTML page of your website. You just need to add, remove, or modify appropriate sections of HTML code inside a file.

You can edit these files in any text editor (even in standard Notepad). I use Notepad++ v.6 – free source code editor.

A single picture would not be a good demo. Simply resize your browser window to the width of mobile portrait/landscape view – this will demonstrate how the template would appear on a small screen device. Or just view the template’s demo version on your mobile…

Hi Emerald,

thanks for that awesome Theme. Since I’m not so firm with html/css and havent found anything in the documentation I have a question:

I need 1 link per site in a other color than the theme ( theme: blue, link orange). How do I do that?

Thank you very much


You can get it by declaring additional class for this type of link:

- find the “Links” section in the base.css and add the following lines (colors are taken from orange.css):

a.orange-link { color: #ef7f2c; }
a.orange-link:hover, a.orange-link > *:hover { color: #a8591f; }

- then add the “orange-link” class to a hyperlink element you want to make orange:

<a href="" class="orange-link">Your link</a>

And that’s all!

Thanks a lot for your help

You are welcome!

Hi Emerald, great theme thank you. I am probably missing something obvious but am I able to use 2 different google maps? For example, 1 with my office location and 1 on another page with my distributors on?

Cheers Dan

Hi Dan,

You need to do a little modification to be able to use 2 or more different google maps.

Find the “Google Maps” section in the custom.js, and add the following code before ‘var initialize = function()’:

if (typeof gm_params != 'undefined') {
   posType = gm_params.posType,
   address = gm_params.address,
   mapCoords = {lat: gm_params.mapCoords.lat, lng: gm_params.mapCoords.lng},
   markerCoords = {lat: gm_params.markerCoords.lat, lng: gm_params.markerCoords.lng},
   infoTitle = gm_params.infoTitle,
   infoString = gm_params.infoString;

In the HTML file of a page where you want to use a google map, add the following code before closing “body” tag:

// Custom parameters for Google Maps
var gm_params = {posType: 'address', address: '1730 San Antonio Ave, Alameda, CA 94501', mapCoords: {lat: 0, lng: 0}, markerCoords: {lat: 0, lng: 0}, infoTitle: 'Some title goes here...', infoString: '<h5 class="small">Your company name</h5><p class="remove-bottom">Some description text...</p>'};

Cheers will give it a go when I get a chance next week and report back

Hi emerald,

I purchased your template and it´s awesome! I already changed the color style which was an easy job to do. What I would like now is to include breadcrumbs. I already searched for it here but it seems that this was alreday solved although not in this frame. Can you help me out on this one?

Cheers Michael

Hi Michael,


You can do the following changes to use the page subtitle as the breadcrumb navigation:

In an HTML file – replace the H3 heading in the “page-title” section (line #146) with the code like this, for example:

<ul class="breadcrumbs clearfix">
   <li><a href="index.html">Home</a><span>/</span></li>
   <li><a href="portfolio-2-columns.html">Portfolio</a><span>/</span></li>
   <li>Single Project</li>

In the layout.css file – add the following styles to the Page Title section:

.page-title .breadcrumbs {
   position: absolute;
   top: -25px;
   list-style: none;
.page-title .breadcrumbs li { float: left; }
.page-title .breadcrumbs li span {
   color: #909090;
   padding: 0 7px;
.page-title .breadcrumbs a { color: #666; }
.page-title .breadcrumbs a:hover { color: #151515; }

Hi emerald,

yes, thanks, works perfectly!

Thanks a lot for your quick reply!

Cheers, Michael


Fantastic theme, love it!

One small issue, if I have a short page that doesn’t the reach the bottom of the screen vertically, then anywhere you click in the page toggles a reduction in the page height so the footer comes halfway up the page. If you click (anywhere) again, it toggles it back to full height so the footer is at the bottom of the screen again.


Thank you for the purchase and for the good words!

I got your question, but could not simulate the situation – the template works properly in all browsers. Can you upload the template somewhere online and send me the private message with the address of this short page for me to test it?

Hey, just want to say, this is an amazing theme! One of the best I ever worked with – great job! Keep it up!

Thanks for the good words! I’m glad you enjoy working with my theme!

Hi Emerald, Great theme. How do I add a picture to the info board that is on top of the sidebars on the left hand side of the page?


Thanks! See the Member Profile page (http://e-merald.com/themes/tectonic/member-profile.html ) – it seems, that’s what you mean.


Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey