Shoreditch: CSS requests

  • Unknown's avatar
    lynnefwpxa · Member ·

    Hi,

    Can you please provide me with the relevant CSS code for the following issues:

    1. I’d like to reduce the spacing between the sections on the homepage – there’s too much white space between each section (as I’m not including a background image to provide visual differentiation)

    2. I’d like the header image to not appear on the homepage, just the other pages (I’m using feature image on the homepage instead)

    3. (If I change my mind about the homepage background images) How would I include a feature image behind a section on the homepage, but not get it to display on the child page itself?

    Thanks

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

  • staff-mikewp · Staff ·

    Hi lynnefwhr,

    1. In your CSS, if your target the hentry-wrapper, then you can change the margin-top and margin-bottom properties until they are a spacing that you like.

    e.g. .hentry-wrapper{
    margin-top: 5px;
    margin-bottom: 5px;
    }

    2. If you want to remove the background image, I think it’d be easier to do that by changing the Cover Block (which I assume that is) to just a Header Block or whatever else you think would make sense. You can add a cover Block to the other pages to make sure the image is included for those.

    3. I think using separate Blocks (Cover versus a non-cover one) would help solve this as I referenced in item 2.

    I hope I’ve understood your questions correctly!

  • supernovia · Staff ·

    Hey there, some of these changes are a bit out of the scope of what we can offer here, but I may be able to point you in the right direction.

    For the margins between sections, there are a few bits of relevant CSS. Try adjusting these to your liking:

    .hentry + .hentry {
    margin-top: -1.5em;
}

@media screen and (min-width: 1020px)
.hentry {
    padding-bottom: 4.5em;
    padding-top: 6em;
}

    I’m not sure what you mean re: the header image. Do you meant the logo? If so here’s how you can target to only remove it on the home page:

    .home .custom-logo {
    visibility: hidden;
}

    I’m not sure yet which featured image you’re referring to, but you could use similar code to hide a featured image on an individual page, for example .page-id-940 { display: none; } or visibility hidden as above.

    Does that help? We do have some tips on finding your theme’s CSS here:
    https://wordpress.com/support/custom-design/how-to-find-your-themes-css/

  • Unknown's avatar
    lynnefwpxa · Member ·

    thanks both.

  • The topic ‘Shoreditch: CSS requests’ is closed to new replies.