32 comments found

dijichi Purchased

Hi

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.

emerald

Hi,

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?

squeezer Purchased

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

emerald

Hi Michael,

Thanks!

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>
</ul>

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; }
Default-user
squeezer Purchased

Hi emerald,

yes, thanks, works perfectly!

Thanks a lot for your quick reply!

Cheers, Michael

antislip Purchased

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

emerald

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:

<script>
// 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>'};
</script>
Default-user
antislip Purchased

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

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

emerald

Hi,

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!

Default-user

Thanks a lot for your help

emerald

You are welcome!

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

emerald

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! 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!

emerald

Thank you, gonzaloastorga!

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!

InanimateOne

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!

emerald

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.

InanimateOne

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

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!

emerald

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>
   </a>
</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…

InanimateOne
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;
}
@media
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.

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

emerald

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.

OUT OF OFFICE

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.

zebe-dee Purchased

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

emerald

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>
            ...
Roland Purchased

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

Thanks

by
by
by
by
by
by