Help with image caption issue

  • Resolved Rockwell_77

    (@rockwell_77)


    13 years, 11 months ago

    I’ve modified the Arras theme image caption in the css file with the code from the Zack990 theme, except it doesn’t come out exactly right. See the following image:

    [IMG]https://img.photobucket.com/albums/v218/rockster77/caption-1.png[/IMG]

    The caption block lines up as I want it (flush with the left side of the image) on the left, but not on the right side.

    I used the following code from the Zack990 theme and replaced the corresponding code in the Arras theme with it:

    .wp-caption {
  display: block;
  margin: 0 auto 15px auto;
}

.wp-caption p.wp-caption-text {
  display: block;
  margin: 0;
  background: #000;
  color: #FFF;
  padding: 10px 0 10px 15px;
  margin-top: 0px;
}

a.more-link {
  display: block;
  background: #EEE;
  padding: 10px 15px;
  clear: both;
  text-align: center;

    I’m not a coder at all, but I can sort of find my way around. Just not sure what I need to edit here (or elsewhere) to get the right side of the image caption block to line up with the right side of the image.

    I’m also trying to get an image border (same as in the Zack990 theme, which looks to be about 1px wide all around).

    Anyone help?

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Rockwell_77

    (@rockwell_77)

    Looked at the CSS for Arras which I happen to have installed. Comparing the two, it looks like the Zack990 .wp-caption class has display set to “block”, where arras doesn’t declare them a block element. Also there are different margin and padding values which could effect the alignment of the div.

    Rather than copying and pasting CSS declarations to get the effects that you desire, it might be more helpful to learn some basic CSS so that you can style the elements the way you want.

    Also try using a browser based web development tool like firebug (ff) or the ones built into chrome or safari to look at the underlying code. They will also allow you to play with the CSS values and you can adjust and see the changes happen in front of your eyes.

    ~t

    Thread Starter Rockwell_77

    (@rockwell_77)

    I’ve been using Dreamweaver to edit values, then saving and reloading the web page to see the changes. It’s not really real time, and it’s sort of annoying switching application (especially on a laptop), but that’s what I have been doing.

    I’ll look into the development tool in Chrome.

    Thread Starter Rockwell_77

    (@rockwell_77)

    Found the solution to the problem after reading this post: See this post.

    Seems I needed to override the WordPress default of adding 10px to the caption. This was done by copying the Zack0990 code in functions.php to the corresponding file for the Arras theme.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help with image caption issue’ is closed to new replies.

Tags