trying to change line spacing

  • Unknown's avatar
    rodiy2k · Member ·

    Hello
    I am trying to change the boring default widget layout on the 2012 theme; I’ve kind of figured out how to do it in my Chrome editor but can’t get one piece to work in the WP CSS; I want to change font size, text transform to Capitalize, color and line spacing. I’m using the following code: 

    h3.widget-title {
	font-size: 1.135rem;
	text-transform: capitalize;
	color: #0f18f0;
}
p	{
	line-height: 1.46153846;
}

    The line spacing won;t work; Is “p” the wrong element? my site is
    experimentalexpats.com

    I’ve pasted in a copy of what I want it to be; the link is: https://experimentalexpats.files.wordpress.com/2014/10/css.png

    Thank You

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, what you have for the widget title should work, but I think all you really need from looking at the original CSS is the following. 

    .widget-title {
    font-size: 1.135rem;
    text-transform: capitalize;
    color: #0f18f0;
}

    Using the web inspector built into my browser, when I highlight a paragraph, the first thing at the top of the CSS pane is the following: 

    .entry-content p, .entry-summary p, .comment-content p, .mu_register p {
    line-height: 1.71429;
}

    I would use that to change the line height of the paragraphs in the content area.

    For the widgets, I highlighted the top “Meet Rodi” widget content and this was the second rule that showed up in my web inspector: 

    .widget-area .widget p, .widget-area .widget li, .widget-area .widget .textwidget {
    line-height: 1.84615;
}

    You can add the above and then edit the line spacing values as desired.

  • Unknown's avatar
    rodiy2k · Member ·

    @thescaredpath

    Hi
    Thanks so much; I almost got it: I find it very confusing; can you please look again? it’s

    I’m looking to decrease the space on the second widget (Follow us) between the end of each paragraph and the button. I played with the editor and when I manually change the margin-bottom to 0.6rem on the rule.widget-area widget p {it looks like I want it to, whereby it makes the entire widget smaller and the margin between the first sentence and the “join 9 followers” looks smaller.

    I’m very confused as to how components of a features in a content area (a widget, for instance) need to be changed to make them work; how do you know what rules to change?

    Anyway, I’ve now got used following code : 

    .widget-title	{
	font-size: 1.1rem;
	text-transform:	capitalize;
	color:	#0f18f0;
}
.widget-area .widget p, .widget-area .widget li, .widget-area .widget .textwidget	{
	line-height:	1.461;
}
.widget-area .widget h3	{
	margin-bottom: 0.5rem;
	line-height: 1.461;
{

    Any additional help/explanations is greatly appreciated. BTW: the line spacing issue was only for the widgets

  • Unknown's avatar
    thesacredpath · Member ·

    For the follow widget, let’s specifically target the “p” elements in that particular widget instead of using the .widget-area .widget p selector, which affects all widgets. We can do that by using the specific ID selector for that particular widget, which we can find by looking at the source code in the web inspector. Here is a screenshot. Notice what I’ve highlighted. That is the widget main selector/HTML for the follow widget. Note the id=”blog_subscription-2″ after aside? That is the CSS id for that widget. In the CSS, to denote an ID, you precede it with a # such as this:
    #blog_subscription-2
    So we can target the “p” elements in that widget like this: 

    #blog_subscription-2 p {
margin-bottom: 40px;
}

    I purposely used 40px for demonstration purposes so you could see that it did indeed target only that specific widget. You can adjust that value to whatever looks right for you. You can also adjust line height, font size, color, or anything else in that particular widget by adding additional declarations to the above.

    See where this gets you and then we can go from there.

  • The topic ‘trying to change line spacing’ is closed to new replies.