Adding CSS To Images

  • I’ve been looking around for a way to automatically apply CSS style to images which are inserted in a post or page and wasn’t able to find anything. I’m not talking about what happens when you click on an image…just how it appears in the post or page.

    I think I’ve figured it out so here it is in case someone else is looking to do the same:

    Edit your theme style.css file and add the following:

    .cboxElement img {
	border-style: solid;
	border-width: thin;
	border-color: #999;
	padding: 4px;
	margin-left: 10px;
	margin-bottom: 10px;
}

    Edit as needed…this one just puts a thin grey border around the image with some padding. And since my images are usually right justified, I added an extra margin on the left to give it some breathing room.

    The important part is that it applies the style to the .cboxElement automatically so all you need to do is insert the image.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor techotronic

    (@techotronic)

    Hi,
    the CSS class .cboxElement is added dynamically by the Colorbox library. If for some reason the JavaScript fails, the style will also not be applied.
    Cheers,
    Arne

    Thread Starter Patrick

    (@pinglis)

    Good to know…do you have any other suggestions on how I can achieve the same result? If the style doesn’t get applied, it’s not a catastrophic failure. It just won’t look as nice as I’d like it to look. Can’t have everything, I suppose.

    But thanks for the info…really love the jQuery Colorbox plugin.

    Plugin Contributor techotronic

    (@techotronic)

    Hi,
    well, that depends on the HTML your theme generates…

    For the theme on my site, the HTML is for example:

    <div id="attachment_768" class="wp-caption alignnone" style="width: 410px">
  <a href="https://www.techotronic.de/wordpress/wp-content/uploads/2011/05/100000.png">
    <img class="size-medium wp-image-768 colorbox-767" title="100000 Downloads" src="https://www.techotronic.de/wordpress/wp-content/uploads/2011/05/100000-400x110.png" alt="100000 Downloads" width="400" height="110">
  </a>
  <p class="wp-caption-text">100000 Downloads</p>
</div>

    and the corresponding CSS:

    .wp-caption {
  border:1px solid #ccc;
  text-align:center;
  margin-bottom:18px;
  padding:9px 5px 0;
}
.wp-caption img {
  border:1px solid #ccc;
  margin:0;
  padding:0;
}
.wp-caption p.wp-caption-text {
  margin: 0;
  padding: 10px 5px;
}

    Cheers,
    Arne

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding CSS To Images’ is closed to new replies.