Working on a clients site which they seem to have changed some code by accident. The slider content now seems to have a strange boxed border around it ! You can see this on www.happyorganic.org
I have checked the CSS which has been applied to it but there seems to be no border on it. The slider is created with the plugin for WP called wordpress slider plugin.
Any Ideas?
Remove box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); in .flexslider and remove box-shadow: 0 0 1px 1px #888888; in .ssp_no_chrome_slider_default
Related
My blog is https://www.firozemistry.com based on the Blogger Emporio theme (with custom domain).
When viewed on Desktop/Laptop, on the homepage when the cursor is hovered over a snippet, the snippet highlights with a drop-shadow.
How can I make this drop-shadow permanently visible on all snippets, even when the cursor is not hovering over a snippet. If possible I would like the drop-shadow to be visible on Mobile view also.
However the snippet image dims slightly when the drop-shadow is visible. I would like the snippet to not dim while at the same time having the drop-shadows visible.
I would be most grateful if an expert would kindly guide me on how to achieve this.
Add this CSS .feed-view .post-wrapper
.feed-view .post-wrapper{
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
}
I want to take the hover effect on the word "Dropdown" on this template (the gray/black box that appears when you put the cursor on it) and put it on the nav menu of this other template (from the same site)
I'm a beginner, I tried a lot of things but I just can't achieve the same effect. I tried copying the #nav code from the first template .css and pasting it on the another template css but it just copies the text, font, color but the hover effect is not there.
Thank you in advance and sorry for the stupid-ish question
The dropdown effect on the first template is achieved using Javascript rather than pure CSS. You'll need to find the .js file in that template which is controlling it. I took a look at the source, which you can do by right clicking on the page and selecting View Source. The dropdowns are being controlled by a jQuery plugin called Dropotron.
https://github.com/n33/jquery.dropotron
If you add this to the new template you wish to use, you can achieve the same effect.
EDIT:
3 things are happening to create the hover effect on the word itself.
Background Color
Curved Corners
Inset White Border to make a slight 3D effect.
These are achieved with three CSS rules:
background
border-radius
box-shadow
The exact CSS is:
border-radius: 6px;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.024) inset, 1px 1px 0px 0px rgba(255, 255, 255, 0.024);
The background-color on the new theme's header is white, so you don't need the shadow. You would just insert this into the CSS file:
#nav ul li a {
border-radius:6px;
}
#nav ul li a:hover {
background:rgba(0, 0, 0, 0.15);
}
You can change the color if you want of course.
I am creating a website, and I want to create this effect of giving an outer glow shadow to the main column in the page ..
This page serves as an example: http://royalwatches.pk/
Note that the main column has a shadow effect on both left and right sides, to make the column appear to be 'in front' of the background.
This picture also show's what I'm talking about:
This is the page where I want to replicate this effect: http://blu-rays.pk/index.php
Can someone guide me on what CSS/HTML changes need to be done ?
Sidenote: Putting this all in jsfiddle seemed impractical, which is why I've mentioned the sites instead ..
You can use box-shadow property.
CSS
img{
box-shadow: 0px 0px 5px gray;
}
JSFiddle
Or in your case:
#wrapper{
box-shadow: 0px 0px 5px gray;
}
Note: remove the background-image from #wrapper.
Remember to add code so that the shadow is visible in more browsers, like so:
#wrapper {
-moz-box-shadow: 0px 0px 5px gray;
-webkit-box-shadow: 0px 0px 5px gray;
box-shadow: 0px 0px 5px gray;
}
More can be read about this at: http://css-tricks.com/snippets/css/css-box-shadow/
I have a dropdown menu using css, I open with firefox that look ok. But when I try to open using IE 9, dropdown menu show, but it look transparent and content not show.
Here it's after I checked in my CSS, if I remove this code, in IE ok. But I want to keep this code. So how can I do that ?
background-repeat:repeat-x;
filter:progid:dximagetransform.microsoft.gradient(
startColorstr='#00a1bc',
endColorstr='#008ba2',
GradientType=0);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25),
inset 0 -1px 0 rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25),
inset 0 -1px 0 rgba(0,0,0,0.1);
box-shadow:0 1px 3px rgba(0,0,0,0.25),
inset 0 -1px 0 rgba(0,0,0,0.1);
Can't tell for sure because I'd need to see more of the code, but looking at the image it looks like it could possibly be a problem with the z-index. It looks to me as though the table looking content is sitting on top of the dropdown, thus blocking anything within it.
If you are using the position property on the dropdown and also the content that appears to be above/behind it, then make sure that the dropdown has a higher z-index than that of the other content.
Please try adding an -ms- vendor prefix for the gradient.
I need a shadow box border for my content div. Currently I am using the following code in the css to achieve this.
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-webkit-box-shadow: rgba(0, 0, 0, .496094) 0px 1px 10px;
-moz-box-shadow: rgba(0, 0, 0, .496094)
But this only works fine with Google Chrome. The shadow box is not applied in other browsers. So I need to know how to use a border image to get repeated with div. Also tell me appropriate size of the image to be used... Thanks...
The reason it only works in Chrome is because that's the only browser you gave any values to. For the Firefox rules, you left out 0px 1px 10px
Also, you should order them properly and include the non-vendor specific property, as well to make it future proof. See here - http://css-tricks.com/ordering-css3-properties/
To get the shadow in IE without any images, check out http://css3pie.com.