Discussion on Showlight - Portfolio & Photography Template

Discussion on Showlight - Portfolio & Photography Template

Cart 112 sales
Well Documented

Equiet does not currently provide support for this item.

25 comments found.

Hi, if you don’t have support for it, where i can get support if I buy this template? Why it is in list page for buy if we don’t get to support?

Hi there, amazing work! Congratulations!

Please, a question for you: how I can remove the 2 side black stripe on “youtube video” page and make the youtube video really fullscreen?


Another thing that i was wondering if its possible to do is insert a different description for each of the images on the portfolio pages – either just underneath the image or ideally above the image inside the following section for the title bar that is already there: <!-- Title --> <div class="portfolio-title black"> In an old website template that I was using I used to be able to add a 'title' value for each image and it would then show on the webpage just below the image. The code for that on the old site was: <code> <li class="hidden"><a href="images/portfolio/IMG_1911.jpg" title="Diving on House Reef"></a></li> <li class="hidden"><a href="images/portfolio/IMG_1912.jpg" title="Diving at site 123"></a></li> </code> Is there an easy way to get short descriptions like these for each image to show in your template? Thanks</div>

Hi, really love the template but am having an issue with the contact form which is not sending emails. If you try to send an email through the form you just get ‘Email could not be sent’ but I can run /contact.php?test=test and it says that the testing email has been sent.

It does not look like its even trying to send any emails as i have run a packet sniffer on the web server and cannot see any outbound connections for port 25.

My server is running II7 with PHP5 and so far as i can see all of the configuration is in place for php. I have removed the file from my site now but to do a quick test of the php I created a file titled info.php with the contents of:

<?php phpinfo(); ?>

and then browsed to it in a web browser and the full php information for the server was shown. Can you think of anything else to try to find out why this is not emailing? The only thing that i have changed in the contact.php is my email address in the settings section.


Great, lovely template… are you having it in wordpress by any chance?????

I’m sorry, Showlight is not available as a WordPress theme.

Hi. I’m interested in buying your theme but I have one question.

How easy is to setup the portfolio style? I’ve bought one theme a couple o months ago and it’s being a real pain to setup the portfolio.


Hi, I saw in a commant a request to let the thumbnails fade away, but it seems i’m not able to make this work

In CSS, you need this (if you don’t want to compile SCSS code, replace @include with vendor prefixes like -webkit-transition: all 0.3s;): .slideshow__thumbs { top: 100%; bottom: auto; @include transition(all 0.3s); } .slideshow__thumbs.is-hidden { @include transform(translate(0,-50px)); } .slideshow__thumbs.is-hidden:hover { @include transform(translate(0,-100%)); } And in JavaScript: setTimeout(function() { $('.slideshow__thumbs').addClass('is-hidden'); }, 5000);
Does it need to become something like this? .slideshow__thumbs { top: 100%; bottom: auto; -webkit-transition: all 0.3s; } .slideshow__thumbs.is-hidden { -webkit-transform: translate(0,-50px); } .slideshow__thumbs.is-hidden:hover { -webkit-transform: translate(0,-100%); }

Kind regards


The code is kind of working, only the fact that the thumbnails just jump below the image and it creates a scrollbar. http://www.mystic-productions.be/

I’ve tried a few things but can’t seem to find how to solve it

Kind regards, Simon

I see. You can try this:
.slideshow { overflow-y: hidden; }

Thanks, that did the trick! Now it just got a delay because of the animation of loading the thumbnails but I’ll fix that myseld Thank you very very much ;)

For some reason my contact form is not working anymore in any browser. also the contact form, unedited, straight from the template zip is now not working. i know this isn’t a result of your template files, but for the life of me cannot find the error. i’ve tested the php file as indicated in instructions and it shows it’s working fine.

here is the link to the page. if you have some idea why it has stopped working, please let me know.

thanks so much http://ninasutherland.com/contact-photographer-nina-sutherland.html

Hi, I’m sorry, I’m not sure why is this happening. I noticed the data is being set with a different Content-Type and X-Requested-With headers, but I cannot see why is this so.

Hello Equiet,

Are there any social networking header styles included?

Thank You,


I would preferably use them in the contact us area. I forgot I had another question; Under the video tab, I love how the YouTube video starts right away… If I want to show 10 YTube videos, with a slidebar click’n’play. Is it easy to implement? Thank You.


I have not implemented any social widgets, but they shouldn’t be difficult to add.

I am using YouTube’s embed API. As far as I know, you cannot display multiple videos in a side bar, but you can arrange them into a playlist and play them one after the other.

I’ve kinda figured out Wordpress. I know how to edit a WP template. What do I need to edit this template (software)? Forgive me for my ignorance. I have Dreamweaver CS4, is that what I’ll need? I really like this template; I don’t know if I need to stick with WP or if I can work with this template (I’m not a coder, I take pictures)... I welcome your advice. Is there a WP version? thanks in advance.

Hi. Unfortunately Showlight is not a WordPress theme, it is just a simple HTML template. You can edit this template in Dreamweaver or any other text editor. Some HTML and CSS skills are needed for this template.

for the slideshow, what would i enter to specify the dimensions of the image and the alt tag? interested in the alt tag for seo purposes for that page as it’s the only thing really on that page, also interested in the width and height to speed up page load. i’ve heard that entering the dimensions will speed it up considerably.

thanks so much!


Entering width and height should have no effect on speed. You can use Progressive JPEGs to have images shown faster.

The images are created by JavaScript, therefore search engines cannot see them. There is no point in adding alt text. On the other hand, labels will help.

I love the way the “spacing” on the slideshow makes it look on displays that get smaller than a 16:9 ratio on the images. How to I keep “cover” for the fullscreen images to show on 16:9, but when the width or height exceeds or falls below that ratio, it uses the “spacing” method with white space around image to keep from cropping on smaller screens? I can almost “see” the solution in the code below, but just falling short.

many thanks

switch ($slide.data('cover')) { case 'cover': $(this).fillImageBackground({}, true); break; case 'spacing': var $slideshowThumbs = $('.slideshow__thumbs'); $(this).fillImageBackground({ top: function() { return parseInt($slideshowThumbs.css('padding-top'), 10); }, right: function() { return parseInt($slideshowThumbs.css('padding-top'), 10); }, left: function() { return parseInt($slideshowThumbs.css('padding-top'), 10); }, bottom: function() { return $slideshowThumbs.outerHeight(); } });

nevermind i found a workaround. :) thanks again!

I have the fullscreen slider working great on >1/1 ratios. The only trouble I’m running into is with the Kindle Fire 7” aspect ratio 1.5 – 1280×800.

1) it’s not fullscreen and the slider isn’t working, images stacked on each other. 2) the header & nav do not have an opacity of 0.7

I’ve checked everywhere in the css to find the setting that would include this screen size, but everything appears configured properly.

it does the same thing for horizontal phones, but if there is no easy fix for that, I’m okay with it.

screenshot attached http://alleystoeden.org/testing3/kindlefire7inch.jpg

And, once again, thanks for all your help. This is a huge accomplishment for me to have this working for my friend (who is a photographer and is picky about how her images display). :)

I see. This happens probably due to the responsiveness of the website. Different layout is used for smaller screens (less than 768px wide). You should be able to disable this by deleting lines 2207 - 2212 in css/style.css (the @media {} block).

There might be more modifications needed, it’s quite hard to predict what could go wrong.

loving your template.


would love to have the header be a white opacity (i’ve already set it to 0.6 in the style.css page)

however, the fullscreen image doesn’t show behind the header and footer.

what would i change in either the js file or the css file so that the header and footer have an opacity to let the fullscreen image show through?

thanks so much. trying to make it look the same as the wordpress theme which is controlling the blog portion of the site.

again, wonderful theme to work with. code is so clean and straightforward that customizations have been a breeze.


This is a feature to prevent unwanted cropping of the photos, but can be easily disabled. Take a look into js/script.js file on lines 549-550.

You just need to replace cache.headerHeight, cache.portfolioTitleHeight and cache.footerHeight with 0.

that worked brilliantly! Thanks so much. :)

What a nice theme!! thanks!!

One small question:

Why I couldn’t put links ( text) in the portfolio-item.html ??

I can’t click on them. For example on http://www.sigmaweb.es/desarrollo/trident/boats/en/media on “see more”.



Works fine for me. With what browser, OS and resolution do experience this?

I already found the solution just after right you the ticket.

Thanks very much!

hi, i’m on the contact form where the input fields are and even though i’ve taken all the orange colors out of the white template, there is still an orange border around fields, when clicked, and button when clicked.

you can see it in action here: http://alleystoeden.org/testing3/contact-photographer-nina-sutherland.html
where do i send the screenshot? when you click in one of the field boxes there is an orange border. http://alleystoeden.org/testing3/contact-photographer-nina-sutherland.html

in chrome, the box turns orange when selected, in IE it appears as it should, in safari it appears blue when selected, and in firefox it appears as it should.

please let me know how to fix it in safari and chrome.

nevermind, i found the solution on google. you might want to have people add this code to the style.css page to fix the blue & orange highlighting in safari and chrome.

input:focus, select:focus, textarea:focus, button:focus { outline: none; }

Hi, good template but in the page with a small div is shown the right scroll bar like here:


I’ve tried to delete the div with text to have only the backgroun but the scroll bar is still visible.

Help me please. Luca


What browser and operating system do you use?

SO Windows. Browser IE 9 ,Chrome and Safari

You can try this code:

.cover-screen.large-break {
overflow: hidden;

You need to add this at the end of css/style.css file. This might, however, break other pages where the scrolling is needed.

Great Template ! In the slideshow, I should know the differents word I can write after data-cover=”?” and what they mean for the display of the image. I have found “spacing” and “cover”..... What are the difference ? Also in the slideshow, can I stop a slideshow ? I have foud the next and before, but not the stop and continue… Your “help” is a quite short….. Sorry for my poor english, I’m french ! Thank you.

Oh, sorry, looks like I forgot to include this into the documentation.

Yes, there is only “cover” and “spacing”.

“cover” stretches the image accross the background (and potentially crops the image, see http://showlight.equiet.sk/white/slideshow-bullets.html ).

“spacing” preserves the aspect ratio and makes a “room” around the image (see http://showlight.equiet.sk/white/slideshow-spacing.html ). Notice the black background.

Unfortunately there is no way to stop the slideshow.

great theme, really !

is there an easy way to have the menu on the bottom ?


Sorry, this would require quite a lot of coding.

Considering this theme, but have a few pre-purchase questions. I will have a lot of images in many categories (nested). So something like this:

Category A Sub A Sub A Sub A Sub-Sub A Category B Sub B Sub B Sub-sub B Sub B And so forth.

Is this doable with this theme so that you can have a Category A representative Image and then drill down to the subs after that? Is there a way to do this by Folder? Where you just create the Folders in the category structure you want and then the structure pulls in image accordingly? That way if you just add an image to a folder it will now be part of the site and same goes if you remove an image from the folder.

Thank you and nice work, btw.


Since this is a HTML template, this is possible. However, it cannot be done automatically. You would have to do all the linking by yourself.


Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey