Keylight - Light & Flat Portfolio HTML Template

Themeforest Keylight - Light & Flat Portfolio HTML Template

Download Keylight - Light & Flat Portfolio HTML Template

Download 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:




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.html


  • FEATURE – Portfolio single page


    There’s a new portfolio single page portfolio-single.html

Download Keylight - Light & Flat Portfolio HTML Template

Comments

  1. First: Great job on that template!


    I 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

    ReplyDelete
  2. Hello,


    Thanks 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

    ReplyDelete
  3. Great template.


    How could put facebook social plugins?
    thanks

    ReplyDelete
  4. Hello,


    If 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

    ReplyDelete
  5. Hi,


    I 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

    ReplyDelete
  6. Hello,


    Have 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

    ReplyDelete
  7. I can put more than one location in google map?
    Thanks

    ReplyDelete
  8. Hello,


    Sorry 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

    ReplyDelete
  9. Thank you very much.
    And the last question?


    How I can disable the responsive theme?
    Thanks

    ReplyDelete
  10. Hello,


    This 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

    ReplyDelete
  11. Hello,


    is it posible to open a pdf and a new html site in the lightbox?


    can u give me a code for this?


    thx
    markus

    ReplyDelete
  12. Sorry .. i found it in the example.html


    THX

    ReplyDelete
  13. I would like to make the top logo overlay the main page any quick fix for that .. thank you

    ReplyDelete
  14. Hello,


    I’m sorry but I don’t quite understand your request. Can you elaborate a bit more on it?


    Regards,
    Boyan

    ReplyDelete
  15. if you have any email i could send you a picture of what i am trying to do …

    ReplyDelete
  16. Hello,


    Please send us a message through the Profile page so we can answer you back – http://themeforest.net/user/TardigradeStudio


    Regards,
    Boyan

    ReplyDelete
  17. Hi congratulations on the template.


    I’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/

    ReplyDelete
  18. Hello,


    Thanks 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

    ReplyDelete
  19. 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?


    Thanks a lot and hope you can help me to finish this successfully,
    greetings from mexico

    ReplyDelete
  20. Hello,


    As 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

    ReplyDelete
  21. 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

    ReplyDelete
  22. Great, I’m glad your issue is now solved.


    Regards,
    Boyan

    ReplyDelete
  23. Hi,
    First 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,

    ReplyDelete
  24. Hello,


    Thanks 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

    ReplyDelete
  25. Hi and Great Theme


    just 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

    ReplyDelete
  26. Hello,


    Thanks 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

    ReplyDelete
  27. Hello,


    Thanks 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

    ReplyDelete
  28. Hello,


    Thanks 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

    ReplyDelete
  29. That looks very good!;

    ReplyDelete
  30. Thanks very much!

    ReplyDelete
  31. Hello,


    I 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?

    ReplyDelete
  32. Hello,


    Thanks 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

    ReplyDelete

Post a Comment