15 comments found.
How do I use the filters on the gallery page?
Each filter link has data-filter attribute with value of CSS class to use for filtering gallery item:
<a class="" href="#" data-filter=".graphicdesign">Graphic Design</a>Each gallery item (LI element) has appropriate CSS class:
<li class="item col-md-4 isotope-item graphicdesign webdesign"> ...
</li>
This is how you connecting your filters to gallery items. Just add appropriate CSS class on your gallery items and use this class as a value for a “data-filter” attribute on your filter link. Do not forget about dot before CSS class name for your filter.Best regards!
That makes sense, but what should the class and href be for each date-filter?
- All
- Strategy & Analysis
- Web Design
- User Experience
<a class="" href="#" data-filter=".strategy-and-analysis">Graphic Design</a>
<a class="" href="#" data-filter=".user-experience">Strategy & Analysis</a>
...
<li class="item col-md-4 isotope-item strategy-and-analysis">
...
</li>
<li class="item col-md-4 isotope-item user-experience">
...
</li>
<li class="item col-md-4 isotope-item strategy-and-analysis user-experience">
...
</li>
You can add multiple classes on LI items to show them in multiple filters.Best regards!
So the href remains a hashtag?
I am referring to the a class href reference at the top.
a class and href at the top
HREF attribute for A tag at the top can has any value. We used hashtag. The ‘data-filter’ attribute should has the same value as an item’s CSS class for item that you want to filter by clicking on ‘A’ element. With the dot at the front of it.
You can read more about filtering here: https://isotope.metafizzy.co/filtering.html
Best regards.
I am still not following. Please view my web page at http://www.tyrapoole.com/icm505/project/gallery.php and confirm how I make the filter links (Web Design, User Experience) at the top click to a filtered page.
Hello!
Thanks for a link for your site. It is very helpful.
You have two JS errors:
http://prntscr.com/f5pm03
To fix first error you need to move end of comment on 1 line above:
http://prntscr.com/f5pmh1
It seems that you want to use this plugin:
https://github.com/jbutko/stickyNavbar.js#1-setup
But the script file is commented out:
http://prntscr.com/f5pnmo
Please fix those problems and note us.
Best regards!
Yes, I know have my Stickybar js commented out. It is on purpose because it was not working and I am still troubleshooting.
Can you help with my filtering issues on the Gallery page? All I want is for my filtering links at the top of the Gallery page to work. Please advise.
You need to get rid from all JavaScript errors from your console because all other JS plugins could not work properly. After fixing errors of course we’ll could help.
Please comment out stickyNavbar initiation code:
http://prntscr.com/f5vi8q
and also move closing comment tag on line above in your “plugins.js” and note us after that:
http://prntscr.com/f5vizf
Best regards!
These changes are now reflected on my site. Please advise.
http://www.tyrapoole.com/icm505/project/gallery.phpSorry, but you still have an error in your “plugins.js”. You need to remove this code:
http://prntscr.com/f626fu
After that your gallery should start working.
Best regards!
OK. The filtering option now works. One last question. How are the heart ratings supposed to work on this template?
Hello!
Great to hear it!
Some of front end elements in HTML templates requires server side coding. Such as blog and comment feed on blog post.
And this heart rating is one of those features.
By clicking on this heart you need to create an AJAX query to iterate likes count in gallery post in the database and create a cookie for user to prevent multiple “likes”.
If you do not want to create all of this functionality, you can simply remove this heart in your HTML code or via CSS:
http://prntscr.com/f6gikf
Best regards!
How do I get rid of the ‘Choose Accent Color’ tab on the left?
Thanks for purchase!
Please open your “js/plugins.js” file and comment out the code from line 111 to line 134:
//color swither
var $colorSwitcherLink = jQuery('#color-switcher-link');
function setColor(color) {
$colorSwitcherLink.attr('href', 'css/' + color + '.css');
}
if (jQuery.cookie('color')) {
setColor(jQuery.cookie('color'));
jQuery.cookie('color', jQuery.cookie('color'), { expires: 7 });
};
var colorSwitcherHTML = '<div id="color-switcher"><div>';
colorSwitcherHTML += '<a href="#" id="color-0"></a>';
colorSwitcherHTML += '<a href="#" id="color-1"></a>';
colorSwitcherHTML += '<a href="#" id="color-2"></a>';
colorSwitcherHTML += '<a href="#" id="color-3"></a>';
colorSwitcherHTML += '<a href="#" id="color-4"></a>';
colorSwitcherHTML += '<a href="#" id="color-5"></a>';
colorSwitcherHTML += '<a href="#" id="color-6"></a>';
colorSwitcherHTML += '</div></div>';
jQuery('body').append(colorSwitcherHTML);
jQuery('#color-switcher').on('click', 'a', function(e){
e.preventDefault();
setColor(jQuery(this).attr('id'));
jQuery.cookie('color', jQuery(this).attr('id'), { expires: 7 });
});
That did not seem to work to remove the Accent Color tab. I added /* at the beginning of line 111 and */ at the end of line 134. Please advise.
Everything should work. Please try to clear your browser cache or view from another browser or another device. JS files are often cached by browsers.
Awesome, thanks!
Beautiful template Im looking at purchasing this template very soon for a site called Mehouse.com.au Real Estate , you have done a great job designing this theme.A++
Great theme but does the contact form work?
Hello, tgrino! You need working PHP on your hosting server with “mail” function enabled. There is a “contact-form.php” in your site root directory. You can open it in any text editor and change some of variables ($your_email, for example, in line 7)
I don’t see such file in the bundle??
Hello, tgrino! Sorry for long response! We had problems with comment notifications.
When you download your zip package, you can see “HTML” and “HTML2” folders in it. Each of this folders contains “contact-form.php” file.
For some reason the Facebook icon was not showing when I previewed the website in my computer, now that I Uploaded the files to my hosting provider , the icon shows.
Thanks anyways,
Can you help me to make the contact form to work please.
Please check your e-mail.
Awesome Site, excellent customer service.
Hi dxtemplates, can you please tell me how can I add the Facebook link button in the gallery in the index.html and gallery.html
It only shows the twitter option in my files.
Thank you
<a class="socialico-facebook" href="http://yoururl.com">facebook</a>
For more icons please follow next link:
Hi. LOVE this template!! http://2.envato-static.com/assets/smileys/grin-5f7c72bae94b93b2f4be36971faa186e.png Very easy to work with! I do have one question – How can I do a section with an image background and a form, similar to this :: http://www.zillow.com?
Thanks!
Hi, jaemijkg! Thanks for your interest to our template! Please specify, do you need a section with static background image, or with slider as a background? We can send a simple HTML and CSS code to you to resolve your problem.
It think I prefer a static image but if you could provide both that would be great. Thanks!
At first, just create a section, add a styles for it:
position:relative; background: url(../img/your_fullwidth_image.jpg) no-repeat 0 50% transparent;
Then put this HTML code inside of your section:
<div id="form-center">
<h3>Form Header</h3>
<form action="/" method="post" class="form-inline">
<div class="form-group">
<input type="search" class="form-control" placeholder="Search">
</div>
<button type="submit" class="theme_btn">GO!</button>
</form>
</div>
Finally, add following styles to your form:
#form-center {max-width: 100%; width: 400px; height: 200px; position: absolute; z-index: 5000; top:50%; left: 50%; margin-left: -200px; margin-top: -100px; background-color: #ddd; background-color: rgba(30, 30, 30, 0.8); box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); padding: 20px 30px; text-align: center;}
#form-center h3 {color:#fff; text-align: center;}
You can also put this HTML code before “ul” element inside “mainslider” section.
Thanks! That worked. Will You please tell me how do I make it responsive? Here’s what I got – www.loveliveandparty.com. It doesn’t look great on the pad and its terrible on the phone.
Also, my menu hides behind the form. How can I fix this?
1. Set ‘z-index’ property to 5 for #form-center element. 2. Remove ‘float:left’ inline styles from your input fields. 3. To center your #form-center element please use ‘left:50%; margin-left:-400px’; 4. Replace your ‘div’ tag with ‘span’ tag between ‘min_price’ and ‘max_price’; 5. You can use media queries to set width and left margin of your form on different screen resolutions.
Great work 
Thank you, hmettali
Nice work! Good Luck with Sale! 
Thank you, AirTheme. I wish you good sales too )
Thanks, AirTheme. I wish you good sales too!
WoW! I like it! Do you have this theme for wordpress?
Hello! We do not have a WordPress version at the moment. But we planning to make it soon.
Impressssssssive work, good luck with sales 
Thanks, man. You can tell me about good sales )))
Great work 
Thanks, tranmautritam. I like your single pages too )
Nice work! Good luck with sale 
Thanks a lot, Skypix!
Good work and welcome 
Thank you, Jaheravy
I’m happy to be here!