StudioPress

Forum navigation

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Best practice on how to add gradient background

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Best practice on how to add gradient background

This topic is: not resolved

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 3, 2015 at 11:14 am #143065
    jtikcuf
    Member

    Whats the best practice to add a gradient background i have seen some post and i have done it but yet seems not to be working, im doing something wrong for sure please help if possible i will like to use a grey gradient background.

    Jtikcuf ‘~’

    http://demo.shahtruckingusa.com/
    March 3, 2015 at 11:28 am #143068
    Genesis Developer
    Member

    There have lot of CSS3 gradient generator sites. You can generate it quickly from there and it will be all browsers compatible.

    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    March 3, 2015 at 11:36 am #143070
    jtikcuf
    Member

    i did do that and placed the new css and nothing

    Jtikcuf ‘~’

    March 3, 2015 at 11:39 am #143071
    Genesis Developer
    Member

    Yes. They will give you the CSS code and you will add it in your style.css file in right way. Then you will get the effect. I tried this lot of times and it was working for me.

    Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
    You can request new tips/help.

    March 3, 2015 at 11:41 am #143074
    jtikcuf
    Member

    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

    i placed this and not working

    Jtikcuf ‘~’

    March 3, 2015 at 11:45 am #143075
    jtikcuf
    Member

    for now i did a image but waned to use the css

    Jtikcuf ‘~’

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.