Support » Plugin: Shortcodes Ultimate » Displaying Text With HTML Formatting In Lightbox

  • Hi,
    I’m wondering if there was any way to utilize the Lightbox shortcode and instead of content like an image or streaming video to just have text in a frame.
    So, when I click on the button on the page, I want to have a Lightbox pop up and even be able to specify the height and width of the frame just displaying text in the frame itself. The code I was trying to use was:

    [su_lightbox src="Text here with some <a href='' target='_blank'>links here</a> and some more<br>and some more<br>stuff everywhere."][su_button]Example[/su_button][/su_lightbox]

    And I don’t think that’s the right way to do this. I did also try the [su=lightbox type="inline" method and was met with identical results.

    I have about 14 lines (separated by "<br>") and when I look at the preview of the page, the first 3 lines are gone, the fourth line – which should be text that is hyperlinked – is just plain text, and the rest of the content renders fine. The links display and act properly (which I was nervous about because being within the entire src=” ” section having to use just a single ‘ mark), but are displayed right there on the page. And in line with the last line of the content is this:

    " data-mfp-type="iframe"> (or " data-mfp-type="inline">)

    And directly in line with that is the button I had, which renders as it should look. Now the weird part is that when I click on the button or on any line on the page between lines 6 and the final line, the page darkens as it normally does with a Lightbox, and the first three missing lines of text are displayed all the way to the left of the page, vertically centered, and even selectable. If I try to select the text, the page goes back to normal, though. I double- and triple-checked all my code to make sure I closed every bracket and quotation marks, and even used an HTML checker and everything is fine.

    Wondering if there is any way to create a frame for text to be displayed as a Lightbox using the shortcode (or even the long code).

Viewing 9 replies - 1 through 9 (of 9 total)
  • I was wondering the same problem. Finally, I have found the next solution:

    [su_lightbox type="inline" src="#test-popup"]
    <!-- The link that open a lightbox-->
    <h2>Click Here For Your Lightbox</h2>
    <!-- A hidden layer that contains the content you want to add-->
    <div id="test-popup" class="white-popup mfp-hide">
      Popup content


    You have to add the next CSS code according with the documentation:

    .white-popup {
      position: relative;
      background: #FFF;
      padding: 20px;
      width: auto;
      max-width: 500px;
      margin: 20px auto;

    Remenber adding mfp-hide to your hidden layer, because this class hide the layer.

    Okay, that CSS code goes where? Would I be able to access and edit the necessary CSS file from the WordPress editor or would I need to use FTP?
    Also, would I need to install a different plugin in order to accomplish that? It would be great to accomplish that with just the Shortcodes Ultimate plugin alone.

    Ultimate Peter


    Update (more efficient method): used by me at
    Yeah, this lightbox deal was bugging me. I need to place several inline html chunks in lightboxes on the same page. There is no documentation on this really. The above will work, however the solution is a little inefficient. This would mean you have to add CSS to your theme file for every new div you want to turn into a lightbox. I need multiple inline popups on one page, so the above solution would mean I have to create new CSS for each different div.

    I did some tinkering and came up with a way to only edit the CSS of the plugin once.

    Here’s what you do:
    1. Navigate to /wp-content/plugins/shortcodes-ultimate/assets/css/magnific-popup.css
    2. Go to line 53, which should look like this:

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
      width: 100%;
      cursor: auto; }

    and change it to look like this:

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
      width: 50%;
      background: #fff;
      padding: 25px;
      border-radius: 25px;
      cursor: auto; }

    3. That’s it, now a special note when you are creating the code for the post with inline. It will look like this:

    [su_lightbox type="inline" src=".church"]here is the button[/su_lightbox]
    <div class="church mfp-hide">
    this is the inline content

    -“church” is the made up identifier that the lightbox calls. With this method, you just make a unique identifier for each inline lightbox on the page.
    -Each lightbox div will also use class “mfp-hide”
    -mfp-hide is a class that I found already resident in magnific-popup.css
    I played around and found that when you use it, it force-hides the div on the page, but allows it to change to “display: block;” when it opens the lightbox. I tested it and it is great now! I can put the six seperate page popups in!

    YAY! Do this change and use the two classes, and it will work every time without further CSS creations…

    Of course, buttons work best, instead of regular text, because then it is obvious you must press it.

    Keep in mind, if you update the plugin, it will probably overwrite this.
    Suggestion: keep the css code somewhere saved to redo the change, or ask the author to incorporate it.

    That worked great; thanks Peter!

    That is exactly what I was looking for – totally worth the extra code haha
    I’ll be sure to backup the stylesheet to re-upload when the plugin updates.

    I’m guessing that adjusting the border-radius size would change how rounded the corners of the lightbox are, correct?

    Great stuff, thanks again!!

    Outstanding! I’ve been thinking about this for a while myself.

    Thanks so much!!!

    Thank you! This is exactly what I’m looking for (and I’ve been looking on-and-off for a few months now for a relatively light-weight solution to modify a theme.

    Ultimate Peter


    I forgot to update this post:
    A better way to do the CSS, is just to add it under:
    Shortcodes –> Settings –> [the text area for CSS]
    Then hit save.

    Somebody pointed this out to me on another thread, then you don’t have to re-add it after a plugin update.

    Put this there:

    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
      width: 50%;
      background: #fff;
      padding: 25px;
      border-radius: 25px;
      cursor: auto; }

    Wonderful; thanks again!

    I think it’s a better approach put CSS code in your theme (for example, the style.css).

    If you modify the original CSS of the plugin, you will probably lose the code in a future release. And if you put the code in the settings, you will make harder find the place where the code is stored if your are not the developer who wrote it. And after a year, will you remember where you put the code?

    Peter, you don´t need to write CSS code for each lightbox. You only have to reuse the same class. Is the same solution, but i am keeping separating the classes responsible of theming from the classes responsible to make work the lightbox.

    And the last tip: instead of using class attributes to identify the lightbox, it´s better use the id identifier of your tags. The class is not unique and reusable, but the id attribute is UNIQUE.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Displaying Text With HTML Formatting In Lightbox’ is closed to new replies.