0
Welcome Guest! Login
0 items Join Now

SOLVED Gradient color definition in gantry5 styles

    • canonikus's Avatar
    • canonikus
    • Jr. Rocketeer
    • Posts: 33
    • Thanks: 0

    SOLVED Gradient color definition in gantry5 styles

    Posted 6 years 4 months ago
    • Is there any way to define a gradient in the styles of a gantry5 template? I am working in callisto...
      or a background image?
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 96201
    • Thanks: 12722
    • Web Designer/Developer

    Re: SOLVED Gradient color definition in gantry5 styles

    Posted 6 years 4 months ago
    • With Custom css - you can't do it with the color picker.

      Could you please post a URL to your site (this can be done in the secure area tab if you prefer) so we can look for you. Without a link to page where the problem is on your site it is quite hard for us to provide the best solution due to so many variables. We try to provide file names and line numbers for code changes and if changes have already been made then our advice may be incorrect.

      What color gradient do you want where?

      Please do a screengrab of your problem and annotate to make it clear.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • canonikus's Avatar
    • canonikus
    • Jr. Rocketeer
    • Posts: 33
    • Thanks: 0

    Re: SOLVED Gradient color definition in gantry5 styles

    Posted 6 years 4 months ago
    • I would like to make a gradient blue header - see screenshot
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 96201
    • Thanks: 12722
    • Web Designer/Developer

    Re: SOLVED Gradient color definition in gantry5 styles

    Posted 6 years 4 months ago
    • Use this code...
      #g-header {
          background: #009fe3; /* Old browsers */
          background: -moz-linear-gradient(top,  #009fe3 0%, #b3d5e2 100%); /* FF3.6+ */
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009fe3), color-stop(100%,#b3d5e2)); /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(top,  #009fe3 0%,#b3d5e2 100%); /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(top,  #009fe3 0%,#b3d5e2 100%); /* Opera 11.10+ */
          background: -ms-linear-gradient(top,  #009fe3 0%,#b3d5e2 100%); /* IE10+ */
          background: linear-gradient(to bottom,  #009fe3 0%,#b3d5e2 100%); /* W3C */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fe3', endColorstr='#b3d5e2',GradientType=0 ); /* IE6-9 */
      }

      If you want to make up the gradient yourself use this tool http://www.colorzilla.com/gradient-editor/

      To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .

      Don't forget to recompile css from base outline.


      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • canonikus's Avatar
    • canonikus
    • Jr. Rocketeer
    • Posts: 33
    • Thanks: 0

    Re: SOLVED Gradient color definition in gantry5 styles

    Posted 6 years 4 months ago
    • Thank You, Mark

Time to create page: 0.069 seconds