I’d like to increase the spacing between lines of text and the spacing between paragraphs on my site. I’m trying to emulate the appearance of the text on this page:
I think Ben Carlo’s response here (link opens in new tab) is part of the answer. But my Dashboard options are slightly different than those described by him. I don’t see a Theme Options or Design tab.
If I go into Appearance -> Editor, I can see the following:
/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://forum.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/
/* Add your custom styles here… */
But I’m not sure where to put code. Frankly, I’m afraid to screw something up and not be able to fix it.
Dave has been very gracious in dealing with my newbie questions (hat tip to him). I fear I may eventually test his patience.
Thanks for getting in touch! Actually, on that post, the user was using a different theme than BB. I can see you are using a BB child theme. Yes, that is the place to put it, on the child theme’s style.css file. You can place your custom CSS after the line /* Add your custom styles here… */. But if you don’t want to mess things up, you can go to Appearance > Customize > Code > CSS Code and you can place your CSS there instead.
Thanks for clarifying the focus of your past post. Also, thanks for pointing me to the right place to input CSS stuff.
Can I ask you another question?
I put the following code into the space at Appearance > Customize > Code > CSS Code:
.post p {
line-height: 1.5em;
padding-bottom: 15px;
}
After saving and publishing, I refreshed one of the pages on my site. There was no change in the appearance of the text. I input other values to test - e.g. 2.5em, 45px, etc. - but again, no change.
I’m probably missing something.
Does the above CSS look okay to you? If not, would you recommend any changes?
Given that it’s Sunday, feel free to back burner this question until sometime next week.
You might want to read up on CSS Specificity. What’s probably happening is that there is another CSS applied to the same element with a higher specificity than yours so it was loaded first.
Thanks for the link. I’ll definitely read up on CSS specificity.
Incidentally, this is an out-of-the-box install of the BB plugin with the BB child theme. In other words, I haven’t added or taken out any CSS. If I understand you correctly, that would imply any CSS with a higher specificity than the code in my previous post is native to the plugin/theme.
Given that, what would you say is the easiest way to get the line height and paragraph spacing to match this page…
Sorry I just realized there is no post class being used by the theme nor the plugin. Where did you get that from by the way? Just curious. You’ll want to target this class instead.
.page p {
/* CSS goes here */
}
You may want to play with the classes since each page or post has a unique body class and a group class.
Sorry for late reply. I’ve been putting out fires in my business.
First, thank you very much for noting that “post” should be “page” in the CSS. I made the change and it worked liked gangbusters. The line height and paragraph spacing are now exactly as I want them.
Second, I took the code from this page (opens in a new tab). In retrospect, I should have known “post” was going to create a problem.
It’s nice to hear from you again! That is actually because the homepage and the single blog pages doesn’t contain the page classname on its body tag(I actually thought all pages have that). You can see this by checking the Element Inspector(F12 on Chrome or FF) and by checking the body tag. You’ll notice how all pages have a page class while the home and blog pages don’t. http://imgur.com/hhLW7a8
You can instead hit the body tag in general so it applies to all pages.
Ben, would you be kind enough to recap this post for me? I need clear instructions. I have never edited CSS before and I don’t want to make a mistake I cannot recover from.
I have the same issue as Damon. I’m trying to get more white space between my paragraphs.
Preferred spacing. I have to press enter a couple of times to force it - http://screencast.com/t/cDla13CLM93k
