-
Posts
-
Hello,
Long time Enfold user, so i typically do not ever need to contact support…the theme is so easy to understand. Honestly, it is perfect.
With that said, I have a unique request form a client. I created a html/.js based function/effect. I have explained in the private area (please keep private). I have described the effect and added the test page html for the effect. Basically, I need the same effect to happen in the header background. I use logic.js to create the effect.
I activated/created the header widget, I added the script in the body of the html in private. I tested with plain text and it worked, but my effect does not. To see the effect, please follow link in private.
I guess it will help to explain a bit further…imagine I wanted to use something like this: https://codepen.io/gschier/pen/iGCKu effect to happen in the header background (basically same concept, different effect).
How would I go about making that happen? If you point me in the right direction, i can figure it out. I just don’t know where things need to go. i have tried to put code in header widget, in custom css (for css stuff), in Google Analytics box, etc.
I want to thank you…anyone…for helping me out!
Cheers!
Hey jellyfish007,
I’d recommend to use the code I posted in the private area to load the effect on your page – you can add it to the child theme functions.php. Then add the canvas element
<canvas id="c" class="lineItUp">no canvas support</canvas>to the header.php and style it with css (i.e. set the width to 100%, set the position to absolute, the z-index to 10 etc.)
Best regards,
PeterPeter,
I cannot thank you enough. I *think I followed everything correctly; however, it seems to be loading right above the header.
To update:
I added the code in private to the Enfold (not child) header.php (you can view it on line #66 just before the closing </head> tag.I added the
<canvas id="c" class="lineItUp">no canvas support</canvas>
to my child functions in last position. My css is in private area…and I added as “Quick CSS”I created for you an admin login (credentials in private)…would you mind taking a look – I know you are probably crazy busy, but I sincerely appreciate your help! All of you are awesome, actually.
So, basically, I want to keep the logoarea the same as it was, and just apply this affect in the header/logo area “behind” the logo…or around the logo…and full width (responsive) and same height as my header/logo container is currently.
Hi!
I tried to log in but I got the error “ERROR: Invalid username. Lost your password?”.
Cheers!
PeterThat is my mistake. Try now, same credentials…I never clicked “save” on the add user screen – ROOKIE!!!! lol thank you!!
Hey!
I made a basic implementation of the script. I had to replace a small part in the javascript:canvas.width = wt; canvas.height = ht;with
//canvas.width = wt; canvas.width = 1000; //canvas.height = ht; canvas.height = 120;too limit the effect to the header area. The css code (quick css) now looks like
canvas#c{ position:fixed; z-index:9999; top: 0; left: 0; }This is a very basic implementation and I didn’t test it on mobile devices. Also to be honest I drop the ball at this point because the “fine tuning” and optimization of the script for mobile devices is a time intensive task and not covered by our support forum.
Cheers!
PeterThank you! Such a great help! This will get me started down the right path! One last thing…I really was hoping the effect would be in the same area as the logo, rather than the area above it – like the area between the colorful ball logo and the purple hamburger menu. I hope that makes sense? The background of that area…I definitely owe you a beer (or coffer, green tea, maybe an Ayahuasca?) I put a screenshot in the private…
:)
Nevermind! I was actually helpful this time :) I figured it out! Yay! Thank you…now I’ll play around with the mobile stuff. Thanks again! So much!
- You must be logged in to reply to this topic.