Archived

This topic is now archived and is closed to further replies.

  • 0

Drop Shadow to content area


Question

Posted · Report post

How do I add drop shadow to my content area? I do not know CSS very well and need a simple explanation as to how to do this.  Thanks!

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

Hello Joel,

 

This link will explain (and demonstrate) the box-shadow element in CSS. http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

 

I suggest using the Try It Now (green) button, which will demonstrate its use.

 

There needs to be a unique class (part of a DIV)  that the element is added to.  In order to find that, you'll need to use Firebug for Firefox or, Chrome's Inspection Tool.  Of course, you can always add your own custom class. 

 

Are you familiar with using DIVs?

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you!

 

No I am not familiar with DIVs.

Share this post


Link to post
Share on other sites

Posted · Report post

Do you have Firebug?

Share this post


Link to post
Share on other sites

Posted · Report post

I'd suggest getting it, free, at www.getfirebug.com.

 

Meanwhile, can you point me to the particular box you want to shadow and I'll take a look, and give you some example code?

Share this post


Link to post
Share on other sites

Posted · Report post

url is: www.kidsbibleresources.com

 

I have a blue image as the BG image and then my content area is white. Can I have a drop shadow to be on both sides of my white content area.

Share this post


Link to post
Share on other sites

Posted · Report post

Ok, so I have firebug installed.

Share this post


Link to post
Share on other sites

Posted · Report post

My apologies.  Box-shadow won't work for the content-area.  The problem is that the content area is broken into several instances of the .content element, and since the box-shadow element doesn't allow you to assign a shadow to any specific side without shadowing the top and/or bottom as well; the net result of which is each portion of your page having its own shadow.

 

In that case, I'd recommend using a graphic solution in place of simple CSS. Unfortunately, this can take a toll on load time, and on the responsiveness of your site in mobile devices.

 

See the image below.  Honestly, I didn't think the element was so limiting.

post-6-0-09858200-1368289278_thumb.jpg

 

 

The graphic option can be seen here.  http://tinyurl.com/c83qo9d  This site incorporates both background and the shadowed whitespace.  However, it's using the Framework's background option, rather than CSS to apply the background to the .content area.

 

We could try that, if you prefer.

 

 

Share this post


Link to post
Share on other sites

Posted · Report post

I like the graphic option. How do I go about doing this?

Share this post


Link to post
Share on other sites

Posted · Report post

You look at the width of your content area set at Dashboard > PageLines > Site Options > Layout Editor.  It will be found in the little box at the bottom labelled Global Content Width (px).

 

Then, using a graphics tool such as Photoshop, you create a 1px high image, of the width found in that box.  So, if it says 1100, make a new image 1100px wide by 1px high.  Use the buttonize function of your graphics editor to set a 3 to 5px buttonize action to both sides of your image.  Save it with a unique name as a .png file.  I do not recommend .jpg as this can introduce interlacing (speckles) and we want to keep it white.

 

Upload the image to Dashboard > Media Library > Add New.  Copy the URL and make a note of it in a text file on your desktop. 

 

Try adding the image this way:

.canvas .page-canvas, .thepage  {
background-image: url(paste-the-full-URL-to-the-image-here);
background-repeat:repeat-x;
background-position:right top;
}

This would be pasted (after editing) into Dashboard > PageLines > Site Options > Custom Code, on any line after body {}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks! I think I understand, minus one thing:

 

What is the "buttonize action?"

 

I am using Photoshop CS6.

Share this post


Link to post
Share on other sites

Posted · Report post

Buttonize is a tool in most photo editors. It places a gradient shading on the perimeter of things.  So, on the right and left side, you'd have shades of grey, going from darkest at the outside, to lightest towards center, with whitespace being the 'top of the button'.  If you set the width of that buttonize function to 5px, then it will appear as 5 different shades of grey until white is reached.

 

may help you.

Share this post


Link to post
Share on other sites