Sketch theme: removing page border

  • Unknown's avatar
    andywhitson · Member ·

    Hello gurus.

    How do I remove the border on the top and bottom of the Sketch theme?

    I have currently just made it white but would like to remove it so my main picture and the writing under it move ‘above the fold’.

    http://andywhitson.com/

    Can anyone help?

    Thanks in advance.

    Andy

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

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Andy,

    That border comes from the margin on div elements that have the “site” class. You can use custom CSS like this to remove that top and bottom margin completely:

    .site {
margin: 0 auto;
}

    Let me know if that’s the change you’re looking for! :)

    You can also get lots of advice and tips about customizing your theme with CSS from expert staff and volunteers in the CSS Customization forum. (That’s more likely to get you faster replies about CSS tweaks to your theme’s design than posting in the Themes forum here.)

  • Unknown's avatar
    andywhitson · Member ·

    Perfect, that worked. Thank you :-)

    Can I also close the gap between the bottom of my menu and the start of my picture? The picture is just inserted as part of my page copy.
    http://andywhitson.com/

    Thanks for your help!

  • Unknown's avatar
    rachelmcr · Member ·

    Sure! Part of that gap comes from the padding under your site’s header, which you can remove with this CSS:

    .site-header {
padding: 0;
}

    The other part of the gap comes from a margin at the top of the post content. (The photo is inside an h3 HTML element, and that has a margin.) That’s a little trickier to remove, but you could use CSS like this:

    h3:first-of-type {
margin: 0;
}

    I found all of this custom CSS using the tips from our How to Find Your Theme’s CSS guide, in case you’d like to give that a try. :) We also have other tips for customizing your site with CSS here:

  • Unknown's avatar
    andywhitson · Member ·

    Wow, amazing thank you – everything is working perfectly.

    Another thing I can’t figure out how to do is make my tagline visible?

    If you could help with that that would be awesome too!

    Cheers

    Andy

  • Unknown's avatar
    rachelmcr · Member ·

    Hi Andy,

    The Sketch theme just hides the tagline with CSS, so you can also use CSS to make it visible:

    .site-description {
display: block;
}

    Once it’s visible, you can use additional CSS to style that so it looks the way you’d like it.

    If you’d like more help styling that tagline, I’d recommend asking in the CSS Customization forum. There are some expert staff and volunteers there who can give tips and help for more advanced customizations. :)

  • The topic ‘Sketch theme: removing page border’ is closed to new replies.