Hi I'm using wordpress and i am using the gallery shortcode, but the problem is that my images have borders around them.
I set the padding to 0 and i set the border to 0 in css but my thumbnails still have borders around them.
Here is the css ---> https://gist.github.com/mihadaiko/5011743#file-style-css
and here is what it looks like:
you need to use css
img { border: none; }
Try this
a img { border: 0 none; }
Also added your code in jsfiddle here: http://jsfiddle.net/HkTDK/2/ and there are no borders on images, so it might be inherited from somewhere else.
Another solution would be to add:
#gallery-1 a, #gallery-1 img { border:0 none !important; }
If this doesn't work, it means that border is a background image, so just add background: none !important too to the above line
Thanks a lot!
works perfectly for Wordpress if you are using Elementor.
If you are using several galleries (1,2,...,n) u need to add to your Custom CSS:
#gallery-1 a, #gallery-1 img { border:0 none !important; }
#gallery-2 a, #gallery-2 img { border:0 none !important; }
...
#gallery-n a, #gallery-n img { border:0 none !important; }
and so on.
Related
The home page of https://ilanwittenberg.com/ displays a full-screen slider. Unfortunately, some PC users fail to click on the screen to move onto the Portfolio page: https://ilanwittenberg.com/portfolio/
Is there a way to change the cursor from an arrow to a hand when the mouse hovers above a slider on that page only (when using a PC)?
The code below did not work:
.wcp-caption-plugin .image-caption-box {
cursor: pointer !important;
}
The home page contains the following Code Block:
html{
overflow:hidden;
}
body{
cursor:pointer !important;
}
#fullscreen_slider_0{
z-index:0;
}
#wpadminbar{
display: none !important;
}
.content, .container{
padding: 0 !important;
min-height: 0 !important;
}
#top.avia-blank #main .container_wrap:first-child{
border: none !important;
}
#top.avia-blank #wrap_all #main{
border: none !important;
}
Should I make changes to this code?
The expected result is that the mouse cursor will change from an arrow to a hand when hovering above the full-screen slider showing on the homepage.
.wcp-caption-plugin .image-caption-box dont appear to exist on that page. Try adding that rule to .splash-logo
Use pseudo-classes on CSS :
.wcp-caption-plugin:hover .image-caption-box:hover {
cursor: pointer !important;
}
Or separate the classes if needed :
.wcp-caption-plugin:hover {
cursor: pointer !important;
}
.image-caption-box:hover {
cursor: pointer !important;
}
Issue resolved with the following css code:
.splash-logo:hover {
cursor: pointer !important;
}
I have an issue with the backgroung of shop-image here is the LINK to shop page, and here is a screenshot
IMAGE
Here is the code that i tryed to change background :
div.page-title.page-title-default.title-size-default.color-scheme-light.title-design-centered.title-shop {
background-image:none;
background-color:#111111;
}
Add !important to background-image property, try this:
div.page-title.page-title-default.title-size-default.color-scheme-light.title-design-centered.title-shop {
/* important */
background-image:none !important;
background-color:#111111;
}
Hopelessly novice, but dedicated.
Using Wordpress.
I'd like to be able to do this:
http://www.ericryananderson.com/
On hover, the images turn greyscale and captions appear.
All is smooth.
My initial hopes of finding a easy plugin that switches images upon hover has been crushed.
All help is greatly appreciated.
Arvid
If you can simply add plain CSS and HTML code to your site, then this is the structure:
HTML:
<div class="cool-card">
<img src="whatever.png">
<h2>Whatever text you want to show</h2>
</div>
And then, in CSS:
.cool-card {
/* Add here any custom style (width, height, etc.) to the card */
}
.cool-card > img {
width: 100%;
height: 100%;
}
.cool-card:hover > img {
filter: saturate(0); /* Makes the image black and white, by setting saturation to 0 */
}
.cool-card > h2 {
/* If you want to change the look of the text, do it here */
display: none;
}
.cool-card:hover > h2 {
display: block;
}
If you can't, I'm sorry, but I've tried :)
I'm working with modifying a Wordpress theme. The theme is named glare and i would like to do the following. (URL: http://tofsti.no/letsbuzz/)
Remove the background from the menu, so that only text shows. I have tried:
div.row.transparent{
visibility: hidden;
}
#navigation .nav a {
color: #fff;
font-size: 20px;
}
But the visibility:hidden; hide the menu...
What to do?
I would like to push the gallery images up (testgallery url: http://tofsti.no/letsbuzz/?galleries=test ) - a couple of px below the menu.
How to do this? I have tried:
div.row.col-listing{
top: 200px
}
Use the following CSS for the menu and it should work:
header .transparent, #navigation .nav a {
background:none;
}
Everything in your theme that has a class of .normal has a very large margin-top value (232px):
.container .normal {
margin:0; /* or add whatever value works for you */
}
question 1: Since the div contains both the text/links and the background it all disappears when visibility is "hidden".
I'm guessing there is an opacity: setting somewhere, set to something like 0.5.
Does removing the background-color value and setting the opacity to 1 work?
I am trying to change the background-color of an h1 class, but any changes I try to make have no effect, this is the code I have written:
.entry-title {
background-color: #f0eaca;
}
The title appears white instead of beige like everything else: https://apatheticpaper.wordpress.com/2015/02/13/raf-simons/
Any help would be greatly appreciated.
don't use !important.
the issue is, it has a style for background. so,
.single .featured-portrait .entry-title, .page .featured-portrait .entry-title
{
background : none repeat scroll 0 0 #f0eaca;
}
will do.
Your title class seems to be overridden by some media query:
#media only screen and (min-width: 1359px)
.single .featured-portrait .entry-title {
color: white;
}
}
You either need to override it with specificity or !important (not advised):
.single .featured-portrait .entry-title {
color: #f0eaca;
}
this class is over riding your property
.page .featured-portrait .entry-title
{background-color:white;}
Instead change it to
.page .featured-portrait .entry-title
{background-color:#f0eaca;}
try with !important as another option
As i can see currently on your code :
h1.entry-title {
background-color: #f0eaca !important;
}
So to update your code, you need to made the same or upper priority on like :
h1.entry-title {
background-color: #123456 !important;
}
You should read this article about priority on css