Customising the Creative Template shortcodes/Video

Beautiful and responsive WordPress theme with amazing parallax effect.
Post a reply
GK User
Sun Apr 13, 2014 2:40 pm
Hello,

I have been using the Creative Template to build a webste in wordpress. Its really great and Im getting the hang of it. The site is located here http://ec2-54-206-121-99.ap-southeast-2 ... onaws.com/

In the second section that holds the video, I am looking to replace the actual video... and instead build a play button that will open a <div> that contains an iFrame vimeo link. So essentially the video will pop up in a box.

I have built the functionality in custom HTML/CSS/JQuery in a separate file. I am struggling to figure out how I can copy this working code into the Shortcodes or into the template files somehow...

Can someone shed some light on this?

If you would like to see a working version of what I want go to http://www.stacks.co and see the video play button.

I have also attached the file to this document. Its in a Dropbox so you can see the files and how they work. :D

https://www.dropbox.com/sh/1hb6ut8nf31dm9z/xERkrtBJ8I

Kind Regards

Lenny Ercoli
User avatar
Fresh Boarder
GK User
Sun Apr 13, 2014 2:52 pm
I would suggest to use css/override.css for css, js/gk.scripts.js and for html you can use custom html module, just turn off tinyMCE editor (change it to editor- none).
All files are relative to template folder.
User avatar
Moderator
GK User
Sun Apr 13, 2014 3:05 pm
Thanks for your reply Cyberek..

Ok, thats clear for the code CSS/JQuery.

Im just not sure what you mean for the HTML ... Can you please highlight the steps to turn off tinyMCE im sort of new to this and need a little more instructions.

Once ive turned off the TinyMCE can I then paste the HTML directly into the Shortcode area? And, would I be copying all the <HTML> <HEADER> </HEADER<BODY></BODY></HTML> ? Or only a certain part...

Thanks in advance
User avatar
Fresh Boarder
GK User
Mon Apr 14, 2014 6:23 am
Hi I have had a go at what Cyberek said to do.

I have done the following steps:

Step 1: Copied the CSS into 'overide.css' and uploaded to the server
Step 2: Copied 'jquery-1.8.3.min.js' into the js folder
Step 3: Went to Mainbody-top and pasted in my custom HTML into the Shortcodes
Step 4: Linked the style sheets/JQuery via url correctly

Result, i could see the play button on the screen, but it was static... So i couldn't click it which means something is broken

Can someone have a good look into the best way I can make this work? I have a deadlin on Thursday and this part must be done..

Kind Regards

Lenny
User avatar
Fresh Boarder
GK User
Mon Apr 14, 2014 7:25 pm
You don't need'jquery-1.8.3.min.js' as theme already loads jQuery.
Could You please post an url to your site where you were implementing this code?
User avatar
Moderator
GK User
Tue Apr 15, 2014 2:21 am
Hi Cyberek,

Please find the link to my website.

http://ec2-54-206-121-99.ap-southeast-2 ... onaws.com/

The area i want the video in is "Mainbody-Top"

I cant even get the video button to display now... :(

I will PM my Wordpress backend login details

Thanks

Lenny
User avatar
Fresh Boarder
GK User
Tue Apr 15, 2014 6:56 pm
What you did is completely wrong. You don't need to include override.css and gk.scripts.js inside your code - they are already implemented in site's header and footer. The way you implemented it is also incorrect as they are not in root of your site.

Also the code in gk.scripts.js:
Code: Select all
$(document).ready(function() {

                $('#play-button').hover(function() {
                    $('#play-button').removeClass("play-button-normal");
                    $('#play-button').addClass("play-button-over");
                }, function() {
                    $('#play-button').removeClass("play-button-over");
                    $('#play-button').addClass("play-button-normal");
                });

                $('#play-button').click(function() {
                    $('#play-button').hide();
                    $('#vimeoframe').show();
                    $('.cross-icon').show();
                });
               
                $('.cross-icon').click(function() {
                    $('#vimeoframe').hide();
                    $('.cross-icon').hide();
                    $('#play-button').show();
                });

                $(window).resize(function() {
                    var l = ($(window).width() - $('#vimeoframe').width())/2;
                    $('.cross-icon').css("top", $('#vimeoframe').css("top"));
                    $('.cross-icon').css("left", l + "px");
                }).resize();
            });


will not work as you need to use full jQuery name instead of it's $ shortcut.
User avatar
Moderator
GK User
Mon Apr 21, 2014 9:40 am
You have sent me data to your site, why is it so?
I can advice you what you are doing wrong, but anything above that is beyond our support, as we don't support 3rd party solutions.
If you are not sure what you are doing, try finding any WP developer and ask for (paid) help.
User avatar
Moderator
Post a reply
cron