Paragraph spacing

How can I adjust the line spacing and paragraph spacing throughout the template? If I just do one return, the spacing is too small. I have to hit return twice to make a space in between paragraphs. While I am editing, one return looks like it should be enough space, but the lines are too close once I look at the site.

I want to just be able to hit return once in between paragraphs.

I created an example for you to look at.

One example is what I see in the editor. The other is the same using Firefox on the Mac.

I am using JCE editor.

Thanks in advance.

Work in progress site: http://www.chicagopaws.com/Joomla2/

I'm surprised this question below hasn't been answered yet as the both of us cannot be the only ones who have this issue.

So here it goes again.... How do we edit the CSS to get proper paragraph spacing???

I looked in Firebug but didn't see anything which seemed to make sense.

Please respond. Users of this template shouldn't have to add an extra hard enter for each paragraph.

Hi

If you want to increase line height in general, just add this line on template.css file (for example):

Code: Select all

p {line-height: 30px;}

If you want to be more restricted, you must identify the elements that you want to apply this rule.

About topics not answer in forum, it's possible some of them are miss, because there are many requests. Also, sometimes the same issue is reported on forum and also on our Help Desk support system. One is replied, the other is not.

Cheers

I add your code at the end of the template.css like this

p {line-height: 30px;}

But this has no impact on this mentioned problem. Or is there an exact position where to add this rule?

Hi

Please add imporant! rule maby.

Code: Select all

p {line-height: 30px !important;}


Hi,

this fixed the issue in the backend. But how to fix that within articles on frontend? Backend line returns and frontend results are looking different...

Hi

Please tell me exacly in which file You have placed this code ?

I've placed the code into: /templates/gk_corporate2/css/template.css at the very end (last line)

spacing.jpg

Hi

Ok. I can see that the code has been overwritten by this:

Code: Select all

.article-content p {
    line-height: 20px !important;
}


So please replace it to that.

Please also clear cache and disable css compression and cache because I do not see the changes in last line of the template.css

Hi,

good to see there's some dialog on this issue. I noted the suggestion below about line-spacing. However, that's not really a solution as that just increases the vertical spacing between all lines of text.

I believe the issue is that when you have the closing P tag, you should get a hard enter, just like when you type in word etc. However, right now, that's not how the template css behaves. Please note:

http://jonow.org/~bamboo/index.php?opti ... 10&lang=en

I can manually change this by doing a double hard enter in the editor, and then i looks fine, but that's a lousy hack. I'd much rather have a proper CSS file where my enter acts like it's supposed to.

So, any takers? Any suggestions for how to modify the template.css to do this? It should be simple, no? I mean, this is a standard paragraph formatting. I don't understand why this otherwise excellent template has this problem.

Hi

Replace by

Code: Select all

p {line-height: 20px !important; margin-bottom: 10px}

many thanks for the very quick reply, that did the trick!

I'm confused by this different suggestions:-(

What is the final, best css-solution to have a return on my keyboard in the backend that results in a return of an frontend-article??? (Corporate 2 template)

Currently the spacing between one paragraph to the other is too much in the frontend.

I've changed the template.css's last line into this:

.p {line-height: 20px !important; margin-bottom: 10px}

Hi

I think the easiest would be to see it with firebug and set the same value for the fronteand as it's in the editor.

If You do not know how to please give me an access to Your site and tell for example on which article to check this.

Hello, I tried it with Firebug several times, but didn't find the rule. I'll PM you access to the working-site.

Hi

I've made some measures and I believe this code would be the best values for this case.

Code: Select all

.article-content p {
    line-height: 175% !important;
    padding-bottom: 9px !important;
}


Hello,

I've put this code into the last line of the template.css and it is looking much better in front- and backend. I think other user would like to see the same. Updating template with this?
Thanks.

Hi

I'll suggest it to developers, but most of users are treating editor as a content implementator and the frontent as a completly different thing, so will probably not notice this change