How to add Different Box Shadows to Individual Content Block?

A user at Headway Themes forum was trying to achieve the above but was not successful. As per request, here are the steps on how to achieve it. Basically, we just need to declare the different type of shadow effects in Live CSS and then apply these shadows to the content. See the below picture for an example on how the final design will look like.

Reset Block to Default Setting

1.     Those of you who have been trying the shadow effect but with no success, it is best to clear away all the previous setting before you proceed with the steps so you would not encounter any conflicts.

2.     You can either delete away the whole content block in Grid mode or go to the individual property in Design mode; click on the little [ x ] besides it to restore to its default setting.

3.     Do a save once you are done.

Declare the Different Box Shadow Effects

4.     Go to Visual editor > Design mode.

5.     Hover over the content block; right click & click on “Edit this Instance”.

6.     This will bring up the “Option Panel” at the bottom of the screen, make sure “Content” & “Entry Container” are highlighted otherwise you could be changing the wrong selector.
(There will be high chance that users might click on “Body Text” instead of “Entry Container” since they are very close to each other.)

7.     Click on { } at the selector info to bring out the Live CSS editor.

8.     Inside the Live CSS editor, you will see the following has already inserted for you.

#block-3 post {

}

9.     Insert the following CSS code into the curly braces.

#block-3 .post {

  width:96%;  /*reduce the width of the text so that right shadow can be seen*/

  padding:10px; /*More spacing between the text & border*/

  margin-bottom:30px; /*To give more space between posts*/

  border: 1px #ababab solid;

}

10.  In this example, we are going to have 3 different types of shadow effects so we will insert the CSS code into the Live CSS code as well.

.shadow-1 {  

  -webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);

  -moz-box-shadow:    4px 4px 5px rgba(50, 50, 50, 0.75);

  box-shadow:         4px 4px 5px rgba(50, 50, 50, 0.75);

        }

.shadow-2 {

  box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #6B6B6B;

  -webkit-box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #6B6B6B;

  -moz-box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #6B6B6B;

  -o-box-shadow: inset 0px 0px 50px 0px #ABABAB,5px 5px 5px 1px #6B6B6B;

}

.shadow-3 {

  width:95%!important;

  position:relative;

  left:5px;

   -webkit-box-shadow: 0px 0px 14px rgba(50, 50, 50, 0.75);

-moz-box-shadow:    0px 0px 14px rgba(50, 50, 50, 0.75);

box-shadow:         0px 0px 14px rgba(50, 50, 50, 0.75);

}

11.  Do a save after the insertion.

Apply the Shadow Effect

12.  You are now ready to apply these shadows to the content. In this example, the blog post “Fourth Post” will use shadow-1 effect, “Third Post” will have shadow-2 effect & “Second Post” will have shadow-3 effect.

13.  Go back to the WordPress dashboard, go to the Post where you want to apply the shadow.

14.  For example, click on post named “Fourth Post” and scroll down until you see “Display” option.

15.  Key in shadow-1 in the entry box under “Custom CSS Class(es)” .

16.  Once done, scroll up and click on “Update” to save.

17.  Preview the changes in browser and you will see the “Fourth Post” has shadow effect applied to it.

18.  To apply the rest of the shadows such as shadow-2 & shadow-3 to other posts, click on the individual post you want and key in the shadow name.

19.  Remember to do a save when you are done.

If you only want one shadow box effect then you can forget about other shadows declaration (delete all the previous CSS code) and just add the following CSS code.

#block-3 .post {

  width:96%;  /*reduce the width of the text so that right shadow can be seen*/

  padding:10px; /*More spacing between the text & border*/

  margin-bottom:30px; /*To give more space between posts*/

  border: 1px #ababab solid;

  -webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.75);

  -moz-box-shadow:    4px 4px 5px rgba(50, 50, 50, 0.75);

  box-shadow:         4px 4px 5px rgba(50, 50, 50, 0.75);

}

Alternatively, you can create the box shadow directly from the Headway Themes option panel if you just need one uniform shadow box for your content block.