Changing the page set-up

  • Unknown's avatar
    gilmoregirlsgreetings · Member ·

    “Hi there, I would like to have the home page text appear beneath the picture of my daughters, and for the image of my daughters to appear either in all greyscale or in full color. What CSS do I need for this?

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

  • Unknown's avatar
    gilmoregirlsgreetings · Member ·

    Hi there, I would like to have the home page text appear beneath the picture of my daughters, and for the image of my daughters to appear either in all greyscale or in full color. What CSS do I need for this?

  • Unknown's avatar
    siobhyb · Member ·

    Hi @gilmoregirlsgreetings,

    Try the following snippet in the CSS panel of the WordPress.com Customizer to set an image that displays at the top of your home page:

    .home #contentinner {
    background-image: url(https://gilmoregirlsgreetings.files.wordpress.com/2016/10/unspecified-1.jpg);
    background-repeat: no-repeat;
    background-size: auto 700px;
}

.home .post {
    padding-top: 710px;
}

    In the above CSS, change the URL next to background-image with the URL of the specific image you wish to display at the top of your home page (I’ve used the URL of the image that’s currently set as that page’s featured image).

    The second value of background-size (currently 700px) defines the height that your image will display at. Increase/decrease its value to your liking.

    The value of padding-top should remain 10px larger than the height you’ve set (the 10px represents some spacing between the text and the image).

    Your image will display in full colour using the above CSS.

    To set the image to display in gray scale, the following will do the trick:

    .home #contentinner {
         -o-filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}

    Let me know if that helps you to achieve what you’re after. :)

  • The topic ‘Changing the page set-up’ is closed to new replies.