WordPress.org

Ready to get started?Download WordPress

Forums

Trying to Add Border to Images and Center Captions (8 posts)

  1. lbos1
    Member
    Posted 2 years ago #

    Hi,

    My wordpress.org blog is http://www.torontonicity.com and I'm using the MyMag free theme. I've already searched the MyMag forums and cannot find the answer to my problem.

    I want to add borders to my images, as well as center the caption. I've modified the HTML code at the beginning of the CSS file as follows:

    fieldset, img {
    border: 1px solid #CCCC; padding: 3px;
    }
    caption, the {
    text-align: center;
    }

    When I draft a post and preview it, the image has a border and the caption is centered....Good! However, when I look at published posts, they have no border and the caption is aligned to the left. Is there another file I need to modify to get the image border to show and have the caption centered?

    Many thanks,

    Lori

  2. peredur
    Member
    Posted 2 years ago #

    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

  3. lbos1
    Member
    Posted 2 years ago #

    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

  4. peredur
    Member
    Posted 2 years ago #

    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

  5. lbos1
    Member
    Posted 2 years ago #

    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

  6. peredur
    Member
    Posted 2 years ago #

    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

  7. lbos1
    Member
    Posted 2 years ago #

    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

  8. peredur
    Member
    Posted 2 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic