Need help? Check out our Support site, then

Sapphire and Image Indents

  1. My blog uses Michael Martine's "Sapphire" theme. I often add images to posts, typically at the beginning, and I align these images "left" so text flows around them. If I put "vertical space" and "horizontal space" into the image settings, they seem to be ignored. This isn't true in other themes.

    Here's an example. The image has 10 pixels of space horizontally and vertically, but you don't see it:

    I've purchased the custom CSS upgrade. Is there anything I can do to make this work?

    Many thanks in advance to anybody who can help.


  2. There are some CSS gurus around who can answer specifically, but I can tell you that yes, it should be dead easy in CSS.

  3. looking at your CSS, there are some classes defined that you might want to use:

    /* Images */
    p img {
    	padding: 0;
    	margin: 0 5px;
    img.centered {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    img.alignright {
    	padding: 4px;
    	margin: 0 0 2px 7px;
    	display: inline;
    img.alignleft {
    	padding: 4px;
    	margin: 0 7px 2px 0;
    	display: inline;

    So if your image code should look something like this:

    <img src="file.ext" class="alignleft" />

    See if that's how you want it to look; if not, you can tweak the img.alignleft definition till it looks the way you want it to.


  4. devblog -- you rock, baby! That did it. The img.alignleft wasn't being referenced. Once I reference it, images look good.

    Thanks very much!!

    You wouldn't have a recommendation for a basic primer on how CSS works in WordPress, would you?

    Thanks again,

  5. a basic primer on how CSS works in WordPress

    There are no css resources specifically for wordpress. But there are resources that Mark has included in the FAQs
    There are also others listed in the css forum.

  6. CSS is pretty much stardard everywhere. I remember the html browser specific stuff when we had the netscape/IE wars.

  7. Sorry for my delayed reply.

    Adding to what TT and drmike have said, you can find some good tutorials on the web and take it from there. Then, to apply your knowledge here, you'd need to know what classes/element definitions in your CSS affect what in your layout and that'd be it.

    There are some tools for Firefox that can help you make this task easier:

    Web Developer With this tool you can easily see what CSS files affect your layout, edit the definitions on the fly for testing purposes, remove styles, etc.

    Firebug and Aardvark.

    With Firebug and Aardvark you can analyze elements and see what classes affect them. They're pretty cool tools!

  8. sorry about not posting links. On a locked down terminal with only a single browser window that keeps locking u[p as well after 5 minutes or so. (That's why I'm having lots of typos)

  9. Many thanks guys. That's super helpful. I will dig in and learn.

    Thanks again,

  10. Wow. I just tried Web Developer and love it. Firebug and Aardvark look pretty interesting, too.

    Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Topic