Changing the color the of partial gradient slider

resolved (11 posts) (4 voices)

  1. BenjaminYBR

    Hello and thanks for the great themes!

    At your convenience, will you please outline how to change the color the of partial gradient slider on the homepage slideshow without changing the overall "Color Scheme" in the skin editor.

    Posted 6 years ago #
  2. Elliott

    Hello BenjaminYBR,

    Open up /wp-content/themes/persuasion/style.css and around line 506 you should see this,

    .partial_gradient_slide .slide_overlay{
    background-image:-webkit-gradient(radial,100% 0%, 0, 100% 0%, 600,from(rgba(0,0,0,.1)), to(rgba(0,0,0,.4)));
    background-image:-moz-radial-gradient(top right,rgba(0,0,0,.1),rgba(0,0,0,.4));
    background-image:-o-radial-gradient(top right,rgba(0,0,0,.1),rgba(0,0,0,.4));
    background-image:radial-gradient(top right,rgba(0,0,0,.1),rgba(0,0,0,.4));}

    This is a CSS gradient being applied to the area which I think you are wanting to change. There are no colors being changed, only the opacity which is the 4th parameter. You can try changing the values here to change the color / opacity.

    Let us know if this helps.

    Posted 6 years ago #
  3. BenjaminYBR


    Those are the correct settings (background-image:-webkit-gradient(radial,100% 0%, 0, 100% 0%, 600,from(rgba(0,0,0,.1)), to(rgba(0,0,0,.4)));), thank you.


    Posted 6 years ago #
  4. Webtreats

    Hi BenjaminYBR,

    With the new framework you can also add additional options to the skin editor very easily.

    Below are the steps:

    1. Open up your skin in "advanced" edit mode and paste in the following code at the bottom of the "MISC" section like the first screenshot below.

    .partial_gradient_slide .slide_overlay{/*:Partial Gradient BG Color */

    2. Save changes and then open up your skin in normal edit mode.
    Now within the MISC section you should have an option with a color picker that says "Partial Gradient BG Color" like the second screenshot below.

    <h3>Step 1</h3>

    <h3>Step 2</h3>


    1. step2.png (37 KB, 2 downloads) 6 years old
    2. step1.png (109 KB, 2 downloads) 6 years old
    Posted 6 years ago #
  5. BenjaminYBR


    ^^ that's cool. I was planning on just creating work-arounds when there was a new color inserted into the gradient slide text area with opacity because it seems to be affected by the main site color scheme coming through because of the alpha.


    Posted 6 years ago #
  6. Webannie

    I am working on Construct - misc doesn't have the partial gradient BG colour button. I am on the orange skin, I want to change the slider box for text from orange to more neutral colour.

    Posted 3 years ago #
  7. Elliott

    Hello Webannie,

    Go ahead and take a screenshot highlighting what your trying to do so we can get a better idea.

    Posted 3 years ago #
  8. Webannie

    Screenshot attached. I want to change the back ground colour of the big orange area.

    Posted 3 years ago #
  9. Webannie

    Sorry, have attached smaller screen shot here.


    1. screenshot-nutrishan.jpg (96.7 KB, 0 downloads) 3 years old
    Posted 3 years ago #
  10. Elliott

    That gets changed with the color scheme of your skin. You can edit it in Dashboard -> Skins -> Manage Skins -> Edit.

    Posted 3 years ago #
  11. Webannie

    Ah.....of course. Thanks.

    Posted 3 years ago #


You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme