Change background color to a texture in Rowling Theme

  • Unknown's avatar
    jaybhuwieler · Member ·

    I like my current theme (Rowling) and want to keep it (if at all possible, given my request), but as is, it appears “flat”. I want the white background to have a texture – something that looks like paper, instead of just looking like a fill color; the same is true for the black background at the top of the page – I want to have either a lighting effect, like a gradient, or another texture graphic that makes the page feel less “flat”. Could my theme’s CSS or HTML be modified to allow me to either upload a pre-made graphic to these two places, or maybe to borrow some design tools from another theme, which would let me create these effects? Thank you!

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

  • kathrynwp · Staff ·

    You can add a gradient to the top area with something like this:

    .header-wrapper {
    background: linear-gradient(#222222, #5d5f5e);
}

    You can change the two colour codes as you like – the original dark grey currently on your site in that area is #222222, but you can change that too.

    For your other question, I’ve done some testing, and unfortunately the middle white area isn’t a single HTML element that can have a uniform background image added to it. For that reason, none of what I’ve tried looks very good. :)

    As far as where to find a graphic to use, Subtle Patterns is a good resource for light repeating background tiles. Once you’ve chosen an image you want to try, you’d upload it to your Media Library and then grab its URL, which will look something like this:

    https://huwielernet.files.wordpress.com/2017/01/my-bg-image.png

    This is the basic CSS format for repeating background images, just as an example:

    .your-element {
    background: url(https://huwielernet.files.wordpress.com/2017/01/my-bg-image.png);
}

    The problem is that there isn’t an easy element to target that covers the whole white area. For example, try this an you’ll see what I mean, replacing the URL with an actual tile image in your Media Library:

    .content {
    background: url(https://huwielernet.files.wordpress.com/2017/01/my-bg-image.png);
}

    Maybe once you add the gradient you’ll find it adds enough texture to your page – see what you think.

  • The topic ‘Change background color to a texture in Rowling Theme’ is closed to new replies.