• 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

Cool box shadow effects on responsive slider

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 › Cool box shadow effects on responsive slider

This topic is: not resolved
  • This topic has 10 replies, 3 voices, and was last updated 12 years, 2 months ago by cehwitham.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 8, 2013 at 9:01 pm #19146
    cotaylo
    Member

    I'd really like to add a cool box shadow effect to my slider here: http://216.172.181.99/~cchs/

    I like the box shadows here (effect #7): http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

    The suggested code is:
    The HTML


    Effect 7

    The CSS

    .box h3{
    text-align:center;
    position:relative;
    top:80px;
    }
    .box {
    width:70%;
    height:200px;
    background:#FFF;
    margin:40px auto;
    }
    /*==================================================
    * Effect 7
    * ===============================================*/
    .effect7
    {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    .effect7:before, .effect7:after
    {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
    }
    .effect7:after
    {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
    }

    However, I'm not really sure where to put it or if it will mesh with the existing genesis code.
    Anyone want to hold my hand and help me figure out how to do it? Pretty Please. 🙂

    Thanks!

    February 21, 2013 at 3:58 pm #22070
    cehwitham
    Member

    All the CSS needs adding to your style.css file. In /wp-content/themes/[child-theme]/

    I'd use #genesis-responsive-slider instead of .effect-7

    Ignore the .box h3 and .box styles, just add the following to the .effect-7 styles:

    margin:40px auto;


    Twitter: cehwitham Web: cehwitham.com

    February 22, 2013 at 4:13 pm #22300
    ntety
    Member

    Should the changes be made via the cPanel or is it okay to make them on the wordpress side of things? Thanks!

    February 22, 2013 at 7:35 pm #22332
    ntety
    Member

    Where does the HTML code go?

     

    finallyourwedding.com

     

    Thanks

    February 25, 2013 at 5:15 pm #22784
    cehwitham
    Member

    You can use the Editor within WordPress to make changes to style.css or you rcan edit this file through FTP.


    Twitter: cehwitham Web: cehwitham.com

    February 25, 2013 at 5:20 pm #22786
    ntety
    Member

    Thanks for your response. I asked because there was an HTML code section AND a CSS code section. I thought I had to implement them each. I want to use shadow effect 7. I copied and pasted the CSS code within the wordpress editor but nothing changed with my slider. How do I call the change to the slider?

    Thanks again!

    February 25, 2013 at 5:49 pm #22795
    cehwitham
    Member

    Did you change the selectors you were using as I suggested?

    Once you've saved the code in the editor you should just have to refresh your website in the browser to see the changes.


    Twitter: cehwitham Web: cehwitham.com

    February 25, 2013 at 6:39 pm #22803
    ntety
    Member

    Below is what I've gathered from the above and placed in the CSS file. I'm getting strange results:

    http://www.finallyourwedding.com

    #genesis-responsive-slider
    {
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    #genesis-responsive-slider:before, #genesis-responsive-slider:after
    {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
    margin:40px auto;
    }
    #genesis-responsive-slider:after
    {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
    }

    February 26, 2013 at 6:33 am #22878
    cehwitham
    Member

    Remove all the styling that is currently there and add the following to style.css:

    #genesis-responsive-slider
    {
    height:450px;
    position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    #genesis-responsive-slider:before, #genesis-responsive-slider:after
    {
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
    }
    #genesis-responsive-slider:after
    {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
    -moz-transform:skew(8deg) rotate(3deg);
    -ms-transform:skew(8deg) rotate(3deg);
    -o-transform:skew(8deg) rotate(3deg);
    transform:skew(8deg) rotate(3deg);
    }

    Chris


    Twitter: cehwitham Web: cehwitham.com

    February 26, 2013 at 9:12 am #22906
    ntety
    Member

    That did it! You guys are awesome...

    Cheers!

    February 26, 2013 at 9:45 am #22915
    cehwitham
    Member

    No problem, pleased I was able to help you.


    Twitter: cehwitham Web: cehwitham.com

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 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

© 2025 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