79 comments found.
Hi,
is it possible to integrate a youtube video in a full page showcase popup?
Regards, Maks
Hi,
of course, it is possible to integrate a youtube embed.
But you may have to add a little bit of CSS to make it full width.
Kind regards,
Lara
Thanks for the quick reply!
could you please tell me how to do that? I started with the showcase-popup-full-page-video page and than wanted to change the
<!- INTRO VIDEO ->
<video autoplay poster="assets/videos/1.jpg" class="intro-video" loop><source src="assets/videos/1.mp4" type="video/mp4" /></video>
<!- /INTRO VIDEO ->code to link/embed to my Youtube video. But I just can’t figure it out how to.
Maks
OK, please do the following:
1. Replace the container Intro element with everything in it with the following code.
<!-- CONTAINER INTRO -->
<div class="container-intro" style="padding-bottom:56%;position:relative;float:none;width:100%;height: 0;">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="https://www.youtube.com/embed/o1BiFTk5Acw?rel=0&controls=0&loop=1&autoplay=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<!-- /CONTAINER INTRO -->
2. Replace the URL id “o1BiFTk5Acw” with your youtube video URL id.
Additionally, you can modify the URL parameters with the following guide.
https://developers.google.com/youtube/player_parametersKind regards,
Lara
AMAZING! this works like a charm and the youtube parameters guide allso helps alot, I love the autoplay feature!
I managed it somehow, but your solution is way cleaner! Thank you very much! And we love the theme!
Maks
Glad to hear.
It would be awesome if you would leave a review.
And if you need help with something else you can contact us at any time.
Kind regards,
Lara
I did!
Yes, an other thing that I would love to have is on the showcase popup. I’d like the grey / faded area around the popup to have the same close feature as the back / close arrow. Is it possible?
Thank You! Maks
Thank you very much.
Of course, it is possible.
Please do the following:
1. Open your assets/js/scripts.js file.
2. Jump to section “2. PORTFOLIO”.
3. Locate the following code block.
// FUNCTION SHOW POPUP
function showPopupIntro() {
setTimeout(function(){
var windowHeight = $(window).height(),
introHeight = $(".popup .container-intro").outerHeight(),
marginValue =(windowHeight - introHeight) / 2;
$(".popup").addClass("active");
if ( windowHeight >= introHeight) {
$(".popup.active").css("margin-top",marginValue).css("margin-bottom",marginValue/61.8*38.2);
}
}, 300);
}
4. Overwrite the code block with the following code.
// FUNCTION SHOW POPUP
function showPopupIntro() {
setTimeout(function(){
var windowHeight = $(window).height(),
introHeight = $(".popup .container-intro").outerHeight(),
marginValue =(windowHeight - introHeight) / 2;
$(".popup").addClass("active");
$('.cbp-popup-singlePage,.cbp-popup-singlePage .cbp-popup-content').attr('data-action', 'close');
if ( windowHeight >= introHeight) {
$(".popup.active").css("margin-top",marginValue).css("margin-bottom",marginValue/61.8*38.2);
}
}, 300);
}
5. That’s it.
Please notice that this will only affect the showcase and not the lightbox.
Kind regards,
Lara
hi,
Is it possible to make the slider in the showcase slide automatically?
Kind regards, Karin
Hi,
at the moment this is not possible without modifying the cube portfolio plugin source files.
But if you want I can send you the modified version of the cube portfolio plugin.
Just contact me via the contact author button on the following page.
https://themeforest.net/item/legendary-one-page-parallax-html-template/17976316/supportKind regards,
Lara
how would I convert this into Word Press to be able to use it on my site?
Hi,
you can convert it like any other html template.
But Legendary was not built for WordPress, therefore it will take longer to convert it especially if you are not familiar with the template to theme conversion or WordPress development in general.
Kind regards,
Lara
ok so can you convert it for me? as you are the person that made it ? if so how much?
and if you do you can start to sell this Templet in WP on here also
I’m sorry we are currently unavailable for freelance.
There will be a WordPress version of Legendary in the future. But we the development will not start before Q2 2017
Kind regards,
Lara
Another little question; Can i change the position of the div.col-md-4 ? Would like to put it a bit lower, or on the bottom of the picture that’s beneath . thnx
Hi,
of course, you can change the position of the grid div but make sure that you don’t break the grid system.
The div.col-md-4 is part of the bootstrap grid system. http://getbootstrap.com/css/#gridKind regards,
Lara
Hy, I have question: When the WEB page is resized to a mobile phone dimensions, is it possible to have the pictures of the main slider to be seen in full (resized but full)?Now there’s only a small part of the original picture to be seen..( I think the block-footer gets resized in full like i’d like to..)
Thank you!
Hi,
it would be possible to show the full image but you would have black bars at the top and bottom because the ratio of the screen and image is entirely different.
The footer has a completely different ratio, therefore the image will not be stretched to fit the screen ratio.
But if you still want the modification please let me know.
Kind regards,
Lara
Well, if it’s not to much of a hassle…please do so. My intention is to have at least the left part of the slider image to be seen Thank you
OK, I will guide you through.
But first please answer the following question for me.
Are you using image, slider or kenburns background?
Kind regards,
Lara
Slider
OK, please do the following:
1. Open your assets/js/hero.js file.
2. Jump to section /** 1. BACKGROUNDS and locate the following code block.
// SLIDER BACKGROUND FUNCTION
function sliderBackground() {
// INIT VEGAS SLIDESHOW PLUGIN
$(".bg-image").vegas({
slides: option_hero_background_slider_path,
transition: option_hero_background_slider_transition,
delay: option_hero_background_slider_delay,
transitionDuration: option_hero_background_slider_transitionDuration,
timer: false,
walk: function (index, slideSettings) { $("#cycle").cycle("next");}
});
}
3. Replace it with the following code block.
// SLIDER BACKGROUND FUNCTION
function sliderBackground() {
$(".bg-image").vegas({
slides: option_hero_background_slider_path,
transition: option_hero_background_slider_transition,
delay: option_hero_background_slider_delay,
transitionDuration: option_hero_background_slider_transitionDuration,
timer: false,
walk: function (index, slideSettings) { $("#cycle").cycle("next");}
});
if ( jQuery.browser.mobile ) {
$(".bg-image").vegas('options', 'cover', false);
}
}
4. That’s it.
Kind regards,
Lara
Hi! Saw you updated this awesome theme!
What is the best way to integrate this update with my current one wich was build with the first version?
Coen
Hi,
integrating the new update takes a little bit of work.
The first step would be to replace the full assets folder and config.js file.
Then you have to overwrite the <script> tags at the top and the bottom of your index HTML file with the new ones you find in the new index file.
Additionally, you could integrate the contact anti-spam system but this is only a must have if you get spam via the form.
If you need advanced guidance how to integrate the new files and anti-spam system you can contact me via the contact author button on the following page.
https://themeforest.net/item/legendary-one-page-parallax-html-template/17976316/supportKind regards,
Lara
Hi Avanzare. Amazing template! But I have a question : I want to integrate Google Map but it does not work. I created an API key, I registered my website, I wrote the right coordinates, but the map does not work. Would you have more specific information on how to proceed than just “you need a Google Maps API key to use the Google map.”? Google tutorial is losing myself : https://developers.google.com/maps/documentation/javascript/ Thank you so much
Hi,
after the next update you will be able to insert your API key inside your config.js file but for now please do the following.
Jump to the bottom of your chosen index HTML file and find the following script tag.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
Replace it with the following.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY-HERE"></script>
Then you just have to replace YOUR-API-KEY-HERE with your API key.
That’s it.
https://developers.google.com/maps/documentation/javascript/get-api-keyKind regards,
Lara
It works like a charm. Thank you, great support.
Hi, where can I change the color of the footer block? thnx
Hi,
You find the CSS used for the footer section in your assets/css/blocks.css file under section ”/** 9. FOOTER”
Kind regards,
Avanzare
I got that. But could you be more specific? Only colors i’ve found defined are in .block-footer-1 .scroll-top and .block-footer-1 .scroll-top-inner , Don’t see the color of the footer block :-/
If you want to use a custom color for your footer block you could add the following code in the ”/** 9. FOOTER” section.
.block-footer-1
{
background: red !important;
}
Hi , Is it possible to use the ‘Slider Revolution jQuery Visual Editor Addon’ with the legendary template?
Hi,
Of course, it should work without problems.
Kind regards,
Avanzare
After purchasing ‘Slider Revolution jQuery Visual Editor Addon’, it now looks like it cannot be used with a slider revolution plugin included with a theme, you need to be a “direct buyer”.
No, you don’t have to be a direct buyer, you just have export via the HTML method. Then you just have to overwrite the current markup in HTML.
Please notice that you also have to overwrite the JS and CSS part.
Please contact me via the contact form on my profile if you need guidance where you have to overwrite what.
https://www.themepunch.com/revslider-se-doc/add-to-web-page/#exportThank you for the fast response.
I’m happy to know I can still use the addon without buying anything else.
If I have any questions or problems with exporting or overwriting I’ll contact you.
Thank you very much.
I still do not get the visual editor to work, it keeps saying: ‘Slider revolution jQuery Plugin NOT installed. This is required in order to use the Visual Editor Addon.’ To install Slider revolution jQuery Plugin you need a purchase code or the addon archive file ‘visual-editor-extension.zip’. As long as it’s not installed, I cannot start a new slide and cannot use the visual editor. Am I missing something?
Hi,
could you please send me a link to your visual editor and the login data that I can locate the problem?
Please send me the data via the contact author form.
Kind regards,
Lara
Hy, I’ve deleted 2 icons from the WEB page section “Services” . So all the icons went LEFT. Is there a way to put them all (there’s only 3 of them) in CENTER position? Thank you
Hi, you have to change the floating from left to none for your list items.
How to do it:
1. Open your assets/css/block.css file.
2. Jump to section “3. SERVICE”
3. Change:
.block-service-1 .tab-navigation li
{
display: inline-block;
float: left;
width: 20%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
border: 0;
}
to:
.block-service-1 .tab-navigation li
{
display: inline-block;
float: none;
width: 20%;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
border: 0;
}
That’s it.
Kind regards,
Avanzare
Tried that, it didn’t change the position of the icons. Instead of NONE I tried putting RIGHT, but then my first icon that was on the far left side went to the far right side.
Ok, please send me a link from your website via the contact author button on the following page. https://themeforest.net/item/gravity-coming-soon-under-construction/8875822/support
the site is still inactive. Will do when I put it up and working
OK, I found the problem. Please do the following.
Change the following ( same section ):
.block-service-1 .tab-navigation
{
width: 100%;
margin: 0;
padding: 60px 0 80px;
positon: absolute;
}
to:
.block-service-1 .tab-navigation
{
width: 100%;
margin: 0;
text-align: center;
padding: 60px 0 80px;
positon: absolute;
}
That’s it! Thanks alot
hello i want to change file direction to Right To Left
Hi,
Legendary is not supporting RTL right out of the box and at the moment there are no plans to implement this feature.
But you could implement RTL by your own.
Kind regards,
Avanzare
i tried but i couldn’t can you help me to do it ?
I’m sorry. This would be customization and is not part of the support.
But you could start with the following link and then you just have to edit the CSS part.
http://stackoverflow.com/questions/41259235/how-to-convert-html-template-to-rtl-formatin what file i paste this code ?
You can not copy and paste the full code.Just the html tag. You have to edit in your index html file.
i replaced <html lang=”en” in index.html to <html lang=”en” dir=”rtl”> but direction has not changed excuse me for the inconvenience because i am beginner with this
thank you
It should change and everything should look a little bit strange because Legendary is not RTL ready.
Please make sure you selected the right index file and saved it correctly.
hello , i still cannot use the template because it doesn’t support my language ….. i would like Freelance work to make it RTL SUPPORTIVE
thank you
Hi,
did you have tried the StackOverflow guide?
For freelancing request please contact us via the form on the following page.
https://themeforest.net/user/avanzareKind regards,
Lara
Hy, where can I find new Icons like “ti-thought” ?
Hi,
you find the full list of icons here.
https://themify.me/themify-icons
Kind regards,
Avanzare
Hy, nice theme here. I have a question: The black alpha color over the pictures is a bit too black for me. Where can I lower the alpha? Thanky
Hi, thank you for your feedback.
Just do the following to reduce the alpha:
1. Open up your assets/css/layout.css file.2. Jump to section “4. FOUNDATION”.
3. Locate the following css block
.bg-overlay {
position: absolute !important;
top: 0;
width: 100%;
height: 100%;
opacity: .5;
background: rgba(0,0,0,1.00);
}
4. Change the opacity to your desire.Kind regards,
Avanzare
Congratulations! Excellent template, GLWS 
Thank you very much for your feedback.
Nice work GLWS
Thank you very much.
Congratulations! Excellent Work, GLWS
Thank you very much.
Nice work GLWS
Thank you very much!
Kudos! GLWS – DCSF
Thank you very much!
