Adding CSS to Truly Minimal theme

  • Unknown's avatar
    luckpotion · Member ·

    Hello, I hope I’m posting in the right place. I want to see if the changes I want to make to my blog are possible via CSS.

    1 : Is there any way to make the entries higher, so that the first post is closer to the menu? (I removed the banner, but it wasn’t high enough)

    2 : Is there any way to make the sidebar wider?

    3 : Is there anyway to change the font on the sidebar?

    4 : This is a stretch, but is there any way to undo the endless scrolling?

    Thank you!

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

  • Unknown's avatar
    justpi · Member ·

    1. Add this in the CSS editor: 

    .site-header {
    margin-bottom: 4.5em;
}

    Decrease the number to decrease the space.

    2-4 are also possible. They’ll be easier to answer after you add all the widgets you want (so we can see how they behave when you widen the sidebar), and after you publish more posts (so we can see infinite scrolling in action). Re 3, change the font of what exactly? and change it to which font?

  • Unknown's avatar
    luckpotion · Member ·

    Thank you, I’ll try that out.
    The only widgets I’m planning on adding are text, specifically html for images. I wanted to add actual text to the text widget, but I’m not a fan of the font they provide. The spacing between lines are too wide and it’s gray.

  • Unknown's avatar
    justpi · Member ·

    So you don’t want to change the font family, you want to change the line spacing and the color. Add some text to the widget you have already added so I can see it and modify it, and then I’ll work out #2 as well.

  • Unknown's avatar
    luckpotion · Member ·

    I do want to change the font family, specifically to myriad pro, just to match the rest of the blog. And I also want to change the color and spacing if possible. I’ve added some text to show what it looks like now. Thanks for all the help :)

  • Unknown's avatar
    luckpotion · Member ·

    The code worked great to reduce the banner space. Thanks!

  • Unknown's avatar
    justpi · Member ·

    You’re welcome.

    I’m seeing you set it to 0.1em. That’s almost nothing, so you might as well set it to zero: 

    .site-header {
    margin-bottom: 0;
}

    If you want to move things even higher, you can turn it to this: 

    .site-header {
    margin-bottom: 0;
    padding-bottom: 1.5em;
}

    (1.5 is the original value: change it to adjust the space.)

    Now, some remarks about fonts and inline CSS:

    a) Browsers normally display a font only if it’s installed in your computer (except if you use Typekit, which embeds the font in your blog). So the fact that you specified Myriad Pro in the Text editor doesn’t mean your visitors will see Myriad Pro: it’s not a common font, so most visitors will see a different font (for example, I’m seeing Times in Safari and Bookman Old Style in Firefox, because that’s what I’ve told my browsers to display when a site specifies a font I don’t have).
    Your options are:
    1. Use one of the standard fonts that are installed in practically all computers; see here:
    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
    2. Use one of the Typekit fonts you can see in Appearance > Custom Design (or Customizer) > Fonts.
    3. Setup a separate Typekit account, setup a kit for your blog, etc etc; then and only then you can use Myriad Pro.

    b) You used this in the Text editor, for each and every paragraph:
    <span style="font-family:myriad pro;">TEXT</span>
    First, the span tag is used to change characters, words or phrases that are part of a paragraph. If you wanted to change the whole paragraph, you’d write:
    <p style="WHATEVER">COMPLETE PARAGRAPH HERE</p>
    But since you wanted to change the whole post, applying the same change to each paragraph would be redundant. You’d simply write this: 

    <div style="WHATEVER">

COMPLETE CONTENT HERE

</div>

    c) But you’d do this if you didn’t have the Custom Design upgrade. Since you have the upgrade, there’s no point adding such inline CSS.

    So, remove the span tags from the Text editor, and add this in the CSS editor (except if you decide to use Typekit fonts): 

    .wf-active body {
    font-family: Arial;
}

    This should take care of the widget texts too. I’m suggesting Arial, as I think that out of the few standard fonts it’s the one that comes closest to Myriad Pro.

    To turn the color of the widget texts into that of the main content, add this: 

    .site-main .widget-area {
color: #574D4D;
}

    And I’m confused about the line spacing. You’ve added this: 

    p {
    line-height: 1.5em;
}

    This applies to all regular text – main and widget alike. Do you mean you want a different line spacing for the widgets?

    As for widening the sidebar, you moved it from right to left. Is this final?

  • Unknown's avatar
    luckpotion · Member ·

    Thanks

  • The topic ‘Adding CSS to Truly Minimal theme’ is closed to new replies.