WordPress.org

Ready to get started?Download WordPress

Forums

raindrops
adding a gradient as backround (5 posts)

  1. Jojo21
    Member
    Posted 1 year ago #

    hi,
    how can I add a 1 pixel wide gradient below the background image instead of the background color. On top, in the corners, i want to set a small picture. Below this picture there should be a gradient not a monochrome backround. Is there a way to do this?

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Do not edit the theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

  3. Jojo21
    Member
    Posted 1 year ago #

    ok, done. Child theme build and activated. And now?

  4. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Now try using Firefox with the Firebug add-on to locate the CSS you need to over-write in your child theme. Or use whatever developer tool is available in your web browser.

    If you need to change any markup, you'll need to create a copy of the relevant template file in your child theme and make all changes to that file.

  5. nobita
    Member
    Theme Author

    Posted 1 year ago #

    Hi Jojo21

    Thank you for using Raindrops.

    Raindrops has auto gradient class.

    Please try below.

    1. Create post new

    2. Click help tab and click overview

    3. You can see current Raindrops gradient class.

    This gradient related Theme options 'Base color for Automatic Color Arrangement'.
    base color select 'red' then create a red gradient.

    4. using example below
    ( please use editor text mode )

    <div class="gradient-3 pad-m corner" style="display:inline-block">
    <img src="http://example.com/img.jpg" alt="example" />
    </div>

    note:
    class means
    pad-m padding midium
    corner round corner

    style means
    Shrinking Fit for small image

    If you need your original style rule.

    1. Create a custom field name 'css'

    <div class="my-gradient">
    <img src="http://example.com/img.jpg" alt="example" />
    </div>

    2. value set

    .my-gradient{ /*your rules*/ }

    Thank you.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic