WordPress.org

Ready to get started?Download WordPress

Forums

Line spacing on about page (21 posts)

  1. rebornsails
    Member
    Posted 3 years ago #

    Hi,

    I am very new to wordpress so bear with me. I searched to find an answer but couldn't find a topic that addresses this problem although it is probably out there.

    I am typing paragraphs and would like line spaces in between. Sometimes several line spaces. When I do this however, no matter how many lines i put in the WYSIWYG when i save the page it only displays one break between paragraphs.

    Also, the theme keeps putting an automating paragraph indent after each break. Can i get rid of this?

    I am using the Constructor theme.

    Thanks

  2. rebornsails
    Member
    Posted 3 years ago #

    Please anyone, just spent like 2 hours trying to fix this.

  3. mcbuzz
    Member
    Posted 3 years ago #

    There are different ways to handle this. If you want space between paragraphs throughout your site, you can modify the Constructor style.css file.

    Save a copy of the original style.css file in case anything goes wrong so you can restore the original. Open style.css in a text editor like notepad (for PC) and find

    .hentry .entry p{
        text-indent:12px;
        margin-bottom:4px
    }

    Change it to

    .hentry .entry p{
        text-indent:12px;
        margin-bottom:16px;
    }

    Save the file as style.css (that is, don't change the name). If you are using Windows, make sure it doesn't add .txt to the file name. Now use FTP software like WS_FTP (there's a free trial) or Cute FTP on a PC to upload style.css and copy over the existing style.css.

    You can adjust the margin-bottom value to your liking. Try 16 and see how it looks.

    I'm assuming you know how to use FTP software, but that might not be true. Let me know if not.

    You can also do this "manually" using in-line CSS. That's fine for once or twice, but if you want your changes to apply to all paragraphs, it's better to use the method above.

    For in-line, in the HTML editor window of WordPress, you can do this to a paragraph.

    Say you have some text like this.

    Put the follow code before and after it.

    <p style="margin-bottom:16px">Put the follow code before and after it.</p>

  4. mcbuzz
    Member
    Posted 3 years ago #

    Oops. I meant "put the following code" not "put the follow code"

    <p style="margin-bottom:16px">Put the following code before and after it.</p>

  5. mcbuzz
    Member
    Posted 3 years ago #

    As for eliminating the automatic indent, please give your URL so I can see what you mean and I'll see if I can find the CSS responsible for it.

  6. rebornsails
    Member
    Posted 3 years ago #

    Great I will try this and get back to you.

    Is there a way to control the amount of space between paragraphs on a case by case basis? Inserting '
    ' doesn't seem to be working.

    My site is rebornsails.com.

    Thanks

  7. Chase Adams
    Member
    Posted 3 years ago #

    What a brilliant concept! Good luck in your reborn sail venture.

    Can you give a specific page and paragraph so as to see what kind of case by case you mean?

    I would create a class called "deep-margin" or something along those lines and give it a larger margin.

  8. rebornsails
    Member
    Posted 3 years ago #

    On my about page I would like to list the Brands and some info about them. When I do this now, well you can see the results. If i could customize a way to put more line spaces after the descriptions then it wold look normal.

  9. Chase Adams
    Member
    Posted 3 years ago #

    In your case, open your stylesheet.css and use

    body.page-id-2 p { margin: 20px 0; }

    where 20px can be adjusted according to your preference. It will adjust both top and bottom margins of the paragraphs on About page.

  10. mcbuzz
    Member
    Posted 3 years ago #

    The case by case technique is the second one above.

    Use the HTML editing window. Find the paragraph you want to add more space above and/or below, and insert the HTML <p> tag around it like this:

    '<p style="margin-bottom:16px">This is your paragraph text.</p>'

    This adds 16 pixels of space below the paragraph. To add space above and below, you can use margin-top and margin-bottom like this:

    '<p style="margin-bottom:16px; margin-top:16px;">This is your paragraph text.</p>'

    Be sure to click the Update button when you are finished.

  11. Chase Adams
    Member
    Posted 3 years ago #

    The only reason I recommend not using inline styling: If you don't like it, that's a LOT of changes overtime.

    @mcbuzz's recommendation WILL work, but in the long run it's better to make global calls to elements through your stylesheet, particularly when you want to give a uniform style to more than 3 elements.

  12. mcbuzz
    Member
    Posted 3 years ago #

    Note that you don't need the single quotes on either end. It should look like this in your HTML window.

    <p style="margin-bottom:16px; margin-top:16px;">This is your paragraph text.</p>

  13. mcbuzz
    Member
    Posted 3 years ago #

    @Chase Adams is right. The global technique is best for anything but a one-time change. I don't know @rebornsails website URL so I can't look at the CSS.

    I looked at the Constructor theme and assumed that
    '.hentry .entry p{
    text-indent:12px;
    margin-bottom:4px
    }'
    was the right general paragraph formatting. But @rebornsails - if you tell us your URL, I can check.

  14. Chase Adams
    Member
    Posted 3 years ago #

    URL is rebornsails.com [noted earlier in thread]

    I think the best solution may be a hybrid of the two suggestions:

    body.page-id-2 .hentry .entry p {
    margin-bottom: 20px;
    }

    This will ONLY change the margin for the paragraphs on the About page. If you want to use it sitewide, just remove the .page-id-2.

    @mcbuzz be sure to use the ` mark for code, it's just below your escape button.

  15. mcbuzz
    Member
    Posted 3 years ago #

    @Chase Thanks! I thought is was the ' single quote. Now I see it. So that's what a backtick looks like.

  16. Chase Adams
    Member
    Posted 3 years ago #

    No problem!

    It took me a long time to figure it out on my own. It would have been nice if someone had let me know.

    It's all about pushing the community forward, so thanks for your involvement in the forum!

    -----------------------------
    Chase Adams
    The Chase Scene | Chase Your Passion
    Do You have a gravatar? Set it up!
    Twitter — @realchaseadams

  17. rebornsails
    Member
    Posted 3 years ago #

    Thanks guys, all of this info helps a ton. Ill repost when completed.

  18. rebornsails
    Member
    Posted 3 years ago #

    Ok it still isn't doing what I would like it to do exactly. I used

    <p style="margin-bottom:75px; margin-top:75px;">

    it seems to be adding spaces everywhere.

    Is there any way to include some thing like a
    code where needed?

    Or maybe i need to think about this in a whole different way and display the info on a different type of page or something?

  19. rebornsails
    Member
    Posted 3 years ago #

  20. Chase Adams
    Member
    Posted 3 years ago #

    If it's just that paragraph you want to give a margin, why not remove the top margin? It may fix what you're asking...or give it a margin of 25-40...not 75.

  21. rebornsails
    Member
    Posted 3 years ago #

    I figured it out. Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Topic