Getting text to wrap around pictures.
Support Area › Forums › Moonrise › Getting text to wrap around pictures.
Tagged: dash in caption, photo border, photo wrap
- This topic has 9 replies, 3 voices, and was last updated 10 years, 8 months ago by Christine Donalies.
-
AuthorPosts
-
June 19, 2013 at 18:28 #11931June 19, 2013 at 22:24 #11935Bill RobbinsModerator
Good question. First upload your image. When you’re ready to insert it into your post, choose a size that’s smaller than the width of the content area (about 600 pixels wide). Then select to have it align left or right. Whichever side you choose to align the image, the text will float on the other side.
Every image forms a rectangle even if there is a transparent part of the image. Because of that, the text next to an image will not overlap any “empty” parts of a picture like it might in a desktop publishing program.
If you have any questions, let me know,
BillJuly 11, 2013 at 21:46 #12293Christine DonaliesParticipantI’m having difficulty having the text wrap around in posts only. Pages are fine. There’s an added dash that is being added to the caption in the photo as well in front of the caption.
I’ve tried deleting and reposting the photo several to no avail.
July 11, 2013 at 21:52 #12294Bill RobbinsModeratorChristine if you can post a link to a post where you’re having trouble making the text wrap, I’ll take a look for you.
July 12, 2013 at 03:16 #12296Christine DonaliesParticipantThanks Bill, here it is:http://www.splashlightmarketing.com/my-first-wordpress-projects/.
July 12, 2013 at 03:59 #12297Christine DonaliesParticipantActually Bill, it’s the same problem in pages too. Can’t get a border around the photo with or without caption.
Thanks for your help.
July 12, 2013 at 08:16 #12300Bill RobbinsModeratorChristine,
Thanks for the link. Here’s a screenshot of the image with caption that I’m seeing:
If you’re seeing something different, let me know. You’re welcome to edit the image and caption styles if you’d like to. In the style.css file, this section defines the images, captions and their styling:
/* Images and Galleries ----------------------------------------------- */ .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } dl.gallery-item { margin: 0; } #content .gallery .gallery-icon img { border: 1px solid #ddd; padding: 6px; } .wp-caption img { border-color: #eee; } img.alignleft, img.alignright, img.aligncenter { margin-bottom: 1.625em; } p img, .wp-caption { margin-top: 0.4em; } .wp-caption { background: #eee; margin-bottom: 1.625em; max-width: 96%; padding: 9px; } .wp-caption img { display: block; margin: 0 auto; max-width: 98%; } .wp-caption .wp-caption-text, .gallery-caption { color: #666; font-size: 12px; } .wp-caption .wp-caption-text { margin-bottom: 0.6em; padding: 10px 0 5px 40px; position: relative; } .wp-caption .wp-caption-text:before { color: #666; content: '\2014'; font-size: 14px; font-style: normal; font-weight: bold; margin-right: 5px; position: absolute; left: 10px; top: 7px; } #content .gallery { margin: 0 auto 20px; } #content .gallery a img { border: none; } #content .gallery-columns-4 .gallery-item { width: 23%; padding-right: 2%; } #content .gallery-columns-4 .gallery-item img { width: 100%; height: auto; }
You can copy any of those styles and then paste them into the Custom CSS box and edit them. You had mentioned the dash with the caption. It’s found in this one:
.wp-caption .wp-caption-text:before { color: #666; content: '\2014'; font-size: 14px; font-style: normal; font-weight: bold; margin-right: 5px; position: absolute; left: 10px; top: 7px; }
You would change the:
content: '\2014';
to
content: '';
to remove it.
Let me know if I can help,
BillJuly 13, 2013 at 10:02 #12337Christine DonaliesParticipantHi Bill,
Yes, this is what the post looks like. Do I have to custom edit CSS for every photo I insert into my page or post on Moonrise?
Thanks for helping me resolve the dash problem 😉
Christine
PS: I’m guessing where you directed me is a gold mine! Pretty excited newbie~
July 13, 2013 at 10:32 #12342Bill RobbinsModeratorChristine,
Any changes you make to the styling there will be global–they’ll affect all the images everywhere. So if you want to change how the text wraps, you can do that in the section above. You can change margins, add ones and so on all from there. Since they are global the only things you’ll need to alter on a per-image basis are the captions, titles and alternative text.
Enjoy your weekend,
BillJuly 13, 2013 at 11:27 #12346Christine DonaliesParticipantThanks as usual Bill!
-
AuthorPosts
- The topic ‘Getting text to wrap around pictures.’ is closed to new replies.