This is what I have right now :
JSFiddle : when I use font-awesome
JSFiddle_2 : when I tried use image background
Currently, I use font-awesome for the arrows, and now I want to load my own icon instead.
I tried this, but no luck:
I've been struggling for quite a while now. I hope someone can help me resolve this.
Thanks in advance.
Basically all you need to do is change the content property of the pseudo elements to the appropriate image url(s).
.slick-next:before {
content:url(http://lorempixel.com/20/20/);
}
.slick-prev:before {
content:url(http://lorempixel.com/20/20/);
}
JSFiddle Demo
Related
Today I was adding a Call To Action element in elementor and I set an image as the background and I changed the border radius to 5 (Under advanced> border> radius) and the border appears rounded on the editor and the preview but when I view the page from my device (iPhone) the image in the call to action is not rounded like it appears in the editor or preview. I tried playing around with it and I figured out that the border will apply if you have a color as a background of the call to action but will not apply if you have an image as a background. I've had the same issue before with the Slides Widget however I was able to resolve this by using some CSS
selector .swiper-slide-bg, selector .elementor-background-overlay { border-radius: 20px!important; }
,that I found on this article: https://mcstarters.com/blog/add-border-radius-to-the-elementor-slider-element/ . I then tried to create my own code:
selector .elementor-cta-background-overlay {
border-radius: 20px!important;
}
But this did not solve the issue. This is not a plugin or theme conflict I created brand new websites with nothing but Elemntor and pro installed and still had the same result. If anyone is able to figure this I would GREATLY appreciate it as I've spent HOURS online trying to find some CSS to solve this with no luck. Even reached out to Elemntor support out of desperation but even THEY can't figure it out. Any CSS Code Would be appreciated thanks.
[These Are Some Images To Help]
[What Elemntor Preview Looks Like]: https://i.stack.imgur.com/D7DiF.jpg
[What it looks like on my Device]: https://www.icloud.com/photos/#0e6G2hxKFShWs5dENCe5VGfpg
This worked for me:
.elementor-cta .elementor-cta__bg-wrapper {
border-radius: 12px!important;
}
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
Hi I am building a wordpress as per requirement of my client I need to show posts featured image only when hovering on post's title.So far I tried doing this by simple css in this way
li.wpp-thumbnail wpp_cached_thumb wpp_featured
{
display:none;
}
li.wpp-post-title:hover .wpp-thumbnail wpp_cached_thumb wpp_featured
{
display:block;
}
but this doesn't made the trick can you help me achieving this by any other process thanks in advance.
If you are trying to change the property of one element wpp-thumbnail from the event of other element li.wpp-post-title:hover, I think you have to use Javascript.
You should attach onmouseover="OnMouseIn" to the li.wpp-post-title element and write a function in java script file to handle that. Eg:
function OnMouseIn (elememnt) {
// find and assign the thumbnail object to a var
// make thumbnail visible
}
The CSS way of doing it would be setting the thumbnail as background of image of the title, using padding to align it and then displaying it on hover.
Same as setting different background for navigation items on hover.
In your CSS there seem to be a couple of dots missing and it is hard to see the logic when the HTML is not provided. However, it's not so difficult to achieve this with CSS. Just make sure that the featured image is included in the frame with the title.
Example, following your CSS:
--- HTML ---
<li class="wpp-post-title">
<h3>title</h3>
<img class="wpp-thumbnail wpp_cached_thumb wpp_featured" src="[your-ft-img-url]" />
</li>
--- CSS ---
.wpp-post-title .wpp_featured {
display:none;
}
.wpp-post-title:hover .wpp_featured {
display:block;
}
Note:
While you may, it is not recommended to add the li.
Likewise, you do not need to add all the classes of the featured image. One is enough.
If you would need to add all classes for a different reason, you need to add dots in between instead of spaces.
So, then the CSS would look as followed:
.wpp-post-title .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
display:none;
}
.wpp-post-title:hover .wpp-thumbnail.wpp_cached_thumb.wpp_featured {
display:block;
}
I hope that helps. GL!
Looking to bring an effect to my site identical to YouTube. What can I do in the hover of my wrapper div to get the desired effect? I know I can do this with javascript but interested to know if there is a css solution.
#getImageDetails{font-size:13px;}
#getImageDetails a{color:#666;}
#getImageDetails:hover{}
EDIT
This ended up giving me just what I needed! Thank you
#getImageDetails:hover a{color:#113e87;}
#getImageDetails:hover a {
color: ...;
}
It should work.
Is there a way - or anyone knows if someone already made this available - a way to style links in the form of buttons in the aristo style?
http://aristocss.com/
Using this CSS -reform a regular link to the style of a button?
You can more than likely copy all the CSS for those buttons and just use it on a link. In fact you'd probably be able to rip out a bunch of reset stuff as buttons often have all sorts of browser defaults which a link doesn't have.
So change:
button {
// Cut
}
to:
a {
// Paste
}
Hope that helps :)
(The css you need by the way starts right at the top of this file: http://aristocss.com/css/aristo.css)
Sure - just grab the CSS they're already using, change it from button to a.btn, add display:block, give your link a class of "btn" and you're all set.