Forum Replies Created
-
Posts
-
deactivating WPO, leaving WPFC on with cloudflare paused DOES cause the issue.
OH, theme compression/merging is ENABLED. I will disable now, clear the WPFC caches and try again
Since the toggle for CloudFlare is in WPFC, I tried activating WPFC before turning the toggle for CF on. Just activating WPFC caused the zoom effect to break again.
J
ok,
Here’s what I did:
1) Enable CSS/JS compression/Merging
2) Toggle ON Delete old JS/CSS files, then SAVE
3) Cleared all WPFC caches
4) Paused Cloudflare API on WPFC
5) Disabled WPFC
6) Disabled WP-OptimizeNow, wouldn’t just disabling WPFC stop the Cloudflare API?
I’ll wait 24 hrs and see what happens.
J
yeah, I didn’t want to do anything till I was sure I knew what I was doing.
Thanks for the assistance!
JonHi @Mike, it wasn’t zooming on hover, it was only showing the caption and button on hover. The slider is supposed to be animated where it zooms in from 2% to 10% automatically (not just on hover). It is one of the features of the Easy Slider.
I want to be sure I understand what to do:
1) Under Performance, enable JS and CSS compression/merging features. Turn on Delete old CSS and JS files toggle at bottom. Save those settings.
2) Clear WPFC caches and disable the plugin. Purge all Caches at Cloudflare (I couldn’t find how to disable).
3) I am uncertain how to disable server cache (at GoDaddy)Jon
***UPDATE*** The zooming issue where the caption and button are showing just fine: It was NOT working in Chrome and Safari, but WAS working in Firefox . . . this was because I was logged into my WP dashboard. As soon as I logged out and cleared my browser cache/history, the zoom stopped working in Firefox as well.
Any ideas what this is? I don’t think it’s a minification stylesheet thing since I cleared all minification caches etc, then disabled WP fastest cache, then cleared browser history/cache and the same thing happened.
SO close to this doing exactly what I want!
Here’s what’s weird: The problem of caption/button only showing up upon hover does NOT happen in Chrome . . . but it does happen in Firefox and Safari, even after completely restarting and verifying all is updated (and clearing all caches etc).
Furthermore . . . the above problem is fixed if I remove the link for the entire pic in the slider. Once I unlinked, the button and the caption showed up fine.
So, for simplicity, what I’ve decided to do is just add an href to the html that goes in the caption Make an Appointment
That seems to be working in all browsers (with the exception of the zoom effect has stopped working in chrome and safari, but works fine in firefox . . . not a deal breaker).
I have to focus on some other stuff, but am going to come back and try your idea because I’d prefer to have the entire pic as a link without the overlay.
Y’all have been incredibly helpful as I try to figure this out. It means a lot. I’ll keep ya posted on progress.
JI just put everything back to normal where the whole slider pic is linked to my contact page.
Here’s what’s odd. The issue with caption/button only showing upon hover does NOT happen in Chrome. It does happen in Firefox and Safari. The white overlay with arrow upon hover happens with everything . . . this is with no functions.php additions, and not adding anything for a button to quick css.
For now, I’d just like to get rid of that overlay and get the captions showing up again (I followed directions from another thread I had on this and it is still happening…I even tried completely deactivating any plugin that has any sort of compressing effect of pix, js, css, html, etc.).
Can we just get it working at this level? Most people know when they see a hand vs arrow that they can click. I can add a note to the caption to tell them where it will go. I don’t need a button.
Thanks y’all. Again, I’m back to nothing customized on this . . . just the easy slider element itself using a caption title and linking each slider image.
either my functions.php has something in it that is screwing with this, or my quick css does.
I put it all in a container, which at least gets everything in the slider, but there is still a far too large white rectangle (a border) and inside it is the green button that I want, but between that white border line and the caption are the words “make an appointment” just floating out there. And I still have to hover to see the words/border/button, and the translucent overlay with the curved arrow still shows up when I hover.
There has got to be some other code conflicing with both button types that y’all have provided.
J
I might see the problem in having the light button under the slider: the code “/** display: none !important ***/” looks like it’s wrapped in the stuff that says its just a comment. I’ll try removing that. Cannot believe I missed that.
re: mentioning slider pic being clickable:
I probably should’ve been more overt about it…it’s on Jan 30, “Found a workaround of just making each slide’s entire pic clickable”I swear I’ll get this figured out . . . I am sure it’s not as complex as it looks to me. I would love to save editing time!
I like what the button looks like with @Ismael ‘s code. Now I just need to figure out how to get the caption title and the button to show up without having to put the cursor arrow over it, and when that happens, how to not have the overlay with the curved arrow showing that it is a linked arrow. (and getting rid of the small gray background cube next to the button would be nice).
Here’s my quick css for the button (the last few lines are pulled from another part of quick css where we removed hte overlay from images and blog post images):
/*————————————*/
/* For button in slider */
/*————————————*/
.av-slide-button {
text-transform: uppercase;
letter-spacing: 1px;
border-width: 1px;
color: #fff;
background-color: #006f49;
border-color: #fff;
display: inline-block;
line-height: 1;
font-size: 15px;
padding: 12px 24px;
border-radius: 3px;
color: #fff;
fill: #fff;
text-align: center;
transition: all .3s;
}
.avia-image-overlay-wrap a.avia_image .image-overlay {
display: none !important;
}
.slide-entry a .overlay-type-extern.image-overlay {
display: none !important;
}I’m 99% certain that the overlay and hover issues are due to something in this and/or other parts of my quick css. I’ll be experimenting till I hear back from y’all.
Jon
I don’t mind putting website here: https://gatehealing.com/
what am I supposed to do with the code above the code block? Do I need the slider to be in a 1/2 container? I want the slider to be full-width. I’ve got the custom CSS in place now, but not that code in the right side element.
Now I have a white outline in the slider (just under the caption, where I want the button), but it is centered in a white box that is far too wide. Then there is a translucent button under the slider. I still have the issue where I have to hover to see the caption and button that are in the slider.
The button that @Ismael is perfect for what I’m looking for; I just need to get rid of the overlay w/ the curved arrow, and get the text to be plain white regardless of hover. Having a rollover effect on the button would be great, but not absolutely necessary.
J
@Guenni007
I put the functions code into the child functions.php and the css into quick css (I removed the code that I had gotten earlier in this thread).I can see the Make and Appointment text, but there’s no button around it, and I still get the overlay with the curved arrow indicating that the image is linked. And to get the caption/button text at all, I still have to hover over each slider.
I’m switching back for now just because of the overlay thing.
Looks like on the flipbox examples that once you shrink to a certain point, you get the same issue as me (pic shrinking out of line with text).
I may just leave it as is at 2/5 , 3/5 and not worry about the pic shrinking a little. I’ll keep working though to see if I can get it dialed in.
Thanks!
Jon@Ismael
Tried setting pic as background in column . . . tough to get the text to not overlap into it.OOHHH! Ok, I wasn’t sure if you were just showing the possibilities or actually giving the code! And wasn’t sure where to put which code.
Question though: The first window of data looks far more complex than what is ususally in the Quick CSS box . . . am I supposed to drop that into another file via editor (like functions.php or stylesheet.something)?
Thank you again
I’ll give it a go when I’m certain where to put it (I’ve broken my site putting stuff in the wrong place before),
JonWell this is odd. . .the caption Title and button (which is coded in caption box) only appear for each slide once you hover. Then it stays.
You can also see a small gray box next to the button . . .my guess is that this is where the caption itself would be if there were words.
Huh??
J***UPDATE*** Turns out this didn’t work . . . not sure why it seemed to.
Woah. I figured out the overlay issue. Added this
#top .avia-slideshow .image-overlay {
display: none !important;
}
.slide-entry a .overlay-type-extern.image-overlay {
display: none !important;
}
after the other button css.HUGE development for me to figure that out . . . now to get the rollover color shift on the button.
JFound a workaround of just making each slide’s entire pic clickable. . .This also fixes issue of the white text since I’m not just making the button clickable, but the whole image instead.
Not absolutely necessary, but if the button had a rollover effect that would be nice. I can try to figure that one out on my own if that’s too specific.
Looks great! Except when I add the href to make it clickable, the text turns green . . . while I am ok with links being green in the body of the site, on that button it needs to be white. SEE NEXT POST–FOUND A WORKAROUND FOR THIS
I tried adding
color: white;
text-decoration: none;
to the custom css (to also get rid of the underline), but it didn’t work.I really appreciate y’all’s help on this.
Jon
Thanks @Guenni007
That’s definitely the behavior I’m looking for . . . I get the math, but getting the concepts applied in my head will take a minute. . . On the re-done image of my site you did, the image itself is enormous with the browser window being wider . .. .I’d like it to have a max size of # x # . . .
I can sort of follow the code at the bottom, but am not sure how to get that into the Enfold elements.
Not exactly . . . I need the text to say in it’s box entirely, and the pic to remain completely to the right (or left) of the text. The link I put in the private box is this: https://gatehealing.com/counseling-austin-tx/personal-development-counseling/
Look at the rock climbing image and the green box to the right of it. I tried using just a text box with an image inside of it with the text wrap option where the image is to the edge. But the text starts wrapping as it gets to a certain size, and the spacing just looks weird.
I’ll read that over, but it’s a clean simple element that may be easy to add to the regular library.
