-
Posts
-
Hey guys,
I’m new to coding and I’m running dry of helpful material on the net whilst it goes over my head! I have plenty of questions which are listed below, perhaps you can help me out!
1) I’m swapping from a laptop with a 15″ screen to a monitor with a 22″ screen to edit my site. No matter where I look (enfold>general styling>main content) I can’t find a ‘stretch to fit’ option for my background. I’ve tried pasting CCS into the quick CSS box located in the enfold page mentioned in brackets but no luck to get a responsive background for the 2 monitor sizes.
2) I’m trying to get an image to animate in behind a block of text with an internal link set to the text.
a) I can’t get the image to overlay behind the text (trying to use html code with postion:absolute; which I’ve gotten to work to position text but not an image). I suppose it won’t be overlay, but underlay? I don’t want the option to press the linked text to disappear with an animated transparent picture above it. Alternatively, is there a way to centre align the image on the text so the site remains responsive?
b) I’m really struggling to make some custom animations by following online tutorials. The particular animation I would love is for the image to ‘reveal’ from left to right (the image being a chalk squiggle so it looks like it’s being drawn behind the text as your mouse hovers over the linked text – and being rubbed out from right-left when mousing-off).3) Finally, I’d love to replace the enfold theme image link of the translucent white box and animated arrow and replace it with a simple enlargement of the image by ~10% when mousing over to shrink back to original when mousing-off.
There are many more questions but these alterations will keep me busy with some good advice! Keep the terms simple if at all possible, the last thing I want is to keep asking more questions and hog your time!
Cheers!
Hi Jambo,
Could you provide us with a link to the site in question so that we can take a closer look please? Screenshots highlighting the changes you would like to make might help as well.
Best regards,
RikardHi Rikard,
Sorry but the linked page isn’t saturated with content!
I’m trying to get those 3 images to grow smoothly (~1 sec animation) by 10% of their current size on mousing over them to then decrease to their original size when mousing off. Hopefully this will emphasise that they are clickable when the page is completed.
The reveal animation I’m describing is illustrated by timeline I made containing the 2 elements made up of “text 1” and “img 1”. Left-most being the start of the animation and the right-most being the end of it (font-style and colour will be different, something I can manage with)! The idea is that when hovering over the text, “img 1” would begin to reveal itself from left-right. When hovering off the text, the animation would trigger in reverse to the original state.
Also, you might be able to tell help me out with the background sizing. On my laptop at the moment the background stretches across, but when I’m at home on my larger monitor I’ll see that the background will be too small for the screen. A background that stretches and responds to differing monitor sizes is what I’m after.
Finally, to add another question to the list (it could go on forever) I’m trying to rotate the arrow at the very bottom of the page by just a few degrees because I’ll have an arrow to each of those circular buttons and I don’t want to have each of them separated by 90 degrees. I’d rather not go into inkscape and rotate them in there, thus having to upload 50 arrows to my media library in slightly different orientations if you catch my drift!
I’ll do my best to explain better if you need me to.
Thanks,
J
This is the only quick CSS under general styling relating to linked images:
.image-overlay { visibility: hidden; }
.text-overlay { visibility: hidden; }
Cheers,
J
Hey!
Sorry i did not understand clearly what you need to do and the link you provided is not opening.
Let me rephrase what you are trying to do is add custom animation to some elements on the page correct? You want to scale things on mouse hover ?
First turn on custom CSS class support as mentioned in this link http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Then add your own CSS animation class to the element.
Below is a simple example of scale up animation add this block to Quick CSS and “animate-scale” to any element custom CSS class to scale up.
/* Scale Up Animation /* ------------------------------------ */ @keyframes scaleUp { 0% { opacity: 0; } 1% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } .animate-scale:hover { animation: scaleUp 0.15s cubic-bezier(1, 0, 0.51, 1); }Cheers!
Vinay KashyapHi Vinay,
Thanks for the info but I’m using a plugin which was recommended to me called “Page Builder by SiteOrigin”. I find it’s page builder is a lot more user friendly than the default template builder. I have the option to assign custom CSS to each element within an ‘attribute’ tab.
When I paste your code in the element’s CSS attribute and asign the image the class “animate-scale” nothing happens when updating and previewing the page. I’ve given you my login details for you to have a look at what I’m doing wrong! If you make all your contributions within the “TEST PAGE” that would be awesome! You’ll also see I’ve also added the example ‘reveal’ animation I’m describing, it would be great if you could have a look at that if you have time!Thanks a lot.
James
Hey James!
Please note that we’re not going to be able to assist you if you use a third-party plugin (our scope is limited to the theme and the plugins officially supported by it). That being said, you can enable a custom CSS class field for each Enfold’s builder element, you’d just need to add the following to the theme (or child theme) functions.php:
add_theme_support(‘avia_template_builder_custom_css’);Regarding the animations you’re wanting to do, i think it would be better to work these on an enviroment like jsbin or codepen first and once you get it working there, pass it to WordPress install, it would be way easier to debug things.
Cheers!
JosueHi Josue,
I had a short-lived attempt of using codepen but I couldn’t get it to copy the website over properly, even to think how I’d transfer any additional code into WordPress puts fear into me. Lets forget the fancy animations and revert to the default layout editor. I can work with the image enlargement feature that comes with the enfold theme to tackle one of my queries.
I’ve added “add_theme_support(‘avia_template_builder_custom_css’);” to my functions.php file and I’ve got an option to input a custom CSS class in the pop-up box when clicking on elements within the layout editor. If I want to add borders or what have you to these assigned classes, do I have to add the CSS to the general styling quick CSS box in the enfold settings?
If I can add another question, can you log into my account and see that the 3 images on the test page are cropped when they grow as you hover over them? Is there a way I can prevent this from happening by giving some priority to the images over the column sizes somehow?
Going back to one of my other queries, I’m trying to stretch my background of the chalk board across the screen. It’s fine on my laptop but when I’m on my larger monitor size the background shows 2 black bars either side of it and I’d rather make the background fill the entire screen no matter what the monitor size is.
Greatly appreciate your help! Superb support.
James
Hey!
Sorry for the delay.
We tried to login to your site from the URL mentioned in the private but it did not work please share the URL where we can inspect the elements in question and kindly request you to open new tickets for new issues so we can keep the focus on one issue in each ticket if they are not related and help resolve it faster.
Best regards,
Vinay Kashyap
- You must be logged in to reply to this topic.