Birdseye 2 -- How to change spacing between paragraphs

[Bruce_Siegel]

When I go into the code editor, I see a list of categories and sub-categories, and I have no idea where to find the relevant code, or exactly what to enter. Thanks in advance!

[MJCS]

Hi @Bruce_Siegel,

In the Weebly editor, click on Theme, then Change Fonts, and then under General, click Paragraph Text. In there you can set the line height - you'll have to experiment with a figure that suits your taste/site's design.

If you're looking to change the spacing between each paragraph (instead of the line height within the paragraph) I would need to provide you with some extra CSS code to add to your style sheet. In that case I would need to know the address of your website. Please let me know if you need any more assitance.

Cheers, Mark

[Bruce_Siegel]

Thanks for the quick response, Mark! This has been driving me crazy.

I am indeed looking to change only the space between paragraphs, not the overall line height. My site address is:

http://www.brucesiegel.net/

If you could send me that code I'd really appreciate it! (And also explain how to find the proper selector in the Code editor.)

Thanks!

[MJCS]

Hi @Bruce_Siegel,

Adjusting the spacing between paragraphs depends on how you entered them into Weebly. I'll explain a number of ways you can tweak it.

1. Easiest method is to simply add an extra space [ENTER] between the paragraphs as you type. This is not adjustable - your space is defined by the line-height setting.

2. Use a separate text box from Weebly's build palette and add a spacer manually after each paragraph. This is probably the best method to have control without using CSS although it can be hard to be consistent with the space size unless you copy each spacer element and drag them to the appropriate spot (instead of creating new spacers each time).

3. The CSS hack. This should work although a <br> is an element that is NOT usually defined separately and some browsers might not handle it as you desire. If you want to use this method add the following rules to the bottom of you CSS file:

br {
  content: "";
  margin: 5em;
  display: block;
  font-size: 1em;
}

Like I said, it's not the norm and it's a little bit naughty in terms of proper CSS but it will produce the results you want. Please also feel free to adjust the margin number up and down and you can use fractions of an EM too, eg., 4.3em;

I hope that helps,

Regards, Mark

[Bruce_Siegel]

Thanks, Mark. I've been experimenting with pressing "return" between paragraphs, but that ends up separating the paragraphs too much, in my view.

I tried your second method, but you can only add a spacer between paragraphs that have been entered into separate text blocks—and they're already separated by the same distance as paragraphs within the same block.

As to your third method, I'm confused. I thought adjusting the distance between paragraphs was a routine procedure! And I thought it was controlled by changing the padding. I found this on another site, not connected with Weebly, in  connection with paragraph spacing:

"In your style sheet you need to look for your paragraph rules. It will look something like this:
p {
    line-height: 1.5;
    padding: .5em 0;
}
In the padding section, if you add a third number or if you already have a third number you can adjust it. The first number deals with the top, the second is the right, the third is the bottom and a fourth would be the left. Hope this helps."

So can't I do something like that? I would try it, but I can't find the selector. Can you help me use the code editor to navigate to it?

Also, what do you mean by:

"add the following rules to the bottom of you CSS file"

Where do I find the CSS file and how do I navigate to the bottom of it?

Thanks!

[Bruce_Siegel]

Mark, I can't edit the reply I just made, so after you read it, here's an additional point. I found this, in connection with the birdseye theme (I would try it, but I can't find a similar selector on the birdseye 2 theme I'm using):

"To modify your paragraph spacings inside the main content:

.main-wrap div.paragraph {
	padding: 0 0 20px;
}

Modify the last value (20px) which is for the bottom padding."

[MJCS]

Hi @Bruce_Siegel,

You're correct in thinking that:

.main-wrap div.paragraph {
	padding: 0 0 20px;
}

would change the padding at the end of your paragraph. It will (although 20px will not appear significant with your current line height). Changing that to a larger number (200px in my example below) will make the change obvious. However, Weebly treats each TEXT box as a separate paragraph So you will only see the effect at the top and bottom of each paragraph, not between your paragraphs within the TEXT box. For example:

The only CSS solution that I can think of is to set a rule for the <br> element. <br> is a line break; effectively when you press enter. Your paragraphs within the TEXT box are actually two consecutive <br> elements:

So the solution is as described in my first response. As to where to put it...

In the Weebly Editor, click on Theme. In the bottom-left corner of the Theme page you will see 'Edit HTML / CSS. Click on that and wait for the next page to load (can take a few seconds depending on your site). Now find the STYLES heading on the left and then under that heading you should see a file call 'main.css' or 'main.less', or 'main-style.css'. Click once on that and you should see the CSS appear at the top of the split screen to the right.

Be careful not to delete anyting in there....scroll all the way down to the bottom of the CSS code (rules) in the right-top window. It looks like about line 306 will be your current last bit of code.  Add a couple of lines to the bottom of your CSS file by clicking after the last bit of code on line 306 and press [ENTER] a few times.

Then add in (copy and paste) the code I suggested in my first post, click Save, and then Publish your site.

If you are unsure of any of my instructions, or your page doesn't appear as I have described, please let me know and we can try to sort it out.

Regards, Mark

[Bruce_Siegel]

Thanks, Mark.

On the screen that appears at Styles: main.less, there's very little. Just this:

1 @import '_resets'
2 @import '_fonts';1
3
4 @import '_global'
5 @import '_nav';
6 @import '_page-types
7 @import '_ui-kit';
8 @import '_commerce';
9 @import '_blog';

10 @import '_responsive';

11

That's all that appears on that screen. Should I add the code after this? And delete that number 11?

There's also a global.less with about 223 lines. Could that be the place?

Also, it occurs to me: if I style the break tag that way, will that affect all breaks throughout the site?

Thanks!

[MJCS]

Hi @Bruce_Siegel,

yes, adding that style rule will effect the entire site. If you want it to effect only individual pages you can add a slightly different rule to each page:

In the Weebly editor, click on Pages and then click again on the name of the page to which you want to add the CSS rule. You should then see a button on the left called SEO Settings. Scroll down on the left until you see a window titled HEADER CODE. Paste the following code to that box, and then click Publish.

<style>
br {
  content: "" !important;
  margin: 5em !important;
  display: block !important;
  font-size: 1em !important;
}
</style>

 This is actually a 'safer' way to overule your CSS if you're not confident with 'coding' as it can be easily un-done by deleting the content that you added. 

Let me know if that works, otherwise you can try adding the original CSS to the end of the global.less file which should do it for the entire site.

Cheers, Mark

[Bruce_Siegel]

Mark, thanks so much for the time you've spent answering my questions. But it's dawning on me that I may have a bigger question: whether Weebly is the right platform for me. That's partly because of the issue we're discussing, but also because of some other drawbacks. My site is a blog, and it seems that Weebly has no sidebar widget for showing recent blog comments, which is important to me. I'm also learning that there's no way to back up blog comments—and possibly not posts either.

So I'm beginning to wonder if may I need to use Wordpress, with perhaps a page builder like BeaverBuilder. I'm feeling a bit frustrated and disappointed, because I love the look of the Weebly page I quickly put together. But I need to be practical about what's going to work for me going forward.

If you have any thoughts on this, I'd love to hear them!

[MJCS · Accepted solution]

Hi @Bruce_Siegel,

I've never used the blogging function beyond the occasional post. I use it as a notice board for students and link the RSS feed to digital signage. We delete the blog posts once the event has passed. Hence I'm not really one to give advice on blogging with Weebly except to say I know a lot of people use it successfully in that way.

It does however sound like you're heading down another path with regard to your need for total flexibility. I have only used WP on two sites, and I found them a little frustrating to edit and maintain, but it does have a significant following and it is a good fit for some. I use Weebly for many reasons but one, is because I want my collegues (who have zero idea of HTML / CSS etc,) to be able to contribute to the site. I have no experience with Beaver Builder; it looks like it might help with the complex layout and coding issues associated with WP, but Weebly does those things too.

It might be worth you talking to a professional website builder (I'm not a pro!) in your area to see what they can suggest/offer in terms of meeting all your requirements - a lot will help you set up Weeby. I have no doubt Weebly could meet your needs, but maybe not straight out of the box.

Best of luck with these dilemmas.

Regards, Mark

[Bruce_Siegel]

Thanks, Mark! I  appreciate your taking the time to help me figure these things out. Hopefully between Beaverbuilder and Wordpress, I'll get that balance of ease, combined with unlimited options, I'm looking for.

[beren3]

I realize this is an old post but ...

I'm trying to add text to a weebly webpage from Word. I realize that is an issue so I saved a clean text file. When I copy it in, the text looks fine except for not having first line paragraph indents.

Is there any way to get the first lines of each paragraph to indent? The line breaks (br) are there. I tried various options using the custom page br style as above, but adding text-indent, but it doesn't seem to work?

[Adam7]

You'd probably need to add a little css tweak to the site to make it indent the text in a text element. You'll also need to split your text into multiple text elements so that each one is indented properly. Is the page of your site live with this text, @beren3?

[beren3]

Thanks for your reply. Splitting the text really isn't an option (unless it can be done in Word) because it is hundreds of paragraphs, and to set up each one of them in separate weebly page text boxes (if it would even allow that many) would take days (it often takes 1-2 minutes to add each element to a weebly page, it refreshes so slowly).

What I've done in the meantime is use the scribd option to upload a word file. Other than the odd page breaks and slow loading, it's not too bad. I've heard that it doesn't show up well on mobile, but I don't have any way of testing that.

I found it surprising that there is no simple way to do this, but I understand it is  a CSS issue, not a weebly issue.

[Adam7]

Yea, it's one of those interesting but sometimes frustrating differences between text on the web versus text in print (or documents in this case).

[kcbenson1]

No, it's totally a Weebly issue. CSS already has a way to set first-line indents and space before or after. The problem is that in Weebly when you type a return (hit the Enter key) or paste a paragraph you don't actually get a paragraph. You get a <br>, a line break. Line breaks don't begin new paragraphs, so the first-line indent doesn't happen and there is no extra space.

Why? Client wants to use this because she thinks it's the easier option. I'm telling her it's probably got some limitations. Yeah, like you can't have paragraph indents.