WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Removing white space in Just-text header in Grisaille (11 posts)

  1. lacolo
    Member
    Posted 1 year ago #

    All,

    I am working with a Grisaille child theme. I've created both a stylesheet and functions.php, and have been able to make all of the changes, except for the header.

    If you take a look at http://raphaelechappe.com you'll notice all that white space surrounding the header text.

    I have searched for all instances of padding & top margin in style.css, but nothing is working. Does anyone know what code I need to modify to reduce the amount of white space?

    Thank you!

    Cynthia

  2. Tara
    Member
    Posted 1 year ago #

    In your child theme's style.css, look for the rule site-title.

    In that rule, make min-height:0;

    If you don't have it, then add it to your child theme's style.css

  3. lacolo
    Member
    Posted 1 year ago #

    I added the rule to site-title, site-title a, site-title h1, and site-title h1 a, and it did nothing to the site.

    Any other suggestions?

  4. Tara
    Member
    Posted 1 year ago #

    try changing from:

    #site-title {
        min-height: 0!important;
    }

    to:

    #site-title {
        min-height: 0!important;
        margin: 0!important;
    }
  5. lacolo
    Member
    Posted 1 year ago #

    Nope, no changes. I didn't have the !important so I added that to all 4 instances of site-title, but nothing. I even tried a different browser to ensure it wasn't a cache problem.

    Baffling, don't you think?

  6. Tara
    Member
    Posted 1 year ago #

    I just checked site-title rule in firebug, it shows up empty!

    #site-title {
    }
  7. lacolo
    Member
    Posted 1 year ago #

    Odd, here's the first part of my code:

    /*
    Theme Name: Grisaille Child
    Description: Child theme for the grisaille theme
    Author: Cynthia Lawson Jaramillo
    Template: grisaille
    */
    
    @import url("../grisaille/style.css");
    
    #site-title {
       min-height: 0!important;
       margin: 0!important;
    }
    
    #site-title a {
     min-height: 0!important;
       margin: 0!important;
        color: #009900;
    }
    
    #site-title h1 {
     min-height: 0!important;
       margin: 0!important;
    	padding: 0px 0 0 20px;
    }
    
    #site-title h1 a {
     min-height: 0!important;
       margin: 0!important;
    	color: #334759;
    	font:50px 'MisoRegular', 'Marvel', sans-serif;
    	/*text-transform:uppercase;*/
    }
  8. reo
    Member
    Posted 1 year ago #

    I cheated and just altered your (lacolo's) adjustment to make it work for me. Note that there is probably useless code in there, and note that this does not work if you want the social media icons along the top. I removed those and have them as links in a side bar to give me more space, but this does work without them. It does take away some of the beauty that attracted me to the theme to begin with.

    Thank you very much for posting what you had done so that I could play around with it. I would love to hear about things I added that make not sense or are useless too. I sort of just tried a bunch of tactics at once.

    /*
    Theme Name: Grisaille Child
    Description: Child theme for the Grisaille theme
    Author: Cynthia Lawson Jaramillo tweaked edited by reoleary
    Template: grisaille
    */

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

    #site-title {
    min-height: 50px !important;
    margin: 50px !important;
    padding: 1px !important;
    }

    #site-title a {
    min-height: 50px !important;
    margin: 50px !important;
    color: #009900;
    padding: 1px !important;

    }

    #site-title h1 {
    min-height: 50px !important;
    margin: 50px !important;
    padding: 1px 0 0 1px !important;
    }

    #site-title h1 a {
    min-height: 50px !important;
    margin: 50px !important;
    color: #334759;
    font: 50px 'MisoRegular', 'Marvel', sans-serif;
    /*text-transform:uppercase;*/
    }

  9. reo
    Member
    Posted 1 year ago #

    This worked better. Sorry to repost. I would delete if I know how.

    /*
    Theme Name: Grisaille ChildX
    Description: Child theme for the Grisaille theme
    Author: Cynthia Lawson Jaramillo as adjusted by Robert O'Leary
    Template: grisaille
    */

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

    #site-title {
    min-height: 10px !important;
    margin: 0px !important;
    padding: 0px !important;
    }

    #site-title a {
    min-height: 10px !important;
    margin: 0px !important;
    padding: 0px !important;
    }

    #site-title h1 {
    min-height: 50px !important;
    margin: 0px !important;
    padding: 0px 0 0 0px !important;
    }

    #site-title h1 a {
    min-height: 50px !important;
    margin: 5px !important;
    color: #dd3333 !important;
    font: 50px 'MisoRegular', 'Marvel', sans-serif;
    /*text-transform:uppercase;*/
    }

  10. reo
    Member
    Posted 1 year ago #

    turns out to be better if you remove the last chunk of is from "#site-title h1 a {" on.

  11. reo
    Member
    Posted 1 year ago #

    Below is what has worked best for me. It takes into account the social media buttons that have margins.

    From just after the header of the child theme's css file.

    @import url("../grisaille/style.css");
    .social-media {
    margin-bottom:0px !important;
    }
    #site-title {
    min-height:0px !important;
    margin:0px !important;
    }
    #site-title h1 {
    min-height:0px !important;
    margin:0px !important;
    padding:0px !important;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic