Sapphire and Image Indents

  • Author
    Posts
  • #120705

    splicehere
    Member

    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:
    http://splicehere.wordpress.com/2007/06/28/heads-up-displays/

    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.

    Steve

    #120918

    raincoaster
    Member

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

    #120919

    devblog
    Member

    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.

    HTH

    #120996

    splicehere
    Member

    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,
    Steve

    #121057

    timethief
    Member

    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 http://faq.wordpress.com/2006/08/15/where-can-i-find-css-customization-help/
    There are also others listed in the css forum.

    #121079

    drmike
    Member

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

    #121101

    devblog
    Member

    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!

    #121103

    drmike
    Member

    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)

    #121244

    splicehere
    Member

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

    Thanks again,
    Steve

    #121254

    splicehere
    Member

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

    Thanks again.

The topic ‘Sapphire and Image Indents’ is closed to new replies.