Support » Fixing WordPress » Get a blank line after div by simply leaving an empty line in the editor

  • Resolved giannit

    (@giannit)


    I’m styling a div object so that its content behaves like a normal text.

    As first thing I set its line height as the default line-height of a line in a paragraph.

    I got this by adding the following css code

    .myclass div {
        margin: -1.43em 0 -0.93em 0;
    }

    In this way, by writing this in the WP editor

    badp
    <div class=myclass>badp</div>
    badp

    the vertical spacing is changed as shown in the image

    _______________________

    Next I’d like that an empty line after the div in the editor will correspond to a blank line in the webpage. That is, I’d like that by writing

    badp
    <div class=myclass>badp</div>
    
    badp

    the vertical spacing will be changed as shown in the image

    I know that this can be obtained by inserting &nbsp; in the empty line, but is it possibile to achieve it by simply leaving an empty line as we usually do for normal text?

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator bcworkz

    (@bcworkz)

    White space beyond a space between words is ignored in HTML. It’s a little different in the editor, but if there’s nothing on a line, then the line does not exist šŸ™‚ You need to add a break tag or non breaking space or something if you want to preserve a blank line.

    You could style the div to have an extra margin at its bottom, but it will always be that way for all occurrences. The div would need a different class to not have the extra margin.

    Thread Starter giannit

    (@giannit)

    @bcworkz Thank you for the reply!

    You need to add a break tag or non breaking space or something if you want to preserve a blank line

    Are you talking about the div case only? Because if in the editor I write a word, then i press enter two times and then I write another word (3 lines total: word, empty, word), then the webpage will show the same 3 lines, right?

    The div would need a different class to not have the extra margin.

    Do you mean that I need to create another class, say new-line whose css will be something like margin-bottom: 0.5em and add it to the div (that is, write <div class="myclass new-line">) which I want to have an empty line below?

    • This reply was modified 1 year, 8 months ago by giannit.
    Moderator bcworkz

    (@bcworkz)

    Before we get into esoteric details of editor behavior, which editor are you using? Classic? Block (Gutenberg)? A page builder of some sort? And if the block editor, are you typing into the default paragraph block? Or are you in code mode?

    In any case, I prefer to explicitly create what I want instead of relying on the editor to add or not add things behind the scene. However, not everyone is able to explicitly enter the correct HTML when creating content.

    Additionally, WP runs content through the wpautop() function which adds paragraph tags to blocks of text, which can thwart your desires in some cases.

    If you frequently enter custom HTML into content, you might consider some custom shortcodes. Instead of entering <div class="myclass new-line">, you could create a shortcode where you only need to type [div-half] or what ever is easy to remember.

    Thread Starter giannit

    (@giannit)

    @bcworkz I use the Classic Editor plugin, I prefer to have high control on the content.

    About wpautop just few days ago I installed the plugin Toggle wpautop which let the user decide to disable that function in a specific post or page.

    To obtain what is showed in the second image I created 2 simple CSS classes

    .div-as-span {
        margin: -1.5em 0 -1em 0;
    }
    .bspace {
        margin-bottom: 1.5em;
    }

    and the HTML is

    badp
    <div class="div-as-span bspace">badp</div>
    
    badp

    How to create a shortcode whose text is fully customizable? I have a plugin to create blocks of content but I cannot decide the name of the shortcodes.

    • This reply was modified 1 year, 8 months ago by giannit.
    Moderator bcworkz

    (@bcworkz)

    Have a look at the Shortcode API. The code can go in your theme’s functions.php or into a simple custom plugin. The one mistake many make is trying to echo out content from the handler function. All output needs to be collected into a variable which is returned by the function. Shortcodes can be customized either by passing attributes or through enclosed content. But if you get too fancy with them, it’s harder to remember the right syntax. At some point you may as well type the HTML directly.

    The names can be anything you like as long as they are not already used by WP, like [gallery].

    Thread Starter giannit

    (@giannit)

    @bcworkz Thank you very much it worked and it is very simple!

    Can I ask one more thing? I’m adding QTags button to the WP text editor, and I’d like to customize the color of the buttons.

    For example this one

    QTags.addButton( 'red', 'red', '<font color=red>', '</font>', '', '', '1' );

    is showed as , is it possible to have red written in red color ?

    • This reply was modified 1 year, 8 months ago by giannit.
    Moderator bcworkz

    (@bcworkz)

    It’s likely. Use you browser’s Element Inspector developer tool to determine the correct CSS to do so. Place the rule in an admin stleysheet that you create. See https://codex.wordpress.org/Creating_Admin_Themes#The_Admin_Style_Sheet

    Thread Starter giannit

    (@giannit)

    @bcworkz Thank you very much for support!

    I inspected the button with the browser tool and I was easily able to change its color as you can see here

    So then I opened the file style.css and added this small code

    .qt_content_center {
    	color: red;
    }

    I refreshed the page and I verified that the file was loaded, but the button color was not changed.

    This is how the buttons appear in the inspector tool

    <div id="ed_toolbar" class="quicktags-toolbar" style="position: absolute; top: 87px; width: 702px;">
        <input type="button" id="qt_content_collpasible button" class="ed_button button button-small" value="BTN">
        <input type="button" id="qt_content_content" class="ed_button button button-small" value="CON">
        <input type="button" id="qt_content_center" class="ed_button button button-small" value="center">
    <div>

    Maybe to style the buttons the code have to be placed in the functions.php file, but there css code doesn’t work, does it?

    • This reply was modified 1 year, 8 months ago by giannit.
    • This reply was modified 1 year, 8 months ago by giannit.
    Thread Starter giannit

    (@giannit)

    It can be done with this in function.php file

    function my_custom_admin_styles() {
      echo '<style>
        #qt_content_center { color: red; }
      </style>';
    }
    add_action('admin_head', 'my_custom_admin_styles');
    Moderator bcworkz

    (@bcworkz)

    Yeah, adding to style.css causes the rule to be overridden by admin styles. The recommended way to get the stylesheet precedence correct is a bit involved. Throwing the rule into an inline style is effective because such styles always take precedence over external stylesheets. Very effective for a small rule set. Nicely done!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Get a blank line after div by simply leaving an empty line in the editor’ is closed to new replies.