Don't know how to add javascript to website :/

Sure!

I already own this plugin.

All the info is here: https://livicons.com/examples#cbp=ajax/step-boxes-02.html?rev=031

But I have added the code for the html, css, and js below.

HTML: <!– Step box 02 –>
<div class=”container”>
<div class=”row”>
<div class=”step-box-02 step1 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Research & Planning</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step1;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: lab.svg;
style: solid;
size: 100%;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step1;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
<div class=”step-box-02 step2 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Design & Develop</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step2;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: pencil.svg;
style: solid;
size: 100%;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step2;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
<div class=”step-box-02 step3 col-sm-4 col-xs-12″>
<h4 class=”text-center text-uppercase”>Test & Deliver</h4>
<div class=”line”>
<div class=”morph-icon”>
<div class=”livicon-evo” data-options=”
name: morph-square2-triangle2.svg;
style: solid;
solidColor: #0097A7;
size: 100%;
strokeWidth: 0;
colorsOnHover: darker;
morphState: end;
eventOn: .step-box-02.step3;
duration: 0.2
“></div>
</div>
<div class=”straight-icon”>
<div class=”livicon-evo” data-options=”
name: rocket.svg;
style: solid;
size: 100%;
rotate: 45;
solidColor: #fff;
solidColorBg: #0097A7;
eventOn: .step-box-02.step3;
delay: 0.25
“></div>
</div>
</div>
<p class=”text-center”>Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English.</p>
</div>
</div>
</div>

CSS:

/************ Step box 02 ************/
.step-box-02 {
padding: 0!important;
}
.step-box-02 h4 {
color: #263238;
font-size: 16px;
}
.step-box-02 p {
padding: 0 15px 0!important;
color: #78909C;
}
.step-box-02.step1:first-child .line {
background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(40%, #B2DFDB));
background: -webkit-linear-gradient(left, transparent 0%, #B2DFDB 40%);
background: linear-gradient(to right, transparent 0%, #B2DFDB 40%);
}
.step-box-02.step3:last-child .line {
background: -webkit-gradient(linear, left top, right top, color-stop(60%,#B2DFDB), color-stop(100%,transparent));
background: -webkit-linear-gradient(left, #B2DFDB 60%, transparent 100%);
background: linear-gradient(to right, #B2DFDB 60%,transparent 100%);
}
.step-box-02 .line {
position: relative;
height: 1px;
width: 100%;
margin-left: -10px;
background: #B2DFDB;
margin: 55px 0;
}
.step-box-02 .morph-icon {
width: 30px;
height: 30px;
position: absolute;
top: -15px;
left: 50%;
margin-left: -15px;
}
.step-box-02 .straight-icon {
width: 0px;
height: 0px;
position: absolute;
top: 0px;
left: 50%;
margin-left: 0px;
}
@media (max-width: 767px) {
.step-box-02 {
margin-top: 60px;
}
}

JAVASCRIPT:

//Step Box 02 additional animations
$(document).ready(function () {
$(‘.step-box-02′).hover(
function() {
TweenLite.to($(this).find(“.morph-icon”), 0.15, {width:’90px’, height:’90px’, top: ‘-45px’, marginLeft: ‘-45px’, ease: Power0.easeNone});
TweenLite.to($(this).find(“.straight-icon”), 0.15, {width:’30px’, height:’30px’, top: ‘-15px’, marginLeft: ‘-15px’, ease: Power0.easeNone});
},
function() {
TweenLite.to($(this).find(“.morph-icon”), 0.15, {width:’30px’, height:’30px’, top: ‘-15px’, marginLeft: ‘-15px’, ease: Power0.easeNone});
TweenLite.to($(this).find(“.straight-icon”), 0.15, {width:’0px’, height:’0px’, top: ‘0px’, marginLeft: ‘0px’, ease: Power0.easeNone});
}
);
});

no problem.

i already have a functions.php folder in my child theme.

it includes stuff like:

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/

function ms_image_editor_default_to_gd( $editors ) {
$gd_editor = ‘WP_Image_Editor_GD’;
$editors = array_diff( $editors, array( $gd_editor ) );
array_unshift( $editors, $gd_editor );
return $editors;
}

and keeps going…

is that the same thing?

i’m sorry for not understanding fully :/

hey sorry guys. i swear this is the last time i’ll bother before i drop it.

any chance you could still help me out?

please :)

Great! In private message find more info

weird. it won’t let me update the enfold version. keeps saying:
Theme Updates

No Updates available. You are running the latest version! (3.4.7)

Check Manually

i ran it on my child theme.

how can i update the theme without making the original enfold theme go live?

i also have the google api but i don’t have the google services option available to me anywhere on the menu in the theme options

hey i am so sorry for the delay.

i am using the video you sent me and trying to find every possible solution in Google about replacing the current enfold with new enfold on Notepad ++

the only time i thought i got it to work, the site crashed due to errors in the function.php file.

any recommendations?>

yes! i did the automatic API and it didn’t update. so I had to go through FTP and notepad ++ is impossible for me,.

i also tried downloading the plugin but it wasn’t compatible with my current wp version.

I am such an idiot. i was entering the api and stuff in my child theme theme updates, not the enfold parent theme.

i just realized that. i updated the missing info and will wait a few hours until hopefully update is made. if you don’t hear back from me about it, then good news. but i’ll come back still regarding the previous issue with implementing js in my site.

Thanks for the best support ever.

The whole point is i still can’t get the JS to work. I put the links and code above as to what it should look like, etc. can you please help me with that?