Krystal horizontal layout plug in and JD's whitespace theme incompatibilty

#1

I tried to combine Krystal horizontal layout plug in and JD’s whitespace theme.

Initially this was the result.

image
image1366×636 42.1 KB

Then i deleted CSS related to story river from the Whitespace stylesheet tiddler

So I got something like this.

image
image1363×646 39.1 KB

Still there a blank space below the story river. how to remove it ?

Here is a demo wiki

How to remove whitespace below the tiddler title in this wiki
#2

Put this in a tiddler tagged with $:/tags/Stylesheet:

.tc-dropzone>p { margin:0; }

Here’s how I came up with this solution:

  1. View your demo wiki
  2. Right-click in the blank space below the story river
  3. Choose “inspect” from the popup menu to open the browser’s “developer tools” window
  4. Note that the area you clicked on is <div class="tc-dropzone">
  5. Click the arrow next to that line of HTML to show the child elements.
  6. Note the last 3 elements are <p>...</p>
  7. Mouse over those elements to highlight the corresponding rendered content in the main window
  8. The last two <p>...</p> elements show that they have margins in the main window, accounting for the whitespace that you want to eliminate.
  9. Use .tc-dropzone>p { margin:0;} to remove these margins from the p elements that are immediate children of the .tc-dropzone

enjoy,
-e

2 Likes
#3

Wow. That was a nice learning experience. Thank you @EricShulman for the step by step instruction to solve this problem.