[resolved] Adding gradient behind text on one page (10 posts)

  1. jasonross959
    Posted 3 years ago #

    I'm trying to add a green to white to blue gradient behind the text on just one page. Is it possible to use a gradient generator like this one:


    If so, how do I enter the code on just the one page?

    This is the page in question: http://wcql.com/regional-services/

    The theme is Pinboard.

    Thank you very much!


  2. jasonross959
    Posted 3 years ago #

    Okay, I'm gathering that maybe I don't want to bother with a generator.

    How do I add an image as text-background?

  3. Keith Burgie
    Posted 3 years ago #

    Would you like your gradient to replace the white article background? You can do it but it will take a little work.

    You'll have to create a custom template, which isn't as scary as it sounds. It would basically be a duplicate of your default template but you would add a CSS class or ID to whichever section you want the gradient on.

    Then in your CSS file you add that class or ID and paste the CSS from ColorZilla.

    Then you'll go into your WordPress admin, open the Regional Services page and assign it the new template.

  4. jasonross959
    Posted 3 years ago #

    Thank you for the response!

    That sounds like a good solution -- not too scary, ha!

    I read somewhere that Internet Explorer doesn't render gradients...or doesn't render them well anyway. That has me thinking I'd rather have a jpg serve as the background. Is that any simpler of a process?

  5. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Use CSS PIE related plugins for IE support

  6. jasonross959
    Posted 3 years ago #

    Thank you both!

    I'm still wondering if perhaps there isn't a simple bit of code or plugin I could use to add an image to the text box background?

    If not, then I'll go ahead and make a template.

  7. jasonross959
    Posted 3 years ago #

    Okay...I made a new template and I have the CSS code from the generator...and I think I even know where it goes, but I don't know how to write it in as a "class or id."

  8. Keith Burgie
    Posted 3 years ago #

    Your text sits within:
    <div class="entry">.

    Find that line in your new template and add a class for your new background:
    <div class="entry gradient">

    Now open up your style.css file and add a new class for your gradient.

    .gradient {

    *Note that your class doesn't have to be called .gradient. It can be anything as long as it's the same on your stylesheet as your page template.

  9. jasonross959
    Posted 3 years ago #


    You are the man! Take a peek, its working great. I reckon that if I want the gradient to include those white areas I'd just have to move the <div class> around in the template file. I don't have any content up there yet, but this is perfect.

    Thanks again!

  10. Keith Burgie
    Posted 3 years ago #

    That's awesome Jason. Way to stick with it! It looks like you have two entry divs in your template, which is fine if everything's working, but here's how you'd get your gradient to cover the rest of your white space.

    <div class="entry"><!-- Add gradient class to this div -->
           <header class="entry-header">
              <h1 class="entry-title">Regional Services</h1>
          <div class="entry gradient"><!-- Remove gradient class from this div -->
              <div class="entry-content">

Topic Closed

This topic has been closed to new replies.

About this Topic