82 comments

So I noticed an issue with the Portfolio Section that I am really hoping can be clarified.

If I want to make the third image in the portfolio have it's own modal, we make the necessary changes to the id and href of "#portfolio-modal-3"

However, if you copy and paste the current Image/Text Standard Portfolio to create another modal.. Only the Modal that is listed above the others will display images.

This is very hard to explain, but I am having lots of trouble. I guess the best way for you to understand would be to do the following:
- Make two separate Modals in the portfolio for Image/Text projects. Not one Image/Text and one Video. If both portfolio's display their proper images when clicked upon, I would really like to know how. I have tried everything (I can think of).

Otherwise, happy customer. Thanks!!
http://caustin.ca/

This is my page right now. I didn't want to make it live yet, as it is incomplete.. but it'll make things easier. Both the first and second portfolio items are coded the same way (except for proper id/href). If you load the first modal, the images and description pop up. When you click the second image, only the description pops up.

I've tested this on other "sample pages" such as sample-03-full-image-slider.html and they have the same issue. Thanks again.
I think this has something to do with the content in the modals being an owl carousel defined as an ID rather than a class. I will check your code and get back to you with this fix because it's not really a bug with the template but it limits the functionality a bit and it's something that I would want to fix in the files to benefit everyone! Thanks for the clarification here!!
Okay perfect! Thanks! It would obviously be ideal to display more than one project in the portfolio to the reader.
Another Question: What file gives the full header the "grainy" effect, or however we should describe it. When the site is live, it does not have the same effect on the picture. Maybe I'm missing something?
There is an overlay that is being applied and maybe that file didn't get deployed or something? I would check to make sure that the overlay texture is on the server.
Yea that's what I assumed, but I thought I uploaded all files to the server. Please let me know what file I should be using to add it. Thanks!
It is an image in the img directory called diagonal-noise.png. Hopefully this resolves your issue!
I have a question related to social media icons (button). Is there any way, how can I make working - after clicking on this social media button on website make a connection to my facebook profile, google profile and so on?
Thanks!
Of course! You just need to copy the URL on your profile and paste it into the href attribute (which currently says href="#" --- tip: use target="_blank" to have your profile load in a new window, rather than moving from your webpage.

It should look something like this:

<a target="_blank" href="https://www.facebook.com/yourfacebookurl" class="btn btn-social-light btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
Thanks for answering this one, this is correct!
I am still in need of an answer - so I'll just pose it again. Thanks for taking the time to answer it!

So I noticed an issue with the Portfolio Section that I am really hoping can be clarified.

If I want to make the third image in the portfolio have it's own modal, we make the necessary changes to the id and href of "#portfolio-modal-3"

However, if you copy and paste the current Image/Text Standard Portfolio to create another modal.. Only the Modal that is listed above the others will display images.

This is very hard to explain, but I am having lots of trouble. I guess the best way for you to understand would be to do the following:
- Make two separate Modals in the portfolio for Image/Text projects. Not one Image/Text and one Video. If both portfolio's display their proper images when clicked upon, I would really like to know how. I have tried everything (I can think of).

http://caustin.ca/

This is my page right now. I didn't want to make it live yet, as it is incomplete.. but it'll make things easier. Both the first and second portfolio items are coded the same way (except for proper id/href). If you load the first modal, the images and description pop up. When you click the second image, only the description pops up.

I've tested this on other "sample pages" such as sample-03-full-image-slider.html and they have the same issue. Thanks again.

Also:
Another Question: What file gives the full header the "grainy" effect, or however we should describe it. When the site is live, it does not have the same effect on the picture. Maybe I'm missing something?
Edit: I've solved the "grainy" effect issue. Other issues are still in need of answering. Thanks.
A past fix to the theme should have resolved this and it looks like you have your portfolio working. Sorry for the delay on this comment by the way.

The issue was that it was loading the owl carousel sliders using an ID rather than a class, so subsequent instances of the slider using the ID were not loading. When the ID's were changed to a class in the jQuery the problem should be solved.
Hi I purchased and have been using your Spectrum (parallax) theme at http://classicnashvilleroadshow.com/ and I just noticed the video (full screen youtube at the top) does not seem to work in IE on Windows 10. Is there something I can do?
I'll need to test this out. Make sure your video size is small enough to load rather quickly. Other than that I will need to do some testing to see what the issue is. Thanks!
Hi there.
In your standard code the 'diagonal-noise.png' overlay is not applied to mobile phone screens, but I want it to.
I've found the entry in CSS and changed it from display:none so that it shows up, but now on small screens the height is wrong. That is, the height of the overlay does not match the height of the image behind it.
Can you advise what I need to change to make it match the image size please?
Many thanks
You can try to mess with the sizing and positioning of the overlay to try to make it cover the whole div rather than 100% of the screen height. I would start there. Hopefully this helps!
Hi,

I would like to create a few full image pallax sections like the header section with the full image pallax.

How would I go about doing that?

Kind Regards
Newton
You can use the built-in parallax call to action sections for this if you're up for a little bit of customization. I'd take one of those sections and set the min-height to 100% in the CSS and you should be on your way!
Hi,

how to implement a captcha in the contact form ?

Kind Regards
Denis
It should be more or less straightforward, just follow the documentation for the captcha you're using and then go from there. You may need to format the captcha box slightly if you want it to match the design of the form, but you should be able to just add it according to the captcha docs instructions.
Hi,

I can't get the Carousel portfolio option to work. I have copied the code (from the documentation) into my index.html page and changed the path to the images, but they don't carousel - they just appear one below the other.

Is there something I am missing in order for the js to work?

Barry
Hello, sorry, but i need change the color of the fonts this class

<h1 class="brand-heading">
La <span class="text-primary">Agencia</span><br> <span class="text-primary">INTERNET NO PERDONA</span>

i change the color in css carpet? how?

Please
Thks!
You will need to override the .text-primary class with your own custom CSS. Or you can go into the Spectrum CSS for the color scheme you are using and change it there if you'd like. If you would prefer to keep the .text-primary class in place, you can replace it with a new class and just add that in your custom CSS. Hopefully this helps!
RoryG PURCHASED
Hi, I've been using your free Creative theme for a while but decided to give Spectrum a go and so far I love it! I've nearly got all my content ported over and recreated all my modals to match the theme. One issue I'm having is the display of the image in a parallax aside section. On the desktop it looks great (but see below), but on the iPad it's zoomed right in and blurred. I know there's no parallax on IOS but i'd expect to see the full image rather than a tiny bit of it blurred beyond recognition - any ideas?

The other issue I'm having with parallax on the desktop is the images rolling over so you see the join between the top and bottom of the image. If I turn the stellar-background-ratio to 0 it displays the image correctly and the viewport scrolls over it as if it was a fixed background, but obviously no parallax! Is there a way round this? I've tried various image sizes, and although it now works great in one of the aside sections the other always rolls over the top/bottom if the image.

Many thanks for a great theme / template set!

Cheers,

Rory
Regarding the background image, if the content on the mobile device is long, then the background will stretch to the whole entire section which will cause this zoomed in blurry effect. Regarding the parallax issue I'd need to see the actual bug in effect so I can more closely identify what is going on. Thanks for the comment, feel free to drop an email by so we can explore that parallax issue more!
apac300 PURCHASED
Hello!

Awesome theme! This inquiry is about the portfolio grid modals from the grid section. I read the comments and I think someone else asked about it too, but I'm still confused on fixing it. Basically, the problem is that referenced images/videos don't show up on additional modals. I'm currently using the given "portfolio modal 1" because it has the carousel feature. For some reason images/videos only show up when I reference "portfolio modal 1." But when I try to create the exact same thing and name is something like "portfolio modal 3" everything still works, but no images/videos show up inside the modal. Please help me fix this I just want to add more portfolios to fill out my grid.

This next inquiry is about hovering over each item in the portfolio grid. The standard CSS gives a dark gray background color with a white magnifying glass. If you look at my link, you can see that I changed the background color to a dark blue and changed the magnifying glass to actual text. I was wondering if there was a way to keep the background slightly opaque with the text being completely solid. And is there a way to change the font or is that just something I'll have to do inside the HTML?

Please help me out thanks!!

Link:
http://theofficialhandson.altervista.org/dist/creative.html
For the portfolio fix you'll need to change the code a little bit. Within the carousel inside of each modal you'll see this: <div id="project-details-carousel" class="owl-carousel owl-theme">. Change that to this: <div class="project-details-carousel owl-carousel owl-theme">.

After that, go into your spectrum.js file and change this on line 85: $("#project-details-carousel").owlCarousel({ to this: $(".project-details-carousel").owlCarousel({

That should do the trick. It's something I'll need to update in the main theme.

Regarding changing the font, you would have to use CSS to specifically target that class and change it like that. Hopefully this helps!
apac300 PURCHASED
Thank you so much for the reply! I got the images to work on other portfolios. One more thing though. Within the portfolio modals, how can I change all the characters (text & lines) from white to black? I noticed that the text would be black in the main template (untouched), but when I tried importing it to my website it turned white for some reason. I also noticed that when I would try to highlight text on the webpage itself, the highlight color would be aqua. How could I change this? Thanks again!
You can change this with some custom CSS. You can create a class and set the color and go from there!
apac300 PURCHASED
Just following up on my previous comment. I got the images to work on other portfolios. One more thing though. Within the portfolio modals, how can I change all the characters (text & lines) from white to black? I noticed that the text would be black in the main template (untouched), but when I tried importing it to my website it turned white for some reason. I also noticed that when I would try to highlight text on the webpage itself, the highlight color would be aqua. How could I change this? Thanks again!
Hi there I just commented above, but it would involve making a custom CSS class and going from there!
RoryG PURCHASED
Hi, our website is uploaded and nearly ready to go live. I have one remaining issue, on IOS and mobile devices I would like to use different fixed images in the parallax aside sections. At the moment it displays the image as if it was the full page background so it's fully zoomed in. I've seen other Bootstrap sites that do this but not sure where I need to change the CSS or Javascript to enable this. You can have a look at the site here, try it on a desktop and an IOS device to see what I mean:

http://www.shetland-flyer.media/index1.html
Yes this issue seems to be coming from the background position feature on iOS devices. I think this is an iOS bug, but a bug with the theme regardless. A fix I've used in the past is disabling the parallax functionality on the mobile sizes by setting the background position to be fixed for the background images in those sections. What's happening is that the page is rendering the image at a certain size, but it's not scaling it down, and since its iOS (retina devices) you're getting the zoomed in blurry look on the image.

So try setting the background image to fixed on mobile. I will be working on my end to get this issue fixed as well for the next build to this theme.
RoryG PURCHASED
I fixed the issue above by creating a separate spectrum stylesheet for mobile devices then using the following javascript to inject the link into the head element. Now the parallax works exactly how I want it on desktop and the images show up as correctly scaled in the aside containers on mobiles and tablets. Next stage is to strip out some of the media queries in the desktop spectrum.css to enable features to work on smaller window sizes.

For this to work just create a separate stylesheet for mobile devices with the settings you need, then remove the reference to spectrum.css in the head element.

<!-- Load Spectrum CSS depending on device type -->
<script>
(function() {
var lnk, head, isMobile;

isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};

if (isMobile.any()) {
head = document.getElementsByTagName('head')[0] || document.body || document.documentElement;

lnk= document.createElement('link');
lnk.rel = "stylesheet";
lnk.href = "assets/css/spectrum-m.css";
head.appendChild(lnk);
}
else {
head = document.getElementsByTagName('head')[0] || document.body || document.documentElement;
lnk= document.createElement('link');
lnk.rel = "stylesheet";
lnk.href = "assets/css/spectrum.css";
head.appendChild(lnk);
}

})();
</script>

I was pulling my hair out on this and tried various ways to differentiate mobile from desktop. @media queries are great and work on small devices like phones but the iPad was a challenge!

Cheers, and thanks for a great theme! My site is now live - http://www.shetland-flyer.media
Whoops I was just going in order here answering posts. Thanks for sharing this code! I may just implement this into the main template in the next build. Thanks for sharing this fix!

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in to add this purchase to your account

$10
That's about 4 cups of coffee
1029Purchases

Licenses: Details »

Single application $10
Version:1.2.0
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Opera
  • Latest Safari
Uses Less:Yes
Uses Sass:No
Categories:
Tags: agency, app, flat, landing page, one page, parallax, photographer, portfolio, video
Item#:WB0317BRF
Released:2 years ago
Updated:2 years ago
Sold exclusively on WrapBootstrap
StartBootstrap

StartBootstrap

Signed up 3 years ago

Need an admin theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Safari
  • Latest Firefox
  • Internet Explorer 8/9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: