Color gradient for vertical bar?

  • Resolved niclasto

    (@niclasto)


    4 years, 3 months ago

    Hey there,

    is it possible to create color gradient for the vertical bar?

    I am using this shortcode:

    [perfectpullquote align="full" color="#128C7E" size="22"] Text[/perfectpullquote]

    I also have the css code for the color gradient:

    div {
    background: linear-gradient(to bottom, #cc3300 55%, #00cc00 100%);
}

    However, I would like to use different gradients for different pullquotes.
    My question: Is it possible to connect the css code with a single Perfect Pullquotes-shortcode?

    Many thanks in advance!

    Niclas

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Adam DeHaven

    (@adamdehaven)

    Linear gradients are not technically possible as a border color option; however, what you’re wanting to accomplish is possible if you don’t mind adding some custom CSS to your WordPress theme (or utilize another plugin that allows you to add custom CSS). This solution should be fine in most browsers other than Internet Explorer versions less than 11 (not likely an issue if I had to guess).

    Here’s what you’ll need to do:

    Add a custom class for the corresponding gradient to the shortcode:

    [perfectpullquote align="full" color="#128C7E" size="22" class="pullquote-gradiant-red-to-green"] Text[/perfectpullquote].

    The class shown above can be anything you like, as long as it’s not something already being used on your site.

    Next, add the custom CSS shown below to your theme (either manually, or with a plugin):

    
.perfect-pullquote.pullquote-gradiant-red-to-green {
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom, #cc3300 55%, #00cc00 100%);
}

    If you want to add additional gradient variations, simply add additional custom classes as shown above, making sure to use unique class names, and updating the value of the linear-gradient in the border-image-source for each one.

    • This reply was modified 4 years, 3 months ago by Adam DeHaven.
    • This reply was modified 4 years, 3 months ago by Adam DeHaven.
    Thread Starter niclasto

    (@niclasto)

    Hey Adam,

    many thanks for your help – I really appreciate it!

    It all works fine!

    Best Regards,

    Niclas

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Color gradient for vertical bar?’ is closed to new replies.