• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

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

Altitude Pro front page images shading

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.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Altitude Pro front page images shading

This topic is: not resolved
  • This topic has 5 replies, 4 voices, and was last updated 8 years, 9 months ago by ngrechg.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 7, 2015 at 7:25 am #140028
    michaelbuster
    Member

    I like how the frontpage images get shaded in Altitude Pro, but it's a bit too moody for my taste. Where do I go to control the gradient level??

    February 7, 2015 at 9:27 am #140032
    emasai
    Participant

    Find .image-section in the css and change the last figure on all the declarations to a lower number to change the gradient opacity - see example below:
    .image-section{
    -webkit-gradient(linear, left top, left bottom,
    color-stop(0%,rgba(0,0,0,0.2>)),
    color-stop(30%,rgba(0,0,0,0.5)),
    color-stop(80%,rgba(0,0,0,0.8)),
    color-stop(100%,rgba(0,0,0,0.9)))
    }


    Need Website Customization or a Responsive CSS fix? Contact Me
    Lynne emasai.com

    February 7, 2015 at 9:35 am #140034
    michaelbuster
    Member

    Terrific thanks!

    March 2, 2015 at 9:03 am #142859
    ngrechg
    Member

    Hi
    I'm having the same problem, images are too darky.
    I found the style you're referring to, but there are many sentences:

    background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );

    which ones am I supposed to change and which is the number to be lowered, the % or the last one in the parenthesis.
    And can you also explain how the sentence "filter" is applyed? Should I change the color code there as well?
    Thanks a lot for your help!!

    March 12, 2015 at 8:54 pm #144260
    Dave
    Member

    Dear ngrechg,

    You will need to make all the sentences the same. Also the reason for all the sentences is for all the browser types.

    background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, blue); /* Standard syntax */

    Hence if you wan a white gradient you will have do to this.

    	background: -moz-linear-gradient(top,  rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.8) 80%, rgba(255,255,255,0.9) 100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.2)), color-stop(30%,rgba(255,255,255,0.5)), color-stop(80%,rgba(255,255,255,0.8)), color-stop(100%,rgba(255,255,255,0.9)));
    	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.5) 30%,rgba(255,255,255,0.8) 80%,rgba(255,255,255,0.9) 100%);
    	background: -o-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.5) 30%,rgba(255,255,255,0.8) 80%,rgba(255,255,255,0.9) 100%);
    	background: -ms-linear-gradient(top,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.5) 30%,rgba(255,255,255,0.8) 80%,rgba(255,255,255,0.9) 100%);
    	background: linear-gradient(to bottom,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.5) 30%,rgba(255,255,255,0.8) 80%,rgba(255,255,255,0.9) 100%);
    	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
    

    Please visit me at tsttechnology.com

    March 13, 2015 at 5:56 am #144285
    ngrechg
    Member

    Thanks a lot Dave
    What I finally did was to maintain the RGB as black (0,0,0) but lower the last number so now it's less dark.
    I may try what you suggest to see if I like it better 🙂
    Best regards

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

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble