I am having some trouble working on a wordpress theme.
I am styling the Comments with CSS to look like this image below, you can see that the List items <li>comment stuff</li> have 3 DIVs inside them for an Avatar user image, an Arrow image connecting the comment and Avatar, and a DIV for the comment itself.
The trouble I am having is the Child comments, they are like <ul class="child"><li></li></ul> Nested Child UL list that is INSIDE my comments main list item.
So in the image below you get an idea how the comment list should look like, then you see the RED box I have drawn around the Child comments, you can see that they are nested inside the main comment box.
I need to somehow get these child comments outside of the main comment box so that each child comment can have it's own box.
I cannot figure out how to accomplish this as the child comments remain NESTED, I only can change the CSS for that.
Ideally I would like to make the child comments look exactly like the main comments except they will be indented more underneath the main comments.
If you have any ideas how to do this I could really use the help, I have a Dabblet (just like JSFiddle but cooler for CSS) page here with the code in question http://dabblet.com/gist/1555382
If for some reason you need to leave threaded comments on, you could start by styling the comment box instead of the list item:
.commentlist > li.comment {
position: relative;
width: 400px;
}
.c-body {
padding: 9px;
border-image: initial;
margin: 20px 0 30px 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
background-color: white;
}
That should get you part of the way, and from there you can style the child comments however you like.
Just turn off nested comments in Wordpress. It's in Settings, Discussion, Enable threaded (nested) comments
Using CSS you can remove Bullet points and the padding to align them with the main comment above just use:
padding:none;
list-style:none;
On the li div that wraps the child comments.
But the best way is like Matt says below.
Related
I have two divs for which I just need to add a box-shadow effect using CSS. But I just don't want it to get applied on every side of the div, I don't want the effect on the bottom side of the div. But I can't find a way to do it. Can someone help?
Try this, use CSS property box-shadow: 0px -10px 10px #888888;
detail of the property box-shadow:x-offset y-offset blur color
#example {
border: 1px solid;
padding: 10px;
box-shadow: 0px -10px 10px #888888;
}
<h2>box-shadow</h2>
<div id="example">
<p>blurred</p>
</div>
In my website I have a part where I'm using an amount of li's depending on how many entries there are.
So lets say there are 3 entries, 3 li's will be generated. When there are 4 entries 4 li's will be generated and so on. What I did is give my ul a columns value which changes depending on how many entries there are.
This all works flawless. However what I want now is to draw a drop shadow on every li. When I try to do this only the last li is effected the way it should be. Does anyone know how I can change this?
my li's are of the class item. and the css I tried to apply to it is as follows
.item{width:100%; max-width: 290px; box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-ms-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-o-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);}
Hope someone will be able to tell me how to solve my problem
EDIT
As requested here is an example of what happens.
https://jsfiddle.net/x0u9xao0/
The problem was that the columns stop at the bottom of the element, so you couldn't see the bottom shadow (which was below that)
Adding a margin-bottom to each of the list elements meant that the column went on for some more, so you can see the bottom shadow
See fiddle
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I am working on with 2 images styles and I'm having an annoying problem here, probably because I don't know much yet. What I'm trying to do is to get a second image on the first image to be like a sticker (if you see the jsFiddle on bottom you will understand more)
Problem is that from my default CSS I have on every image I upload on my blog to have a border:2px solid #fff (on the round). But I don't want this CSS to be applied on the second image i have in front of the first.
I am doing this by over-riding the default CSS with <style> tag on the post.
.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}
Also on the first image I add the style again like
style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: 1em;
This way the CSS is overwritten so no border or shadow is applied on any image, but the first image has the borders and shadows applied via its style. The second image gets nothing from CSS.
Problem is when I do this, there is a small gap from the image to bottom-border
and I cant figure out why.
Here is the link click
Just give the image
display:block;
see updated fiddle
it should now looks like
I see that you used the div tag to contain and control image properties and position. Remember that by default the div tag creates a small margin around itself so divisions floating or fixed on the same page and z-index will not collide. To fix this problem and allow div wrapped objects to snuggle up to each other use negative margins, usually for the top and left positions. Just a few pixels will do.
{
margin-left:-3px;
margin-top:-3px;
}
Try this on the extra image(s) you add, not the original, unless to need to trim its position as well. The -3px was just a guess. It could be as high as -10px or more. This code will move the images, so adjust the negative margin to taste.
You should remove your 1em margins from the bottom and right side of the first div before trying negative margins to make them extra close.
I am trying to add shadows using the following code
-moz-box-shadow:0 1px 3px #B8B8B8;
-webkit-box-shadow:0 1px 3px #B8B8B8;
box-shadow:0 1px 3px #B8B8B8;
I am able to create this effect on sidebars,widgets,footer,etc.
However when I try to put this around the main content area,the shadow on the bottom only comes.In the other sides,theres no shadow.
I am trying to find the reason since past 2 days.Today after some googling,i thought there might be some div with a higher z-index around,but,i believe theres no div.
Google chromes inspect element has a stike on the css and reveals an error of unknown property name.Can anyone please help me.
Here is my blog.
You have overflow:hidden on .blog-posts.hfeed and #main-wrapper remove those, or put margin: 3px on .post
Using this css for shadows
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
How do I remove shadow from top and bottom sides of the div and leave only horizontal shadow? Is that possible?
There are two ways to do this, but it depends on if you're looking for a hard edge or a soft edge.
Method One:
The trick here would be to wrap your box in a container and apply overflow:hidden to the container. If you give your box right and left margin that's the same as the shadow distance, the shadow will only be visible on the sides; it will be clipped on the top and bottom.
Here's an example:
http://jsfiddle.net/2Luef/1/
Method Two:
Alternatively, depending on the effect you're looking for, you could do something with multiple box-shadows like this:
http://jsfiddle.net/2Luef/3/
It doesn't have the clipping look like above, but it's arguably a nicer look. It also only uses one DOM element.
Yes and no.
The box shadow cannot be places on one side of an element unless you just offset it and/or change the spread, which I suspect isn't quite what you're after.
You can however place the element inside a container with the overflow set on it. The overflow property affects the box shadow. Here's an example.
You can use minus values for the spread value (last px value) to make the shadow not spread out to the other sides. However, that will only allow you to add the shadow to one side; so you can add multiple shadows, separated by a comma.
box-shadow: 10px 0 10px -10px #000, -10px 0 10px -10px #000;
For more information, checkout these two links:
How can I add a box-shadow on one side of an element?
http://starikovs.com/2011/11/09/css3-one-side-shadow/
Write like this:
CSS:
.parent{
height:200px;
margin:40px;
overflow:hidden;
}
.child{
width:200px;
height:200px;
background-color:#e0ffff;
-moz-box-shadow: 0 0 10px 5px #000;
-webkit-box-shadow: 0 0 10px 5px #000;
box-shadow: 0 0 10px 5px #000;
margin:0 20px;
}
HTML
<div class="parent">
<div class="child"></div>
</div>
check this http://jsfiddle.net/k9kVZ/2/