New Landing › How can we help? › Themeforest Theme Support › Flexform › apply gradient background to text block

Viewing 13 posts - 1 through 13 (of 13 total)
  • Back to forum
    Posted in: Flexform
  • April 16, 2015 at 12:32 am #165501
    Carol
    Member
    Post count: 73

    I would like to apply a gradient background to a text block.
    In searching the forums, I see two solutions: one involving adding CSS and the other uploading an image, but I do not see where to insert either.

    Sample code from a color picker would be (pasted below) – where and how to place?:

    <style>
    body {background-color:rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 1%, rgba(209,209,209,1) 1%, rgba(254,254,254,1) 1%, rgba(254,254,254,1) 43%, rgba(254,254,254,1) 81%, rgba(209,209,209,1) 100%, rgba(209,209,209,1) 100%, rgba(226,226,226,1) 100%, rgba(219,219,219,1) 100%, rgba(209,209,209,1) 100%, rgba(226,226,226,1) 100%, rgba(209,209,209,1) 100%, rgba(226,226,226,1) 101%, rgba(210,205,199,1) 101%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(255,255,255,1)), color-stop(1%,rgba(209,209,209,1)), color-stop(1%,rgba(254,254,254,1)), color-stop(43%,rgba(254,254,254,1)), color-stop(81%,rgba(254,254,254,1)), color-stop(100%,rgba(209,209,209,1)), color-stop(100%,rgba(209,209,209,1)), color-stop(100%,rgba(226,226,226,1)), color-stop(100%,rgba(219,219,219,1)), color-stop(100%,rgba(209,209,209,1)), color-stop(100%,rgba(226,226,226,1)), color-stop(100%,rgba(209,209,209,1)), color-stop(101%,rgba(226,226,226,1)), color-stop(101%,rgba(210,205,199,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(209,209,209,1) 1%,rgba(254,254,254,1) 1%,rgba(254,254,254,1) 43%,rgba(254,254,254,1) 81%,rgba(209,209,209,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 100%,rgba(219,219,219,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 101%,rgba(210,205,199,1) 101%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(209,209,209,1) 1%,rgba(254,254,254,1) 1%,rgba(254,254,254,1) 43%,rgba(254,254,254,1) 81%,rgba(209,209,209,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 100%,rgba(219,219,219,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 101%,rgba(210,205,199,1) 101%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(209,209,209,1) 1%,rgba(254,254,254,1) 1%,rgba(254,254,254,1) 43%,rgba(254,254,254,1) 81%,rgba(209,209,209,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 100%,rgba(219,219,219,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 101%,rgba(210,205,199,1) 101%); /* IE10+ */
    background: linear-gradient(to right, rgba(255,255,255,1) 1%,rgba(209,209,209,1) 1%,rgba(254,254,254,1) 1%,rgba(254,254,254,1) 43%,rgba(254,254,254,1) 81%,rgba(209,209,209,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 100%,rgba(219,219,219,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 100%,rgba(209,209,209,1) 100%,rgba(226,226,226,1) 101%,rgba(210,205,199,1) 101%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#d2cdc7′,GradientType=1 ); /* IE6-9 */}
    </style>

    April 16, 2015 at 6:38 am #165530
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please remove style tags and insert code at Admin -> Theme Options -> General Options -> Custom CSS.

    Thanks
    Mohammad

    April 16, 2015 at 1:08 pm #165648
    Carol
    Member
    Post count: 73
    This reply has been marked as private.
    April 16, 2015 at 1:17 pm #165651
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Give the text box an extra class, then replace ‘body’ with the extra class

    – Kyle

    April 16, 2015 at 1:44 pm #165658
    Carol
    Member
    Post count: 73
    This reply has been marked as private.
    April 16, 2015 at 1:55 pm #165665
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    And your link..?

    – Kyle

    April 16, 2015 at 1:55 pm #165666
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Like Kyle suggested add an extra class first like in the image.
    https://www.dropbox.com/s/palkc668ad4uqhv/text_block_extra_class.png?dl=0

    Then you the custom css option add the following css.

    .bc-style{

/*Add here you css for the background*/

}

    -Rui

    April 16, 2015 at 2:11 pm #165674
    Carol
    Member
    Post count: 73
    This reply has been marked as private.
    April 16, 2015 at 2:16 pm #165677
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    Did you check my reply? Now you just need to place your css inside that rule and place everything in the custom css.

    -Rui

    April 16, 2015 at 2:19 pm #165678
    Carol
    Member
    Post count: 73
    This reply has been marked as private.
    April 16, 2015 at 2:32 pm #165683
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779
    This reply has been marked as private.
    April 17, 2015 at 3:59 pm #166074
    Carol
    Member
    Post count: 73
    This reply has been marked as private.
    April 17, 2015 at 5:36 pm #166103
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Great thanks to Rui.
    Mohammad

  • Back to forum
    Posted in: Flexform
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register