WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] 2012 Theme Line Spacing (15 posts)

  1. WysdomTree
    Member
    Posted 2 years ago #

    Hi,

    After creating a Child Theme for the 2012 Theme, with the excellent help and advice of support forum member Andrew Nevins, I am now ready to tackle changes in the stylesheet, like line spacing etcetera. Have installed Firebug but honestly, as a complete and utter novice, I have no idea how to begin.

    Any advice or suggestions would be welcome.

    Also, I realize that a paid membership with WordPress results in getting answers to your questions more quickly but where, exactly, does one find this option? lol I have spent considerable time trying to locate this on my dashboard and in the Support Forum pages to no avail

    Thanks in advance

    http://www.wysdomtree.com

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    like line spacing etcetera

    Try looking at CSS line-height and paragraph margins.

    I realize that a paid membership with WordPress results in getting answers to your questions more quickly

    There is no "paid option" on wordpress.org. WordPress is free software and this free, volunteer-staffed forum is the only support resource available via wordpress.org.

  3. WysdomTree
    Member
    Posted 2 years ago #

    Thanks Esme,

    Regarding the line height, after trying to change the line spacing in the css unsuccessfully in several themes I finally settled on 2012 theme and knew I would have to see it though to the end with my learning curve. At first I wanted to change the line height in the parent theme but at Andrew Nevins advice I learned how to make the child theme first. Now, I understand that I can make a line spacing rule in the child theme to override the parent theme, however, I would only want the rule to affect the content and not other areas...just sure where to start and if I can figure out how to use firebug do I have to import all of the parent theme stylesheet into the child theme stylesheet so the changes won't be overridden in an update.

    Appreciate any help here but am currently off to work,
    Thanks,
    Danielle

  4. WysdomTree
    Member
    Posted 2 years ago #

    that should read NOT sure where to start lol

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Your child theme appears to be just fine as you did it. Now you just need to add CSS code to it -- so to adjust the line height or paragraph margins try adding this -- and adjusting the numbers so it looks the way you want:

    .entry-content p, .entry-summary p, .comment-content p {
        line-height: 1.71429;
        margin: 0 0 1.71429rem;
    }

    But as is, you have no content that I can see -- so it's going to be hard to test anything.

    And DO, learn how to use Firebug -- there is lots of good information on their website. It's the best way to work with CSS once you learn a bit about how it works. Also see this site re: general CSS reference:

    http://www.w3schools.com/css/

  6. WysdomTree
    Member
    Posted 2 years ago #

    Dear WPyogi,

    sooooooooooooooooooo grateful for your response!!!!!

    hadn't yet written anything because the what looks to be almost triple default line spacing of 2012 looks ridiculous..can't make the changes until later this evening but wanted to thank you right away...

    once I am able to adjust the line spacing and get some substance down on paper (lol) I will follow your suggestions for learning how to use firebug as I know there are few other changes I would like to implement

    thanks again,
    Danielle

  7. WysdomTree
    Member
    Posted 2 years ago #

    Hi WPyogi,

    so I tried your advice and it doesn't seem to have worked. I have added three lines of "this website is under construction" on the home page for the visual reference and regardless of the value I insert it remains the same...below is the what I have on the child theme css including your code - can you see an obvious error?...

    again, your help is much appreciated :)

    danielle

    /*
    Theme Name: Twentytwelve Child
    Description: Child theme for the twentytwelve theme
    Author: Danielle Kreps
    Template: twentytwelve
    */

    @import url("../twentytwelve/style.css");

    .entry-content p, .entry-summary p, .comment-content p {
    line-height: 1.71429;
    margin: 0 0 1.71429rem;
    }

    http://www.wysdomtree.com

  8. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You did not change any of the values (i.e. 1.71429) in that code -- so nothing changed.

  9. WysdomTree
    Member
    Posted 2 years ago #

    Hi,

    I did change the value to 1.31429 in the css but nothing changed so I switched it back so you could at least examine your original code to see if I imputted it correctly...

    I didn't change the margin value but perhaps both figures have to be changed?...I will wait to see if you respond to this question before I try changing the value again

    thanks for your time

  10. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Works fine for me -- testing in Firebug. I only changed the line height and it moved as it should. Make sure you are in the correct stylesheet -- the child theme one and saving any changes. Also be sure to clear any caches in your browser or your site.

  11. WysdomTree
    Member
    Posted 2 years ago #

    Hi again

    this is what is now in the child theme css after imputting a change in the line height value and updating the file:

    /*
    Theme Name: Twentytwelve Child
    Description: Child theme for the twentytwelve theme
    Author: Danielle Kreps
    Template: twentytwelve
    */

    @import url("../twentytwelve/style.css");

    .entry-content p, .entry-summary p, .comment-content p {
    line-height: 1.31429;
    margin: 0 0 1.71429rem;
    }

    the changes haven't registered so I'm not sure what I'm doing wrong...I do appreciate all the help you have given though and will come back to this later today...if you see something above, let me know and if not, again thanks for all the time you have given me :)

  12. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Those changes ARE on the site -- and show on the page. Did you clear your browser cache?

  13. WysdomTree
    Member
    Posted 2 years ago #

    Well, if you can see the changes that's wonderful lolol...I, for some reason, cannot but I will figure this out lolol...I did clear the browser cache in internet options...is there one that I'm missing or is this not the browser cache? (I really am a novice!yikes!)
    that is the last question I will ask you :)

    and I have to say that having the line spacing changed (or at least knowing how to do it) now enables me to go forward with writing the website which is really a priority for me right now...I only give this information because I wish for you to have a sense of how invaluable your help has been

    thanks again,
    danielle

  14. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You are welcome and the browser cache is a setting/preference/tool in your local browser -- which browser are you using?

  15. WysdomTree
    Member
    Posted 2 years ago #

    So if you check out my website, the home page and test blog post, you will see that it has indeed worked and now I can see it as well lol...

    I was typing a partial line, hitting return and there would be this big gap between lines...when I typed though to the end of the line and beyond, however, the changed values for the line height were implemented

    the spacing is a little too close now but I can easily change that by adjusting the value in the code you wrote for me

    thanks again,
    danielle

Topic Closed

This topic has been closed to new replies.

About this Topic