Get A Blank Line After Div By Simply Leaving An Empty Line In The Editor

Skip to content

WordPress.org

Forums

• Welcome to Support
• Guidelines
• Get involved
• Log in

• Welcome to Support
• Guidelines
• Get involved
• Log in

Skip to content

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

Search for: Search forums

• Resolved giannit

  (@giannit)

  6 years, 2 months ago

  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)

  6 years, 2 months ago

  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)

  6 years, 2 months ago

  @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 6 years, 2 months ago by giannit.
  Moderator bcworkz

  (@bcworkz)

  6 years, 2 months ago

  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)

  6 years, 2 months ago

  @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 6 years, 2 months ago by giannit.
  Moderator bcworkz

  (@bcworkz)

  6 years, 2 months ago

  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)

  6 years, 2 months ago

  @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 6 years, 2 months ago by giannit.
  Moderator bcworkz

  (@bcworkz)

  6 years, 2 months ago

  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)

  6 years, 2 months ago

  @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 6 years, 2 months ago by giannit.
  • This reply was modified 6 years, 2 months ago by giannit.
  Thread Starter giannit

  (@giannit)

  6 years, 2 months ago

  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)

  6 years, 2 months ago

  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.

• In: Fixing WordPress
• 10 replies
• 2 participants
• Last reply from: bcworkz
• Last activity: 6 years, 2 months ago
• Status: resolved

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics