Getting text to wrap around pictures.

Support Area Forums Moonrise Getting text to wrap around pictures.

Viewing 10 posts - 1 through 10 (of 10 total)
URL to the page in question:
  • Author
    Posts
  • #11931
    kevin lillestol
    Participant

    How can I get text to wrap around pictures in moonrise. I see left, right and center options.

    #11935
    Bill Robbins
    Moderator

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

    #12293
    Christine Donalies
    Participant

    I’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.

    #12294
    Bill Robbins
    Moderator

    Christine 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.

    #12296
    Christine Donalies
    Participant
    #12297
    Christine Donalies
    Participant

    Actually 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.

    #12300
    Bill Robbins
    Moderator

    Christine,

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

    #12337
    Christine Donalies
    Participant

    Hi 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~

    #12342
    Bill Robbins
    Moderator

    Christine,

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

    #12346
    Christine Donalies
    Participant

    Thanks as usual Bill!

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Getting text to wrap around pictures.’ is closed to new replies.