• 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

How to have shadows/borders on images

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 › How to have shadows/borders on images

This topic is: not resolved

Tagged: background, border. shadow, image

  • This topic has 5 replies, 3 voices, and was last updated 7 years, 3 months ago by carasmo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 2, 2015 at 7:57 am #172424
    brookelustig
    Member

    Hello everyone, I have a coupe of pictures (screenshots) on a couple of pages and I'm trying to create shadows and border like they have on http://my.studiopress.com/themes/ but can't seem to figure it out. My background is also white and I'm using the parallax theme but for some reason the images are not changing when I apply changes to the style.css.

    Any advice on how to make the images have the same background as the studiopress website?

    Cheers,

    Brooke

    December 2, 2015 at 10:10 am #172478
    Mike
    Member

    Hi Brooke,

    Inspect those elements using Firebug or Chrome web dev tools and look for the comment /* Themes Loop */. Beneath that is the .theme-wrap class which will get you started.

    Mike

    December 2, 2015 at 2:50 pm #172511
    brookelustig
    Member

    Hi Mike, thank you for your advice, so I copied the following to the style css and added the class to my html and image but nothing happens...any tips?? I only have very basic knowledge about html and css so any advice would be so helpful!

    .theme-wrap {
    background: rgba( 0, 0, 0, 0.9 );
    color: #fff;
    display: block;
    height: 100%;
    left: 0px;
    opacity: 0;
    padding: 20px 40px;
    padding: 2rem 4rem;
    position: absolute;
    top: 0px;
    text-align: center;
    width: 100%;
    }

    December 3, 2015 at 8:52 am #172598
    brookelustig
    Member

    Still banging my head against the wall with this ..could anyone point me towards the right direction, please?

    December 3, 2015 at 9:14 am #172602
    Mike
    Member

    Sorry Brooke,

    I'd have to really dig into this & I'm swamped with work at the moment.

    December 3, 2015 at 10:12 am #172608
    carasmo
    Participant

    find the image class or the direct parent of the image:

    Direct parent:

    .parent-div img {
      box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.43);
    }
    

    OR --- if it's the image itself

    .img-class {
      box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.43);
    }

    This will make all images inside a class .theme-wrap have a shadow:

    .theme-wrap img {
      box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.43);
    }

    https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow


    Genesis Theme Customization and Help

  • 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