Image Alignment in Tranquility theme

  • A couple of weeks ago I finally updated to WP 2.9.2, having been on a 2.5.?? version since I started my blog two years ago. My theme is “Tranquility White 1.2”. With the new WP version, I can’t get the images in new posts to align correctly in this theme. The images in my most recent post are supposed to be center-aligned, but, as you can see, they’re on the left. (I had actually wanted them to be left-aligned with text wrapping – see earlier posts – but no matter what I did within the image editor, that wasn’t happening.)

    My blog: https://otminteriors.com/wordpress/

    Before updating to 2.9.2, this type of alignment wasn’t a problem. Now, even though the images appear to align the way I want them to in “Edit” mode, when published, they’re all left-justified and either above or below the text (no “wrapping”) in the Tranquility theme.

    A few days ago, I posted a similar question and got one response: your theme’s style.css seems to be missing the styles for .alignleft, .aligncenter, and .alignright you can find corresponding styles in the style.css of the default theme that comes with the wordpress installation.

    As a test, I temporarily activated the WP default theme, and the images WERE aligning correctly in that theme. So the person who responded was right…the problem is with the Tranquility stylesheet code.

    I have basic knowledge of html, so I played around with inserting the above-referenced image styles in the Tranquility stylesheet, but to no avail.

    Can someone be kind enough to tell me exactly what I should copy/insert and where I should paste in the Tranquility theme?

    This is driving me crazy. Please help!!!!

    Thanks,
    Sheila

Viewing 2 replies - 1 through 2 (of 2 total)

  • add these styles from the default theme at the end of the style.css of your theme:

    .aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignright {
	margin: 0 0 5px 10px;
	display: inline;
	}

img.alignleft {
	margin: 0 10px 5px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}

    to see the new styles taking effect, you may need to reload the site in the browser and/or clear the browser cache by pressing CTRL and F5 the same time.

    Thread Starter srselby

    (@srselby)

    Thanks, alchymyth. I appreciate you following through on this again! I added the styles per your instructions and it worked!

    I have another related question… I sometimes like to increase the margins around the images for spacing/aesthetic reasons. In the past, when I did this manually in the image editor, the text would move associatively with the image. I just wrote another short post and manually increased the margins in the image editor’s advanced settings, and while the image moved appropriately, the text was static so the image was overlapping some of the text. Is there some code I can insert somewhere in the style.css to make the text to move when the image margins are changed?

    Thanks again for your help!!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Image Alignment in Tranquility theme’ is closed to new replies.