Support » Plugin: Gutenberg Blocks Library & Toolkit - Editor Plus by Extendify » Editor Plus plugin: putting a box around text

  • Resolved rachel75

    (@rachel75)


    The Editor Plus plugin makes it easy to put a box around a text, add backgrounds, change the box edge’s color, etc. What I’m trying to do now is make the box less wide, i.e. so that if I put a shadow on the box, it will show. Right now it doesn’t. If I choose sizing and choose a maximum percentage, that works: the box gets smaller. But there doesn’t seem to be a way to then center that box. I can center the text within the box, but not the box itself. I’d like the box to be a little less wide than the rest of my text and to be centered. What am I missing?

    (I’ve tried adding <center> and </center> around the html, but that gives an error, but that’s about as far as my html knowledge goes.)

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support mohammedeisa

    (@mohammedeisa)

    Hi @rachel75,

    I need to reproduce the same issue you found. for that, can you please explain in steps how did you add the block?

    You may mention what block type(s) did you insert and which styles did you apply.

    Thread Starter rachel75

    (@rachel75)

    Here is the URL: https://rachelsruminations.com/heeswijk-castle-den-bosch/ Scroll down and you’ll see the first text box, starting with “Besides my article…”.

    The block type is paragraph. Using Editor Plus’s setting, I chose Border, set the size (4) and typed in the color code. That puts the box around the block.

    I wanted to make it stand out a bit more, so I chose Box Shadow in Editor Plus’s settings. I chose Outer and set x to 2 and y to 2, blur on 4 and spread on 1. It gives the box a nice shadow in the editor view, but not in the published post. As you can see in the published post, only the lower shadowing shows.

    Next I tried to make the box less wide (which I’d like in any case). If I choose Sizing in Editor Plus’s settings, I can change the max width to, say, 85%. The problem is, if I do that, the box stays left-justified, which looks odd. Scroll down to the next text box in the post (Starts with “If you’re planning…”) and you’ll see what I mean.

    I’d like to be able to set the max width to 85% and have it a) centered in relation to the blocks below and above and b) adjust accordingly for different size screens. It would have the further effect of showing the shadowing properly (as you can see in that second text box).

    I have a feeling there must be some simple way of doing this, but I can’t figure out what it is…

    Plugin Support mohammedeisa

    (@mohammedeisa)

    Hi,

    Please try the following:

    – Add a columns block that consists of 3 columns.
    – Add the paragraph in the middle column.
    – Select the middle column and set its width to 85%.
    – Select the paragraph and set its width to 100%.

    I hope that this works for you.

    Thread Starter rachel75

    (@rachel75)

    Yes, that’s an improvement. Thank you! If I choose the column layout that has three columns but the middle one is biggest, I don’t seem to need to set the width at 85%. No matter where I set either width or max width – 85% or 100% or don’t set it at all – the column still only takes about 50% of the space. Is there any way to widen the middle column?

    Thank you so much for your help! Are you from Editor’s Plus? A great add-on would be some way to make this possible without a work-around like this!

    Thread Starter rachel75

    (@rachel75)

    I just realized that on mobile it’s still not quite right. Even if I put either width or max width on 85%, on mobile the column is the same width as the paragraphs above and below it, which means the shadow on the right gets cut off. Somehow it’s less disturbing to me on mobile than on my desktop, but stil, there ought to be some way to make the box a bit less wide than the rest.

    Plugin Support mohammedeisa

    (@mohammedeisa)

    Hi,

    I made it work on desktop and mobile using a single column.

    So, please try the following:
    – Add a Columns block that consists of 1 column this time.
    – Set the column width to 100%
    – Add the paragraph to the column.
    – Select the paragraph and set its width to 85%.

    Thread Starter rachel75

    (@rachel75)

    No, I’m afraid that isn’t working for me. I can add a columns block with just 1 column and set the column width at 100%. But then after I add a paragraph in, it doesn’t give me the option to set the paragraph’s width. All I see in the menu for the block is typography, color settings, text settings and advanced. Selecting the paragraph doesn’t make a difference: same options.

    Plugin Support mohammedeisa

    (@mohammedeisa)

    Hi,

    Please try the steps I provided in my last reply and try the following for the paragraph block:

    – Add the following CSS in the Custom CSS editor:
    selector {
    margin-left: auto !important;
    margin-right: auto !important;
    }

    – Add the “text-centered” class without quotes to the “Additional CSS class(es)” in the Advanced settings:

    This screenshot describes the above two steps and shows that the block is centered: https://snipboard.io/38a1il.jpg

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.