WordPress.org

Ready to get started?Download WordPress

Forums

Basically
Photo Border when Using Captions (10 posts)

  1. larryshort
    Member
    Posted 2 years ago #

    Ocassionally I use photos in my blog posts. When I add a caption to the photo, a very wide and black border is created around the photo which is inconsistent with the look and feel of the rest of the theme.

    Is there any way to modify this border to a lighter color?

    http://wordpress.org/extend/themes/basically/

  2. Satrya
    Member
    Theme Author

    Posted 2 years ago #

    Hello,

    Give me your URL, I want to see the problem :)

  3. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    Can you post a link to your site so someone can look at the code?

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    You will need to start customising your theme's CSS possibly via a child theme. Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  5. larryshort
    Member
    Posted 2 years ago #

    My blog is at HTTP://www.finish-to-start.com

    You'll want to look at the previous post for a photo with a caption.

    Thanks everyone for your time looking at this.

  6. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    The styling of those are in style.css line 1033:

    .wp-caption {
        -moz-transition: all 0.15s ease-in-out 0s;
        background: none repeat scroll 0 0 #000000;
        margin-bottom: 1.625em;
        max-width: 96%;
        padding: 15px 10px 10px;
    }

    Take out the background to get rid of the black. If you want a simple black border, you can add:

    border: 2px solid black;

  7. larryshort
    Member
    Posted 2 years ago #

    Thanks, I successfully made that update.

    One follow-up question. How do I shut off the hover effect?

    See http://finish-to-start.com/key-stakeholder-power-and-management/

  8. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    It will be one or more of these -- depending on what you want to change:

    .wp-caption:hover {
      background: #eee;
    }
    .wp-caption:hover .wp-caption-text {
      color: #333;
    }
    .wp-caption:hover .wp-caption-text:before {
      color: #333;
    }
  9. larryshort
    Member
    Posted 2 years ago #

    Thanks.

    To close out this thread, below is the modification I made to get the caption text to stay black. I changed the color code to #111 in two places.

    Thanks for your help!

    .wp-caption .wp-caption-text {
    color: #111;
    font-size: 0.923em;
    line-height: 1.75em;
    margin: 0;
    padding: 15px 0 5px 40px;
    position: relative;
    }
    .wp-caption .wp-caption-text:before {
    color: #111;

  10. Satrya
    Member
    Theme Author

    Posted 2 years ago #

    Thannks @WPyogi for helping @larryshort :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags