WordPress.com Forums » Topic: Sapphire and Image Indents

splicehere on "Sapphire and Image Indents"

splicehere — Tue, 03 Jul 2007 01:03:57 +0000

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

Thanks again.

splicehere on "Sapphire and Image Indents"

splicehere — Mon, 02 Jul 2007 18:28:39 +0000

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

Thanks again,
Steve

drmike on "Sapphire and Image Indents"

drmike — Sat, 30 Jun 2007 22:19:21 +0000

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)

devblog on "Sapphire and Image Indents"

devblog — Sat, 30 Jun 2007 22:13:58 +0000

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!

drmike on "Sapphire and Image Indents"

drmike — Sat, 30 Jun 2007 21:08:43 +0000

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

timethief on "Sapphire and Image Indents"

timethief — Sat, 30 Jun 2007 20:10:31 +0000

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.

splicehere on "Sapphire and Image Indents"

splicehere — Sat, 30 Jun 2007 14:02:49 +0000

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

devblog on "Sapphire and Image Indents"

devblog — Fri, 29 Jun 2007 23:08:38 +0000

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:

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

raincoaster on "Sapphire and Image Indents"

raincoaster — Fri, 29 Jun 2007 23:04:29 +0000

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

splicehere on "Sapphire and Image Indents"

splicehere — Fri, 29 Jun 2007 22:58:14 +0000

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