Posted 11 months ago #
I am building a twenty eleven site. I had a couple friends post comments as a trial, but the comment page here has what appears to be broken image links just to the left of the comment text box.
I have no idea what's causing this, but if you know what file would address this (perhaps content.php or comments.php), maybe I could post my code and someone smarter than me might see the problem.
Any help welcomed.
Posted 11 months ago #
I dont see broken images I see the gravatar image
http://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=68
Posted 11 months ago #
Hmm, strange. I see them between the gravatar image and the text box. The moment I read your post I ran to check two computers in an office next door. They both showed the broken links.
Posted 11 months ago #
Also not seeing any broken images, just the default 'Mystery Man' gravatars
Posted 11 months ago #
I chatted with him and found em.
Each comment is a LI and they got a broken arrow image for each comment box.
.commentlist > li:before {
content: url("images/comment-arrow.png");
left: -21px;
position: absolute;
}
Posted 11 months ago #
Ah, probably comes from the bizarre child theme setup!
2011 stylesheet is loaded using @import,
but then all of 2011 styles are copied to the actual child stylesheet
And I'm guessing the images were not brought over to the child theme, so the child stylesheet is looking for images that don't exist in the child theme?
Normally, the @import rule is used, and only the styles being changed are copied to the child tehme style.css
Posted 11 months ago #
Anyway, followed WP Bum back to his site and he found the problem, which seems to affect only Chrome and IE.
So, if anyone has a similar problem...
In style.css, found:
.commentlist > li:before {
and below it deleted:
content: url("images/comment-arrow.png");
and that fixed visitors comments. To fix my own comments (dark gray in twenty eleven), I found:
.commentlist > li.bypostauthor:before {
and below it deleted:
content: url(images/comment-arrow-bypostauthor.png);
All fixed. Thanks WP Bum
Posted 11 months ago #
Yup, most likely related to my comment above.
Is there a reason for having your child theme set up tthe way you do? Specifically with regards to the style.css? Normally using the @import line, we then only paste in rules we would change. Otherwise we would not use @import if copying over all the css.
Posted 11 months ago #
Not sure I am reading you right, but I do have this in my child theme's style.css:
@import url("../twentyeleven/style.css")
Line 07, though don't know if it is coded correctly.
Posted 11 months ago #
that code is correct
It just looks like you have all the styling from 2011 copied into your stylesheet, is that correct?
Posted 11 months ago #
Yup, it is. Though not sure how it ended up that way. Maybe no point in having @import, right? ... I'm new at this, and at first was making changes to the main style.css, and lost track of what had been changed, so I think I just copied it all so nothing would be missed. That's my recollection. I'll know better next time. Famous last words.
Posted 11 months ago #
You got it... that is actually what caused your initial problem
You had 2 conflicting stylesheets. Different browsers treated it differently - if the parent themes was respected, the images worked - as they are in the parent theme. If the child stylesheet was being respected, the images broke, as you don't have those images in your child theme.
You really have 2 options
The better option:
Keep the @import line, and delete any css rules which you haven't customized. child theme style.css normally calls to the parent using @import, and then the only css rules needed are any with your custom code in it
The option for drastic changes:
Delete the @import rule, and keep all the css - this is only the better way to go if you are rewriting the entire stylesheet really.
The main thing here is to not have 2 full stylesheet fighting with each other, with your current situation, you'll never be able to customize things predictably, cross-browsers
Posted 11 months ago #
Tell me if I'm wrong. The best way would be to copy the child theme style.css I have now to a safe place. Then cut out most of what I think is not changed. If all continues to work ok, save it again to safe place, and go back to cutting.
Or is there an easier way?
Posted 11 months ago #
Your method is about as good as any (it's the way I would do it at work, where I can't use any helpful software)!
I know there are tools for doing comparisons of code (2011 original vs. your child theme) which would show you what is changed.... however, I haven't used any of them! (Googling Code Compare Tool seems to bring up various options if you are interested)
Posted 11 months ago #
All the same to me, I suppose, so I tried the one here .
Stripped it down as much as I dared. Will have to spend some time now seeing what I have.
Posted 11 months ago #
There's something I am not sure I understand. Can I make changes to code in the main twenty eleven style.css and paste the edited versions anywhere in the child style.css, in any order? If so, is there anything in the file that must be in a particular order?
Posted 11 months ago #
You'd probably be best to read up on css a little... here's the gist
To edit some css, you never touch the parent (2011) stylesheet-or any part of the theme. That is the point of your shild theme.
If you wish to edit something from the parent style.css, you copy that particular block to the child theme, and make your edits there.
Using the @import rule, the parent theme loads first, and then your child. So your revised style in your child theme loads over the parent so to speak, and your changes are used.
That's why we don't want to put unchanged rules into the child sheet - we just load unnecessary code, and increase the potential for conflicts. The child theme is only for edits, or brand new css. On voodooPress for instance, I have a 2011 child theme, and my style.css is quite short.
The order of the code going into your theme often isn't important (for a basic child theme with minor revs), but it can be (the more complicated the changes become). CSS stands for cascading stylesheet, and the rules cascade so to speak - the rules take effectin order, so rules further down the stylesheet can overwrite ones further up the sheet.
So you can group like sections of css together - for instance styles affecting overall layout, styles affect fonts, styles affecting the menu.
Within the blocks, the more general rules come first, and then more specific. That's how it goes in a nutshell, but, like I said, if you want to really get a good understanding, gogole around some css tutorials.
That's what I had to do when my hack attempts didn't work right back in the day!
Posted 11 months ago #
Thanks, will do that. Realize now my question was too simple. Have some studying to do.
Appreciate your time and trouble.
Posted 11 months ago #
It's no trouble at all! Hopefully I helped guide you, at least a little bit!
You must log in to post.
