WordPress.org

Ready to get started?Download WordPress

Forums

Grisaille
[resolved] header behaviour (43 posts)

  1. breacher18
    Member
    Posted 1 year ago #

    I'm having a problem in that I want the header to behave like it does on a wordpress.com site rather than the wordpress.org. Can anyone help me with this?

    http://wordpress.org/extend/themes/grisaille/

  2. You're going to have to be more specific than that. The header doesn't behave how...?

  3. breacher18
    Member
    Posted 1 year ago #

    Hi sorry yes, on the .com theme the site name and tagline are inserted under the header image and on the .org the text is overlay onto the header image.

  4. I just looked at the wpcom version (svn is my friend) and the CSS for the header is a little different. The rest looks pretty much the same to my untrained eye.

    The CSS probably has differences that I'm not spotting (UNIX diff fails with that many differences). I'll look at it later on but I'm hoping a CSS savvy person can chime in. *cough*Andrew Nevins*COUGH!* ;)

    I'm sure it's only few lines in a child theme.

  5. breacher18
    Member
    Posted 1 year ago #

    Thanks I appreciate all your help.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    May you link the webpage with the problem?
    You may need to add CSS to re-position your header elements.

  7. Much thanks for looking at this Andrew. :)

    This is my crash test dummy installation where I've setup a child theme of Grisaille.

    http://dixie.dembowski.net/

    The child theme style.css is located at

    http://dixie.dembowski.net/wp-content/themes/grisaille-child/style.css

    and imports this style sheet (from the WordPress.ORG download)

    http://dixie.dembowski.net/wp-content/themes/grisaille/style.css

    The wpcomm SVN version style sheet is located at

    http://dixie.dembowski.net/wp-content/themes/grisaille-wpcomm/style.css

    Which you can see in action at http://grisailledemo.wordpress.com/

    From just looking at my test site and the demo site the header portion doesn't seem to be that different. But while poking at the CSS during my commute this morning, I couldn't get the CSS right for the header.

    I think that the differences between the wpcomm version and the WordPress.ORG version can be reconciled. But my CSS is a little poor and I wasn't able to make the two look quite the same on my child theme.

    Any help would be appreciated, I'm not yet ready to head to the CSS forum (but probably will be soon!)

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Are the fonts intentionally different?
    Try these changes:

    #header {
     margin: 0 0 15px 0;
    }
    
    #site-title {
     min-height: auto;
    }
    
    #site-title h1, #site-title #site-description {
     padding: 0;
    }
    
    a.rss {
     margin-right: 10px;
    }

    Hopefully I haven't got the two mixed up and applied styles to wrong one.

  9. Looks closer to WordPress.COM version (I changed the site name and tag line) now to work out the font difference...

    BTW sadly, this is how I pick up my CSS knowledge. ;)

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    And in-turn I pick up knowledge by helping others, therefore you've also helped me learn.

  11. breacher18
    Member
    Posted 1 year ago #

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    In your .com website, that is an image element.
    In your .org website, that is a background CSS image.

  13. breacher18
    Member
    Posted 1 year ago #

    Ok thanks, do you know how I would go about changing that? I'm pretty new to CSS.

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you have a Child Theme?

  15. breacher18
    Member
    Posted 1 year ago #

    No is it just creating another directory I'm the the themes dir?

  16. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes in your theme directory, you'll need to create another directory and have in it a style.css file.
    Your style.css file should look like this example;
    http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme

    You then need to activate that Child Theme in the dashboard.

    Then copy header.php (from the actual theme) and paste it in the Child Theme.

    This allows you to edit the header.php file without losing your changes when you update the theme.

  17. breacher18
    Member
    Posted 1 year ago #

    Will do this now and let you know as soon as I have finished.

  18. breacher18
    Member
    Posted 1 year ago #

    Keep getting this error:

    Broken Themes

    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

    Name Description
    grisaille Child\ The parent theme is missing. Please install the "grisaille\" parent theme.

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    Is the Child Theme (folder) inside the grisaille theme (folder)?

  20. breacher18
    Member
    Posted 1 year ago #

    no

  21. breacher18
    Member
    Posted 1 year ago #

  22. Andrew
    Forum Moderator
    Posted 1 year ago #

  23. breacher18
    Member
    Posted 1 year ago #

    Right sorted that now the template name wasn't the same as the parent directory. What do I need to do after I have put the Header.php file across?

  24. Andrew
    Forum Moderator
    Posted 1 year ago #

    You'll need to replace where ever the background image is being called, with an <img> element.
    If you want help with this, use http://PasteBin.com for the header.php code and send us a link of your PasteBin page.

  25. breacher18
    Member
    Posted 1 year ago #

    http://pastebin.com/gMEuWAGS
    is the header.php original for the .org

  26. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try replacing the entire code with this
    http://pastebin.com/tQutwpMC

  27. Andrew
    Forum Moderator
    Posted 1 year ago #

    Also in the Child Theme stylesheet, make sure you're importing the CSS from your parent theme, as exampled
    http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme

  28. breacher18
    Member
    Posted 1 year ago #

    Cool almost there, I know how to sort the text out. Whats with the white line around the image any ideas? Thanks again for your help :)

  29. Andrew
    Forum Moderator
    Posted 1 year ago #

    In your Child Theme stylesheet, try adding;

    #site-title img {
     border: 0;
     background: none;
    }
  30. breacher18
    Member
    Posted 1 year ago #

    Aw yeah sweet, one final thing since I updated the style sheet for the font the double line has gone at my top menu bar.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags