109 comments found.
Does the contact form use the “FormMailer” software?
I also want to say, I am very happy with this template and find that it is fairly easy to customize and work with. Thank you for all of your hard work on creating and maintaining it. Also for assisting all of us in implementing it. 
The contact form uses my custom JS/PHP scripts (“Contact/Comment Form” section in custom.js, and mail-contact.php).
And thank you very much for your words of appreciation!
Do you know if there is an issue with Windows 8 and rendering the color? It won’t seem to render any other color then blue for the main-color-1 on a Windows 8 machine. I have tried it in several browsers. I have a Mac and I am not having the same issues on the mac. This isn’t just happening on my site, but I do the preview here on yours and it is doing it as well.
Thank you
It’s very strange considering that there is nothing specific in main-color-1 styles. Each of these files (like main_color1/green.css, for example) includes just a few lines of simple CSS1 properties: “color”, “background-color”, and “background-image” without gradients and transparency.
Any way, I will certainly test it on Windows 8 within the next few days…
I agree, It is very strange. I have a Mac and I am not familiar with Window 8, but I have been working on a Windows 8 machine that has Dreamweaver to complete my website. Thank you!
Hello Jouelan,
I have tested the template on Windows 8 in Firefox, Chrome, and IE11 by switching color schemes – no issues with color rendering found, as expected.
Hello Emerald! Great looking template, but errors and warnings in W3C checker … are you able to fix them? http://validator.w3.org That would be great!!! Thank you!! Markus
Hello Markus,
Thanks for good words!
These are common errors/warnings (not template specific) or caused by using external content (like Google fonts, YouTube/Vimeo videos etc.) – so I’m not able to fix them (or, for some warnings, it doesn’t make sense to do it).
Thanks for the quick answer. I understand your point. But I want to have them fixed anyway. Do you have any idea how? Another question: Do you have instructions/examples for the form features in the template? Thank you!
- Bad value X-UA-Compatible for attribute http-equiv: discussion on this issue
- Google fonts link bad value: see solution here
- Warnings about headings and sections like “Section lacks heading”: you can replace
sectionwithdivtag
Instruction on how to use contact form can be found in “HTML Files and Structure” -> “Contact Form” section of documentation. Also see examples in html files – they are self explanatory.
replacing the section with div tag messes up all the website
For me it works properly – see these temporary files: _index.html , _portfolio-2-columns-sidebar.html , _announcements.html.
The only thing you should change in layout.css – replace section with div in all lines that contain .announcements class.
... it would be nice to have also other suggestions on how I can use large size menu
... tooltip for all kind of text or pictures !!! is it possible ? in the same way you have created for pricing
Hi Carlo,
1) Find “Main Navigation” > “Responsive menu” in custom.js and set “nested” to “false”.
2) Menu with toggling nested levels could be an alternative to classic select element… but it needs customizing the template.
3) Modify “Pricing Tables” > “Tooltip” section in layout.css:
span[data-tooltip],
.pricing-table .features li[data-tooltip] {
...
}
span[data-tooltip]:hover,
.pricing-table .features li[data-tooltip]:hover {
...
}
span[data-tooltip]:hover:before,
.pricing-table .features li[data-tooltip]:hover:before {
...
}
span[data-tooltip]:hover:after,
.pricing-table .features li[data-tooltip]:hover:after {
...
}
.ie8 span[data-tooltip]:after,
.ie8 .pricing-table .features li[data-tooltip]:after {
...
}
.touch-screen span[data-tooltip]:before,
.touch-screen span[data-tooltip]:after,
.touch-screen .pricing-table .features li[data-tooltip]:before,
.touch-screen .pricing-table .features li[data-tooltip]:after {
...
}
span[data-tooltip]:hover:before {
left: 0;
bottom: 27px;
}
span[data-tooltip]:hover:after {
left: 20px;
bottom: 22px;
}
Then you can apply “tool tip” feature like this: ...<span data-tooltip="Some tip goes here" class="highlight dotted">some text</span>...
Hello,
You can get it to work by doing some modifications:
1. Replace #projects-holder with .projects-holder in layout.css and carousel.css.
2. Replace #projects-carousel with .projects-carousel in layout.css and custom.js.
3. In your html file use “projects-holder” and “projects-carousel” as class attribute instead of id attribute, like this:
<section class="carousel-container projects-holder">
<div class="carousel-frame">
<ul class="projects-carousel three-slides clearfix">
...
4. Replace the “Project Carousel” section in custom.js with the following code:
(function() {
var $carousel = $('.projects-carousel'),
fullWidth = $('#main-content').length ? false : true;
function getVisibleSlides(carClass) {
var slides;
if ($(window).width() < 768) { // for small-screen mobile devices
slides = 1;
} else if ($(window).width() < 960) { // for a width of 768px
if (fullWidth && carClass != 'two-slides') { slides = 3; }
else { slides = 2; }
} else if ($(window).width() < 1200) { // for a width of 1024px
if (fullWidth && carClass == 'four-slides') { slides = 4; }
else if (fullWidth && carClass == 'two-slides') { slides = 2; }
else { slides = 3; }
} else { // for a width of 1280px and higher
if (carClass == 'three-slides') { slides = 3; }
else if (carClass == 'four-slides') { slides = 4; }
else if (fullWidth && carClass == 'two-slides') { slides = 2; }
}
return slides;
}
function adjustCarousel(carObj, carClass) {
var animationStep, visibleSlides;
visibleSlides = animationStep = getVisibleSlides(carClass);
if (visibleSlides != carObj.settings.visibleSlides) {
carObj.update({
animation: {step: animationStep},
visibleSlides: visibleSlides
});
}
}
$carousel.each(function() {
var $this = $(this);
if ($this.length) {
var animationStep, visibleSlides, carouselClass;
if ($this.hasClass('two-slides')) { carouselClass = 'two-slides'; }
else if ($this.hasClass('four-slides')) { carouselClass = 'four-slides'; }
else { carouselClass = 'three-slides'; }
// Init carousel
visibleSlides = animationStep = getVisibleSlides(carouselClass);
var carousel = new Carousel($this, {animation: {step: animationStep}, visibleSlides: visibleSlides});
carousel.init();
// Window resize event
$(window).on('resize', function() {
var timer = window.setTimeout(function() {
window.clearTimeout(timer);
adjustCarousel(carousel, carouselClass);
}, 30);
});
}
});
})();
thanks for the quick reply IT IS working!!! amazing….
I knew it, I knew I was doing the right thing buying this template many thanks check out this site http://www.ferienhaus-idrosee.de/de/tiziana_2_de.htmOUT 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.
Hey Emerald – This is an amazing template. Thanks for the great work
I am struggling with something that I hope you can clear up for me. I am using Home Page 2 with the “Why Choose Us” and “Good Words” sections from home page 4. While editing and previewing from my local view I can see the checkmarks in the Why Choose Us list, but they don’t show up on my remote test site? I’ve tried everything that I know. What did I mess up?
Hi ETBiggs,
It’s most likely you have not uploaded all necessary files (.css or .png icons) to your server. You can check missing image files by using tools like Firebug in Firefox, or built-in “Inspect element” action in all popular browsers.
Can you give me a link to your test page?
thanks for the quick reply. test.gourmetdispensing.com
These images on your home page are missed:
images/colored_theme/main_color2/red/intro-shadow.png
images/colored_theme/main_color2/red/list-marker-check-colored.png
I had a image path issue in the red.css page. Thanks for the help – i didn’t know about the inspect element features in the browsers – worked like a charm. kinda new at this
Hi, just purchased the template today, so far I love it and so does my client. I am trying to add my logo at the top left to replace the Emerix logo. But mine is much higher. It’s 161px high. I am trying to find the right code in CSS to raise the height of that header section. I have not found that yet, can you help in which CSS file and what section and line number is the adjustment made?
Thanks, Tim
Hi Tim,
Find the “Header Menu” section in layout.css and change “margin-top” and “top” properties for the following styles like this:
#navigation {
...
margin-top: 140px;
}
#header.extended #navigation { margin-top: 100px; }
body.sticky-menu-active #header {
...
top: -190px; /* match header height */
}
body.sticky-menu-active #header.extended { top: -189px; }
body.sticky-menu-active #header.top-bar-embedded { top: -228px; }
Also modify the following line in custom.js (“Sticky Menu” section) like this:
headerYPos = $header.hasClass('extended') ? -129 : -130 - topBarHeight,
Great. Thanks for the info. I found it and made the adjustment. Great template.
Hello again. I am now working with the contact form and need to add a 2nd recipient. Is it best to add on the same line, or add a CC to that area on the mail-contact.php file? Thanks
I found the answer, I have the quotes in the wrong place.
HI, I´m trying to replace the social share included for addthis tool in my project. It works good but the problem is when I use a touch-screen cause when I choose the option more, the pop-up appear under the page and it must be over the page. I send you the url in order to do some trials:.http://proyecto-arte.es/zeta/ana-laguna-2.html Thanks
Hi,
I explored the problem and found the solution: add the following style to layout.css:
#at4m-mobile-container {
position: relative;
}
Thanks. Now it´s right
Hi, I,m usiing masonry gallery for my job. The problem is that the pictures have dfferents dimensions and I can´t to cut them. I want to put a measure for width and the height auto There is any way todo it?
For the masonry gallery, the best way is to follow the image sizes used in the example. Why can’t you just cut your images to required dimensions?
Because I´m using paintings and you know, the dimensions are totally differents among them and the autors dislike I cut their works
Full-size images/paintings can be easily displayed in a lightbox overlay without being cropped.
I know. I´m doing that but I´m looking for a way to show the paintings in the gallery the same way. I saw that in other templates
Nice work Good luck with sale;
Thank you!
Hi Great Template,
How do I edit the google map at the bottom of the contact page to show an address of my choosing?
Kind Regards
Chris
Hi Christopher,
Open custom.js file, find the “Google Maps” section, and change either address or mapCoords depending on posType chosen.
More information can be found in the Documentation (“Javascript” > “Google Maps”).
Hi, I absolutely love your template! But I’m having two problems 
I’m using the sticky header and having a problem with hash tag links. It’s scrolling the content up to the top of the browser and underneath the header. How can I get the scolling to stop at the bottom of the header?
Also, unfortunately I need to have 8 menu items as opposed to the 5 in your template and at certain sizes (say potrait mode on an ipad), a couple of the menu items wrap around underneath. That’s fine, but the drop down menus for the top row of items is appearing underneath the second row of menu items. Is there any way to stop that?
Hi,
1) Give your anchor a class: <a class="anchor" id="section1"></a>. Then add CSS styles to layout.css (70px is the height of the sticky header):
a.anchor { display: block; position: relative; top: -70px; visibility: hidden; }
The solution is taken from here .
2) Just add z-index: 2; to #primary-nav ul ul styles in layout.css.
#primary-nav ul ul {
position: absolute;
top: -999em;
width: 170px;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
z-index: 2;
}
Awesome! Thank you so much
I’m using a contact form php script on one of my pages which works fine but I noticed that the text input fields are limited in width regardless of what I specify in the script. The same settings work in the plain HTML site so I’m guessing it’s either the way I’m inserting it (a PHP code snippet in the body of the page) or something else. Can you possibly give me some troubleshooting advise on what to look for to resolve this? The code is inserted in a three-fourths columns page-left-col with right sidebar page but the contact form fields max out at about a third of the available width. Many thanks in advance.
These are the styles (“width”) declared for form elements in layout.css -> section #28 -> “Form” which, in their turn, overwrites the default styles set in base.css -> section #5 “Forms”. Change the “width” style for input/select/textarea in layout.css if you want to set another size.
Hello Emerald,
Love the template and have the majority of my site coded and getting ready to load it to the server but I’m stuck on one thing. I want to use the footer that appears on index6 but without the striped section that comes before it. While I can get the footer into the other layouts successfully I can’t seem to get the up-arrow and Back to Top to sit on top of the footer properly. I’ve tried using a conglomeration of the various footers but I haven’t been able to get it to work. Is there a way to do this?
Thanks again for an awesome template theme.
Hello Bill,
After removing the striped section, replace <footer id="footer" class="blank"></footer> with the following HTML code:
<footer id="footer" class="blank">
<div class="container"> <!-- 1080 pixels Container -->
<span class="scroll-top">
<span class="arrow-top" />
<span>Back to Top</span>
</span>
</div> <!-- end 1080 pixels Container -->
</footer>
Also find the “Footer” section -> “Scroll Top” in layout.css and change top: -49px; to top: -24px;
Thanks for the code. It seems to put the arrow and text in the proper position but it seems to be squished. I edited clean copies of the two files (index6 and layout.css) several times to make sure it wasn’t an errant typo or something funny with my copy and paste. Here’s what it looks like right now and confirmed on several different browsers:
The .scroll-top block should look exactly the same as in other footer layouts. It was somehow corrupted here by the comments system.
Actually, the footer code was somehow corrupted by the comments system. I typed it in manually and it worked fine. Thanks again for your help and great pages
Hi Emerix, I purchased this template and I chose for my index project the index page 2.
Is there any way to change all text include the title and the preamble, you know (Ideas change the world…..) when the slider-caption change?
I tried to do it removing the h1 and preamble but It causes some problems in Tablet Portrait size (min-width: 768px) and (max-width: 959px)
Thank you
Hi,
Yes it’s possible. Do these changes:
1) the “intro-wrapper” section in index2.html should look like this:
<div class="intro-wrapper">
<div class="intro-content caption-inside clearfix">
<!-- Slider Caption -->
<div class="slider-caption" data-smallscreen="yes">
<div id="caption1">
<h1>Ideas change <br />the World</h1>
<section class="preamble mb-30px">
<p class="mb-25px">Our vestibulum ante ipsum is to primis in faucibus orci luctus et ultrices posuere Curae, and to luctus pretium justo mi nubius. We beleve egestas tincidunt nulla convallis nisi fringilla.</p>
<hr class="divider-pattern wave colored offset-right-10px" />
</section>
<div class="number-box">1</div>
<div>
<h5>Discover Emerix</h5>
<p class="mb-7px">Join us for the Emerix Tour to discover all the features it has.</p>
<a href="typography.html" class="link-sm">Learn more<span /></a>
</div>
</div>
<div id="caption2">
...
</div>
<div id="caption3">
...
</div>
<div id="caption4">
...
</div>
</div>
<!-- end Slider Caption -->
<div class="clear" />
</div>
</div>
2) add/modify the following styles in layout.css:
/* Homepage slider caption inside the "intro" section */
.intro-content.caption-inside h1,
.intro-content.caption-inside .preamble {
margin-right: -20px;
}
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.intro-content.caption-inside h1,
.intro-content.caption-inside .preamble {
margin-right: -60px;
}
}
@media only screen and (max-width: 959px) {
.intro-content.caption-inside h1 br { display: none; }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.intro-content.caption-inside h1,
.intro-content.caption-inside .preamble {
width: 468px;
margin-right: 0;
}
.intro-content.caption-inside .slider-caption {
float: none;
width: auto;
height: 160px;
margin-top: 0;
}
.intro-content.caption-inside .slider-caption > div { width: auto; }
.intro-content.caption-inside .slider-caption > div > div {
position: absolute;
top: 10px;
left: 498px;
width: 209px;
}
}
@media only screen and (max-width: 767px) {
.intro-content.caption-inside .slider-caption {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
3) find “adjustTitle” function in custom.js and comment out (or delete) the following lines:
$('#home-intro h1').html(titleMod);
$('#home-intro h1').html(titleOrig);
4) in jquery.flexslider.min.js:
- find “setCaptionHeight” function and modify the captionHeight variable like this:var captionHeight = $cap.height();
- find “positionCaption” function and comment out (or delete) the following lines:
$('.intro-content .slider-caption').css('top', captionTop + 'px');
$('.intro-content .slider-caption').css('top', '');
Thanks. It works perfectly.
Hi, I bought emerix template, but I though it was a wordpress theme. Now I’ve to integrate your html template to my wordpress theme, but i’m not a programmer, so I want to ask if you have a wordpress theme working to install directly in wp. Tnx
Hi Jose,
Unfortunately, I don’t have the Emerix WordPress theme yet. I’m only planning to develop it.
Hi, First, I like a lot the theme and I thinking to purchase it. In the Main Features list you talk about Portfolio filtering and Search Engine Optimized but I can´t see these in the demo. Are these aviable in the theme?
Hi,
The example with portfolio filtering can be found on 2 Column Portfolio page.
“Search Engine Optimized” is a common feature of the template’s structure – using of heading tags, “alt” and “title” attributes etc.
Thanks
I purchased your great looking template and don’t know how to allow for a logo that’s twice the width of the one in your demo layout. When the menu wraps around the logo isn’t centered vertically. Can you suggest a fix to either center the logo vertically when the menu wraps around when the layout is reduced to how to make the template move to the mobile popup menu when the template size is reduced. Thanks in advance.
You can make the template change to the mobile pop-up menu when the template size is reduced by adding the following styles to the “Tablet Portrait size” media query section in layout.css:
@media only screen and (min-width: 768px) and (max-width: 959px) {
#header {
padding-bottom: 20px;
-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
}
#logo {
position: static;
display: inline-block;
float: none;
margin: 15px 0 0 0;
}
#navigation, #primary-nav { float: none; }
#navigation, #header.extended #navigation { margin-top: 20px; }
.js #main-menu { display: none; }
.js .selectnav { display: block; }
...
}
Thank you for your quick response. I’m just curious if I should do this for tablet portrait users or let the menu choices wrap, at least in regards to a expected behavior or user experience for tablet users. Would it be better to let the menus wrap around instead of dropping into the pop-up menu? If so, could I trouble you to tell me how to center the logo vertically please? I appreciate your assistance and your hard work on this template. Thanks.
It’s quite easy to do:
@media only screen and (min-width: 768px) and (max-width: 959px) {
#logo { bottom: 38px; }
...
}
Adjust the value of “bottom” property depending on your logo height.
Thank you for a great template set and amazing support!
Hi there, when working on the website in Dreamweaver, it’s very slow to the point you want to quit. I know for the sure the problem is to do with this particular site, because when I open a different site to work on Dreamweaver works normal, even though we are working offline and all sites are on the same HD. Any solution you may have would be very helpful thank you.
