93 comments

caustin89 PURCHASED
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!!
caustin89 PURCHASED
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!!
caustin89 PURCHASED
Okay perfect! Thanks! It would obviously be ideal to display more than one project in the portfolio to the reader.
caustin89 PURCHASED
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.
caustin89 PURCHASED
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!
Matthew55 PURCHASED
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!
caustin89 PURCHASED
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!
caustin89 PURCHASED
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?
caustin89 PURCHASED
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!
newton777 PURCHASED
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!
forma2ni PURCHASED
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!
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!
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!
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!
Hi. great theme. i am getting a lot of errors via the retina.js plugin. it looks like unless there are @2x versions of every image then i get an error. also, what is more confusing, i am not getting the retina.js plugin to show the @2x version when in the modal. just shows 0px by 0px. please let em know how to resolve this.
The retina.js plugin will rely on a @2x version of an image typically. In the next update to this theme however I'll be removing the retina.js plugin in favor of using SVG images where I can.

In the meantime though, I am not sure what is happening with the images within the modals, but the errors are coming from a 404 error of the plugin not being able to find a 2x version of an image. If you don't wish to use the plugin I would just disable the usage of the plugin since I won't be using it in the Bootstrap 4 version of this theme.

Hopefully this helps! Thanks for the comment!
i removed it, and am just going to load the @2x images and downsample them in the img tag. for now that is good enough
Yes, that is pretty much what I'll be doing in the next build. Adding a perfect responsive image solution is something that is great for speed optimization and things like that, but it's not super necessary. Thanks for the info!
another question - thanks:
i am trying to get the navbar to collapse at a higher breakpoint, like at the "sm" breakpoint (ipad). the way it works with 768 is great, but when i have applied some code from people who post a solution to get it to break also for "sm" it does not work so well. for instance this solution https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint. anything you can advise to get the mobile menu version to work on an ipad size screen?
This is a bit tricky to do. In order to do this you would have to play with Bootstrap's default breakpoints which is a bit tough, but can be done. On WrapBootstrap, the themes aren't allowed to edit the Bootstrap code, but what you can do is go to the Bootstrap website and go to their customizer and change the media query breakpoints.

From there, you would need to download that custom Bootstrap CSS file and then apply it to your theme.

You can see the Bootstrap customizer here: http://getbootstrap.com/customize/#media-queries-breakpoints
ok thanks for the helpful info - i'll look into it. i am not sure that many people really use that screensize (for an ipad). i am not sure how popular ipads are - since mobile phones are pretty big
how can i increase the carousel speed. i tried adding a faster speed the way bootstrap normally handles this with data-interval="*". but it doesn't seem to affect the speed of the text transitions. thanks
It depends on what sample page you're starting with. Some sample pages have text that's attached to the image (so the text and image all counts as one slide) and some sample pages have text that's not attached to an image (where the background image remains the same, but the text slides from slide to slide). Try editing the carousel that is being targeted in the HTML of the sample page you're using, it may be that you're editing the interval on the wrong carousel.
Hi there. Love this theme and hope it's updated soon!
I have tested the contact form in several browsers and they are all cutting off the text content of the fields. That is, as I enter text in the Name and Email Address fields, the bottom half of the letters are missing. The words need moving up! What's the best way to fix this please?
I'll take a look at this with the next update. The floating headers on the contact form seem to be working as intended. Do you have an example I could see?

There will be a big Bootstrap 4 update for this theme soon!

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 or sign up to make a purchase

$10
1163Purchases

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 Safari
Uses Less:Yes
Uses Sass:No
Categories:
Tags: agency, app, flat, landing page, one page, parallax, photographer, portfolio, video
Item#:WB0317BRF
Released:3 years ago
Updated:2 years ago
Sold exclusively on WrapBootstrap
StartBootstrap

StartBootstrap

Signed up 4 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 Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

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