XF 2.0 Text Width on in the message

[Mackeral_Fillet]

Hi,

Is it possible to change the text width within a message?

So for example, the below boxes become margins (or indents) both left a right of the text so I have white space either side to create an improved reading layout? The text would have images above and below, I find it is easier on the eye with some white space.

 

[Mackeral_Fillet]

@Mike Creuzer using UI.X 2 - not sure if you could help?

 

[Case]

Adding something like...

@media (min-width: @xf-responsiveWide) {

    .message-body  {

        margin: 10px 100px;

    }

}

...to extra.less would probably do it. 100px is the width of the margins if you wanted to change it. The above would only trigger on larger screen sizes.

EDIT: That will add the margin to either side of the image though as well, if that's part of the post.

 

[Mackeral_Fillet]

Adding something like...

@media (min-width: @xf-responsiveWide) {

    .message-body  {

        margin: 10px 100px;

    }

}

EDIT: That will add the margin to either side of the image though as well, if that's part of the post.

Cool - that's what I'm trying to avoid!

 

[Case]

Cool - that's what I'm trying to avoid!

You're trying to avoid adding the margin to the image?

You could do it with a custom BBCode then. Call it [margin] or whatever.

Add something like this to the HTML replacement box when creating the new bbcode...

<div class="text-margin">
    {text}
</div>

Update the code from my first post in your extra.less file to be...

@media (min-width: @xf-responsiveWide) {

    .text-margin  {

        margin: 0 100px;

    }

}

Then in your post wrap the text under the image in your new [margin] bbcode.

 

[Mackeral_Fillet]

Awesome! That works so well! Thank you.

Next - any idea how to create a justfied BB code?

 

[Case]

Probably the same as above, new

bbcode...

<div class="text-justify">
    {text}
</div>

In extra.less...

    .text-justify{

        text-align: justify; 

    }

 

[Mackeral_Fillet]

Probably the same as above, new

bbcode...

<div class="text-justify">
    {text}
</div>

In extra.less...

    .text-justify{

        text-align: justify;

    }

Yes!!!​

 

[Mackeral_Fillet]

OK, another one that I cant work out.

How can I get two images to display side by side, with around a 10px gap in between, in a message?

Like this: