WordPress.org

Ready to get started?Download WordPress

Forums

[Theme Twentyeleven] Changing the paragraph spacing (21 posts)

  1. savedave
    Member
    Posted 1 year ago #

    Hi there

    I have had a search through the forums but been unable to identify the right piece of code to make this alteration.

    I would like to change the space between paragraphs, but not between lines within a paragraph.

    The site in question is at http://nadaav.com/soundasleep/sample-page/ Generally speaking whenever I have started a new paragraph, by pressing enter in the visual editor, I have created a double gap between my paragraphs - resulting in an entire empty line.

    I prefer to use enter to just go on to the next line, and if i want to create an gap of a line, to press enter twice.

    So to be clear, I would like enter to have this effect:
    to make my next line here (on the next line).

    Not to make my next line here (two lines below).

    The only time I have been able to achieve this at the moment is when I copy and paste from another document that already has this formatting.

    I hope I have managed to explain that clearly!

    thanks

  2. savedave
    Member
    Posted 1 year ago #

    A similar challenge I am having is that I would like to add a one line space at the top of all my posts and pages, or otherwise move the entire text one line further down. (This is because at present I cannot reposition my social media buttons and they are a bit too close for comfort).

    If I just press enter at the top of the page in the visual editor not gap is created on the page - is there another way to resolve that?

    thanks kindly for your help - it is really appreciated

  3. savedave
    Member
    Posted 1 year ago #

  4. savedave
    Member
    Posted 1 year ago #

    Ah sorry, url moved again. http://nadaav.com/soundasleep/the-crew/ but really it refers to the whole http://nadaav.com/soundasleep site

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you querying where you need to make the CSS change, rather than what CSS you need?

  6. savedave
    Member
    Posted 1 year ago #

    Thanks for your reply.

    I am asking what I need to do, be it CSS, settings etc. So assuming its CSS, I'd like to ask what I need to change, and where. (Sorry I don't know how to write code myself).

    thanks very much, I'll really appreciate the help.

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

    Download (and install) a Custom CSS Manager plugin to hold your CSS modifications.

    Then enter;

    p {
     margin-bottom: 1em;
    }

    Mess about with the 1 value, the smaller the value, the smaller the gap. You can go into decimal places or even minus values.

  8. savedave
    Member
    Posted 1 year ago #

    Thanks loads - will this work with the child theme I am currently using? I am happy to copt and paste/atttempt to alter code in the style.css within the child theme.

  9. savedave
    Member
    Posted 1 year ago #

    Actually I added your code into my child theme style.css and changed the margin bottom to 0 and that worked, but I realise now that I want to do the same thing to my headings - have a zero margin beneath them.

    I tried adding this to my style.css:

    h1,h2,h3,h4,h5,h6 {
    	clear: both;
    }
    hr {
    	background-color: #ccc;
    	border: 0;
    	height: 1px;
    	margin-bottom: 0em;
    }

    But it had no effect.

    Can you advise?

    Also if you have any idea on how to move the top of the text area on all the pages down a bit so they don't sit so close to my social media buttons (which I cannot move) I would appreciate it.

    Thanks for your help

  10. savedave
    Member
    Posted 1 year ago #

    Out of interest, should those changes I have made to the paragraph spacing also appear in the visual editor as I type - right now they done.

  11. savedave
    Member
    Posted 1 year ago #

    To clarify what I meant here:

    Also if you have any idea on how to move the top of the text area on all the pages down a bit so they don't sit so close to my social media buttons (which I cannot move) I would appreciate it.

    I'd like to add an extra line space at the very top and very bottom of the content of each post/page.

    thanks

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are you using a browser developer tool like the one built in to Google Chrome?
    That's all you need to answer your queries.

  13. savedave
    Member
    Posted 1 year ago #

    Sorry no, I don't really know what that is or what it is for.
    I have been using textmate for mac to edit the css but I'm a total beginner.

    I don't want to edit the actual main theme, which is what it looks like that chrome tool is for.

    To solve my other issues I have simply added code into the child theme's style.css - can that not be done to solve these issues?

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    can that not be done to solve these issues?

    Yes, that can resolve your issues regarding CSS.

  15. savedave
    Member
    Posted 1 year ago #

    Also I can't see how that tool would help me in terms of correcting the spacing inside the visual editor - the spacing is currently showing just as it was BEFORE I made the bottom margin change you recommended

  16. savedave
    Member
    Posted 1 year ago #

    I'm really sorry - I am struggling to understand how to use that tool for this purpose.

    I think I now know exactly what I am asking for though:

    I would like to reduce the line spacing and bottom margins in my h1,h2 and h3 headers. I may also need to reduce the top margin in my paragraphs.

    I have created a child theme style sheet but cannot work out what code I need to place in it and where.

    Are you able to advise me on what code I would need to alter?

    My site again is http://www.nadaav.com/soundasleep.

    thanks kindly

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    Look at this screenshot http://snag.gy/XMdjf.jpg .
    I've right clicked on the title, "You’ve found Sound Asleep – A Short Film Comedy" in Google Chrome and selected, 'Inspect element'.

    The developer tool exposes the HTML structure of the webpage and the CSS applicable to the inspected element. So, on the right you can see the CSS selectors that you need to target for that particular element. You can also see the margin that it currently has.

    In Google Chrome's developer tool, orange highlight symbolises margin and green highlight symbolises padding. Blue highlight is just the element selected.

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    You can then go forth and create a CSS style in your Child Theme stylesheet from the information presented by the developer tool.

  19. savedave
    Member
    Posted 1 year ago #

    Thanks - that's really intersting - I will take a look around using this. I can see from the sreen grab that in the example you have highlighted, that it is telling me I am in h1, and that there is a padding beneath.

    In the window below, is the code above the h1 text referring to it - it says padding bottom: 4px.

    My problem is that even if that is the code that is relevant, I am not really sure what I would need to enter into the style sheet to alter it.

    If I was editing directly into the twenty eleven them I would go to that point in the code and change 4 to maybe 1. But as I need to change it in the child theme, I am not sure exactly what code to enter to do this - is it something like:

    h1 {
     padding-bottom: 1em;
    }

    Also, can you let me know if making changes to the theme should make typing in the visual editor appear more like it will in the published site? Currently the changes I have made to the paragraph margins do not make a difference in the visual editor, and so I am sure that my fellow site authors will end up getting their spacings all wrong!

  20. savedave
    Member
    Posted 1 year ago #

    You see I am basically not a coder and didn't realise I'd need to be when I embarked on this!

    I'm not even sure if the order I enter things in my child theme style.css matters (does it?)

    thanks for helping this idiot fumble his way through a website for his film!

  21. swbusiness
    Member
    Posted 6 months ago #

    I've been having the same problem with spacing.
    Following your suggestions I tried
    p {
    margin-bottom: 1em;
    }
    and even 0em
    but nothing changed.
    I then used firebug in firefox to find the line (like you described) and I found something interesting.
    In my theme the line height and margin are defined a little differently:

    p {
    line-height: 24px;
    padding-bottom: 25px;
    }

    now using px (instead of em) and padding-bottom instead of margin-bottom I was able to make my changes.

    Thanks for the tips (and image) of the developer's tools

Topic Closed

This topic has been closed to new replies.

About this Topic