Need help? Check out our Support site, then


Reduce spacing between paragraphs

  1. Is there a way to change the CSS to reduce the amount of space between paragraphs in the text of a blog post?

    The blog I need help with is lisanowak.wordpress.com.

  2. Certainly. To reduce the space between paragraphs for the Twenty Ten theme, add the following to your Appearance → Custom Design → CSS editor:

    #content p,
    #content ul,
    #content ol,
    #content dd,
    #content pre,
    #content hr {
    	margin-bottom: 12px;
    }

    Change the 12px number until the spacing looks good to you. It was 24px by default in the theme.

    Note that this will adjust the spacing below paragraphs as well as a few other types of elements. I used the selector list you see above because that's what I found the theme was originally using when I checked the original stylesheet (linked in the settings section on the CSS Editor page).

    Another really handy tip is to use browser tools to view CSS. Most modern browsers have them built in. Try right-clicking an element on the page and select the "Inspect Element" option. It will show you the HTML for what you clicked on as well as all the CSS rules that apply to it.

  3. Thank you so much, Designsimply. :) That worked great. I have a few other questions if you have a moment.

    1. When I use an image in a sidebar with a text box directly under it, it puts a lot of space between the two. Is there a way to eliminate this?

    2. For some reason, now that I've changed my CSS, some of my photos are centering with the "center" command and some are aligning to the right. Also, some of them are staying full-size, regardless of what I do with the percentage resizing tool. I think the size problem is mainly if I have a photo as the very first element on a post, but the center thing seems arbitrary. I thought it might be because it was centering across the entire page instead of the column, but that doesn't make sense considering the results are inconsistent. Any ideas of what's going on?

    3. Do you know how to change the color of the menu bar and menu bar text?

    With any of these things, if it's easier to just tell me what to look for in the stock CSS for the theme, I can play around with modifying it myself. I'm just not sure what these things are labeled as, and it's hard to figure it out just looking through the 25 pages of code.

    Thanks so much for your time. I really appreciate the help.

  4. First, (for next time) would you mind posting each question into a separate help request in the forum in the future? It helps to keep conversations streamlined, makes future searching easier, and it's easier to have a conversation about one thing at a time since replies are linear. I generally go through help requests oldest to newest, so I'll get to the questions in this page as soon as I review a few others that were posted before you.

  5. 1. When I use an image in a sidebar with a text box directly under it, it puts a lot of space between the two. Is there a way to eliminate this?

    Add this:

    .widget-container img.alignleft,
    .widget-container img.alignright,
    .widget-container img.aligncenter {
    	margin-bottom: 0;
    }

    The spacing left after that is the normal spacing for all widget containers.

  6. 2. For some reason, now that I've changed my CSS, some of my photos are centering with the "center" command and some are aligning to the right. Also, some of them are staying full-size, regardless of what I do with the percentage resizing tool. I think the size problem is mainly if I have a photo as the very first element on a post, but the center thing seems arbitrary. I thought it might be because it was centering across the entire page instead of the column, but that doesn't make sense considering the results are inconsistent. Any ideas of what's going on?

    Please start a new help request for this one and make sure to link to an example where we can see the issue happening live.

  7. 3. Do you know how to change the color of the menu bar and menu bar text?

    Here are some steps to use to change out the menu colors for the Twenty Ten theme:

    1. Open the style.css file for the Twenty Ten theme: https://s1.wp.com/wp-content/themes/pub/twentyten/style.css?m=1350959245g&minify=false
    2. Find the "=Menu" section and copy it
    3. Paste it into a text editor and remove everything that's not color-related
    4. Edit the colors as you see fit
    5. Add the edited CSS to the bottom of your Appearance → Custom Design → CSS editor

    Let me know if you have any trouble with those steps!

  8. With any of these things, if it's easier to just tell me what to look for in the stock CSS for the theme, I can play around with modifying it myself. I'm just not sure what these things are labeled as, and it's hard to figure it out just looking through the 25 pages of code.

    You should definitely start using the web inspector in your broswer tools. All of the latest browsers have one and you can usually access it by right-clicking on an element and selecting the "Inspect Element" option. It will show you the HTML of the thing you clicked on as well as all of the CSS that applies to it. It's *very* handy.

  9. Aside: The best way to make CSS updates on WordPress.com sites is to select the "Add my CSS" option on the Appearance → Custom Design → CSS page and then just add in small CSS snippets for changes you want to make that are different from the original stylesheet. You would just want to use the original stylesheet as a reference and not copy and paste the entire thing into the CSS editor. Also, watch out for syntax mistakes. You shouldn't use the same url() values that the style.css uses because the custom CSS is in a different location and relative paths are not the same—you'd need to use full URLs starting with http:// if you wanted to copy url() values into your WordPress.com CSS editor.

  10. Thanks, Designsimply. I figured out how to change the background color for my menu, but not the text color. I didn't find anything in "=menu" that looked like it referred to text. I copied the CSS to Word and did a search for "color" and all the codes for the colors that looked like they might be shades of white, but I still drew a blank. It seems like the codes for white all refer to backgrounds, not text.

    I was able to fix the space below the image and I'll start another thread for the issue you indicated. Also, I created a child template, and I'm editing the CSS snippets in that.

    I experiment with the web inspector, but it's going to take some more time to figure out exactly how to find what I'm looking for with that. I appreciate your help.

Topic Closed

This topic has been closed to new replies.

About this Topic