Keylight - Light & Flat Portfolio HTML Template
Keylight is a simple one page portfolio template, great for showcasing your work or for a small agency’s portfolio. It’s responsive and it’s based on LESS, which makes it highly customizable.
Features
- Based on LESS, easily customizable. Change all the colors in seconds.
- Fully Responsive – looks as great on a phone as on a desktop computer.
- Working AJAX form
- Subtle scrolling and animations
- 3 types of portfolio – slider, single item and Dribbble gallery
- Pricing table
- Easily configurable map & video section.
Support
Please use the comment section if you have any support questions.
Shots from Dribbble players used in the preview:
- Appreciation. by Miroslav Rajkovic – http://dribbble.com/shots/1166598-Appreciation
- Coaching iOS7 Concept by Julia Khusainova- http://dribbble.com/shots/1185125-Coaching-IO7-concept
- Wedding Invitation Suite by Dillon Vrosh- http://dribbble.com/shots/1182267-Wedding-Invitation-Suite
- Wallet One App by Workgroup genue – http://dribbble.com/shots/1175681-Wallet-One-App
- Lydia Redesign by Vincent Tantardini – http://dribbble.com/shots/1172561-Lydia-Redesign
- Blocket Redesign by Markus Dahlbom – http://dribbble.com/shots/1186662-Blocket-Redesign
- iOS 7 Calendar App Redesign by Kyle Craven – http://dribbble.com/shots/1129981-iOS-7-Calendar-App-Redesign
- My New Website Portfolio by Guglielmo Pardo – http://dribbble.com/shots/1183582-My-New-Website-Portfolio
Updates
Find out which version you have by opening css/main.css or css/main.less. If there’s no Version: X.X this means you’re using the base version 1.0. All newer versions have a Version: X.X line.
Version 1.2
FIX – form submission not working properly, fixed.If you’re updating from 1.0 or 1.1 please add ” method=”POST” value=”1000” ” to all files that use a form element. Then open process.php and add $budget = strip_tags($_POST[‘budget’]); after $message = strip_tags($_POST[‘message’]); and Budget: $budget$\n between Email: $email\n and Message: $message\n. If you don’t get this overwrtie process.php with the new one and set it up with your details.
FIX – main navigation horizontal position for lower resolutions.If you’re updating from 1.0 or 1.1 pljust replace main.js
Version 1.1 + Guide how to update from 1.0:
If you’re updating from 1.0 copy and replace the css/main.css and css/main.less file with your current ones & js/main.js with the current one. Caution: if you’ve made changes to these files, please make a backup and then reapply them on the new files.
FIX – singlePageNav now accepts external links.
To apply this fix in version 1.0 update file js/plugins/jquery.singlePageNav.min.js
To use an external link, please be sure to include a class ’.external’ to the corresponding anchor.FIX – .btn padding on different OSs due to font rendering
To apply this in version 1.0 copy file js/plugins/jquery.fixClient.js from the download package to your website in folder js/plugins. Then edit all HTML files to include the new file (i.e. add line <script src=”js/plugins/jquery.fixClient.js”></script> at the bottom of the HTML page where the other scripts are added, but not after main.js)Optional FIX – removing class .clearfix from frequently used elements
To apply this delete clearfix class from these elements: .row, .wrapper, .content-container, .mainnav.FIX – Single slider flickering in Safari for OS X
This will be automatically fixed when you replace the CSS/LESS files.FIX – Go to top link on the logo and iOS flickering. Improved toggle button.
If you’re updating from 1.0, simply overwrite the current logo anchor with <a href=”#” class=”logo top”><img src=”img/samples/logo.png” height=”47px” width=”145px” alt=””></a>FEATURE – Blog area in index.html
There’s a new blog area in index.html which stands where Elements was before. Elements is now in a separate page. If you’re updating from version 1.0 make sure to open index.html from the new downloaded package and then copy the whole container that starts with <div id=”blog” class=”section content-container grey relative narrow-carousel”> in your index.html file on your website.FEATURE – Blog single page
There’s a new blog single page blog-single.htmlFEATURE – Portfolio single page
There’s a new portfolio single page portfolio-single.html
First: Great job on that template!
ReplyDeleteI try to figure out how I can change the slider in a way that the image changes every 3 seconds for example when the user doeesn’t click the arrows. Thank you vey much. Best regards, P.Hansen
Hello,
ReplyDeleteThanks for purchasing. I suppose you’re talking about Caroufredsel. Delete auto: false from the specific slider in main.js. Then you can take a look at http://caroufredsel.dev7studios.com/configuration.php and search for “auto” in order to get a grasp at the options the plugin gives you.
Regards,
Boyan
Great template.
ReplyDeleteHow could put facebook social plugins?
thanks
Hello,
ReplyDeleteIf you’re talking about the Like Button or Box you’d want to follow the instructions on this page: https://developers.facebook.com/docs/plugins/like-button/
If it’s a third party plugin – please read its documentation or startup configuration in order to set it up.
Regards,
Boyan
Hi,
ReplyDeleteI don’t get displayed the like button in the template.
Can you put me an example?
Or I can send you the code of my site.
Best regrads
Hello,
ReplyDeleteHave you read the instructions on https://developers.facebook.com/docs/plugins/like-button/ ?
Here’s a sample of the Like button: http://demo.tardigradestudio.com/themes/keylight/temp-facebook.html
Regards,
Boyan
I can put more than one location in google map?
ReplyDeleteThanks
Hello,
ReplyDeleteSorry for the late response. Yes, you can but you have to follow the instructions on the Google Maps API in order to customize it. Please take a look at https://developers.google.com/maps/documentation/javascript/examples/marker-simple and the other samples from the left menu in order to view different variations of the API.
Regards,
Boyan
Thank you very much.
ReplyDeleteAnd the last question?
How I can disable the responsive theme?
Thanks
Hello,
ReplyDeleteThis template is not designed to be non-responsive, so there isn’t a straightforward way to do this. You can delete these queries and their contents to disable the responsive CSS:
@media only screen and (max-width: 480px)
@media only screen and (max-height: 700px)
@media only screen and (max-width: 900px)
Regards,
Boyan
Hello,
ReplyDeleteis it posible to open a pdf and a new html site in the lightbox?
can u give me a code for this?
thx
markus
Sorry .. i found it in the example.html
ReplyDeleteTHX
I would like to make the top logo overlay the main page any quick fix for that .. thank you
ReplyDeleteHello,
ReplyDeleteI’m sorry but I don’t quite understand your request. Can you elaborate a bit more on it?
Regards,
Boyan
if you have any email i could send you a picture of what i am trying to do …
ReplyDeleteHello,
ReplyDeletePlease send us a message through the Profile page so we can answer you back – http://themeforest.net/user/TardigradeStudio
Regards,
Boyan
Hi congratulations on the template.
ReplyDeleteI’m finishing to change the template and noticed problems with the menu in mobile devices. The menu is very slow and suddenly no works, can you help me with this? also there is a very rare navigation in safari like jumps. Thank, the is domain:
http://castingboutique.mx/
Hello,
ReplyDeleteThanks for purchasing. As for the Safari bug – you could disable nicescroll alltogether – it gives that bug on Safari on Mac and I was thinking on removing this plugin from the theme anyway. To do this go to main.js and delete and delete this, starting on line 95:
if(windowWidth >= 768) {
$(“html”).niceScroll({
cursorborderradius: “0”,
cursorwidth: “7px”,
cursorcolor: ”#343434”,
scrollspeed: 35
});
}
As for the mobile menu bug – I can’t seem to notice it on our demo site, testing on iOS 7 and Android. But it’s there on your site, so maybe you’ll want to debug your JS to find out what’s wrong.
Regards,
Boyan
Thanks for the prompt response, I try deleting what you said and I still see shaky on safari. About the menu bug I cant figure out what to do. But it occurred to me because the problem is on closing the menu, cuold you help to make that after a link o the menu is pressed, this menu closes automatically?
ReplyDeleteThanks a lot and hope you can help me to finish this successfully,
greetings from mexico
Hello,
ReplyDeleteAs far as I can see, you haven’t disabled the nicescroll plugin and that’s why you still see the glitching. Search for niceScroll in main.js and delete these lines.
Considering the menu, as far as support goes I can’t see that bug in our demo – it closes after a link is pressed when opened on a mobile device. Maybe you should check your added code in detail.
If you are interested in hiring us for custom work, let me know so that I can prepare you a quote.
Regards,
Boyan
thanks, I replace the file main.js and run it and I realized that I was missing a few lines of code, do not understand how this happened but everything is already solved greetings
ReplyDeleteGreat, I’m glad your issue is now solved.
ReplyDeleteRegards,
Boyan
Hi,
ReplyDeleteFirst of all congratulations on your work, this template is very impressive and clean.
However, i am product designer with no knowledges in HTML or CSS. Is there a way to customize thius template easily ? Should I use dreamweaver to do this ?
Regards,
Hello,
ReplyDeleteThanks very much!
Unfortunately Dreamweaver’s visual editor won’t give you the level of control you need to edit some of the aspects of this template and knowledge of HTML/CSS & basic Javascript is required in order to set it up and customize it. I’d suggest using someone fluent on at least basic level of frontend development.
Regards,
Boyan
Hi and Great Theme
ReplyDeletejust trying to add a vimeo to this code and it does not like it.
you mentioned in your docs that I need to “set a .video class on the .wrapper element”
could you explain how you go about this and if I can do this for the Full Screen Home Page.
many Thanks!!!
Paul
Hello,
ReplyDeleteThanks for your purchase,
1. If you’re trying to add a video to open in the lightbox when an item is clicked in the portfolio, just place the link to the video in the href of the portfolio item. E.g. look here – http://demo.tardigradestudio.com/themes/keylight-temp/ – the first item opens a vimeo video. Nivo Lightbox automatically detects that.
2. The .video class is for when a video resides in the content and it makes it responsive using the fitVids plugin. On the same URL or in the demo, search for <iframe width=”560” height=”315” src=”http://www.youtube.com/embed/oUUvX6sOFIU?showinfo=0” frameborder=”0” allowfullscreen></iframe> in index.html – above it there’s a .wrapper it’s wrapped with. This wrapper has the .video class
Hope this helps.
Regards,
Boyan
Hello,
ReplyDeleteThanks for a great design, cant wait to get my site up soon.
I have one problem. The little bouncing arrow on the home page does not show on my laptop screen. When I zoom out using ctrl – I can see it. It there a way to make sure it always shows?
Cheers Katie
Hello,
ReplyDeleteThanks for purchasing. The arrow disappears if the screen is too short to fit all elements on the screen. However if you want to play with the variable and set when it disappears, edit the main.css or main.less (whichever you’re working with) file: find line @media only screen and (max-height: 700px) { and then inside there’s a.down {display: none!important;} – that’s the arrow link. Edit 700 or make a whole new media query only with the a.down to be sure that the other two properties won’t break anything else.
Regards,
Boyan
That looks very good!;
ReplyDeleteThanks very much!
ReplyDeleteHello,
ReplyDeleteI can’t figure out how to make the contact form work. Where do I put in my email for the form submissions to be sent to?
Hello,
ReplyDeleteThanks for purchasing and sorry for the delay.
You have to edit process.php in order to set it up with your email address.
Regards,
Boyan