First of all the usual statement that all changes should be made in a Child Theme unless you have complete control over the theme (i.e. you wrote it); to avoid grief later.
Secondly, even if you don’t use a child theme, you should not alter style rules directly, but rather add new ones. This will at least give you a way of easily maintaining a log of your changes should an update to the theme overwrite the styles.
Having said all that, the style rule governing images on single pages is:
#subpage .content img {
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
So adding #subpage .content img to the selector list for your style rule should give you what you want (as long as you added that rule either to the end of the theme’s style sheet or in a child theme, and didn’t change an existing one). If you altered the style rule directly, you’ll have to check where all the pertinent rules are in the style sheet to make sure the one you’re adding is the one that’s selected via the cascade/specificity and so on: or add a new rule, of course.
Similarly, for captions on single pages, the rule currently is:
#subpage .content p {
color: #565656;
font-size: 12px;
margin-top: 10px;
}
Adding a rule for, #subpage .content p.wp-caption-text, should do it I think, once again adding to to your existing rule, caption, th{} assuming you’re adding new rules and not changing existing ones.
HTH
PAE
Thread Starter
lbos1
(@lbos1)
Hi Peredur,
Thanks for your help. I tried adding the code you suggested to the bottom of my CSS file (with a comment indicating why I was adding it for future reference) and I also removed the changes I had made before in the CSS file. Anyway, it did not work. The odd thing is when I draft a post, the image has a border around it and the caption is centered, just the way I want it. When I publish the post, it reverts back to having no border and the caption is aligned to the left. So I suppose there must be conflicting code somewhere.
Lori
Because your rule says:
#subpage .content img{
border: 1px solid #CCCC;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
}
The colour value is invalid and so the property is ignored.
Also you don’t need to restate the other rules. So what you need is:
#subpage .content img {
border: 1px solid #CCC; /* or #CCCCCC */
}
HTH
PAE
Thread Starter
lbos1
(@lbos1)
Hi Peredur,
Thanks again for your help! I tried adding the following code to the end of my CSS file, but my images still do not appear with borders and the captions are aligned to the left:
<!–I’m adding this code to try and add a border around images.–>
#subpage .content img {
border: 1px solid #CCC;
}
<!–I’m adding this to try and center captions.–>
#subpage .content p.wp-caption-text {
text-align: center;
}
I have no idea what I’ve done wrong. It’s probably something simple.
Thanks,
Lori
Comments in CSS use /* Text to comment */. A comment like, <!-- comment --> is for HTML. I’ll take another look, but this could be the cause of the problem.
Cheers
PAE
Thread Starter
lbos1
(@lbos1)
Wow, that was it! I just removed the HTML comment tags and replaced them with the CSS tags and that solved the problem! That’s wonderful! Thank you so much!
Lori
Good stuff!
Now remember to take a backup copy of your style sheet so you can put your changes back if a future update overwrites it.
You really should use a child theme, you know…
🙂
Cheers
PAE
