Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] Seamless drop shadow on bottom of center column


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Sep 5, 2012, 05:01 AM
86owen
 
42 posts · Mar 2011
Hello

I am working on a site here, http://umfs.gagnavist.is. Iīm trying to have a drop shadow on the center column but as you can see there is a space between the sidebars and the center column that I donīt want.

Is it possible to change this so that the space can not be seen.

I have these CSS setting on the Center column, left and right sidebar

Center:
-webkit-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);

Left sidebar:
padding: 10px 5px 0 0;
background: #transparent;
-webkit-box-shadow: -6px 8px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -6px 8px 5px rgba(50, 50, 50, 0.75);
box-shadow: -6px 8px 5px rgba(50, 50, 50, 0.75);

Right sidebar:
padding: 10px 0px 0px 5px;
background: #transparent;
-webkit-box-shadow: 6px 8px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 6px 8px 5px rgba(50, 50, 50, 0.75);
box-shadow: 6px 8px 5px rgba(50, 50, 50, 0.75);
  #2  
Old Sep 5, 2012, 05:56 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
try applying it to #bodyrow
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Sep 5, 2012, 06:49 AM
86owen
 
42 posts · Mar 2011
Set this style to the bodyrow ?

Center:
-webkit-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);

I have tried setting a style to this ID but to no avail.
  #4  
Old Sep 5, 2012, 06:54 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
So you put it in the CSS inserts option and used '#bodyrow' as the selector?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Sep 5, 2012, 06:55 AM
86owen
 
42 posts · Mar 2011
Yes, like this

#bodyrow {
background: #FFFFFF;
-webkit-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
}
  #6  
Old Sep 5, 2012, 07:13 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
take out the code for the middle and right - you'll probably have to fiddle with the code for the left - take it out at first so you can see what the bodyrow code does
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Sep 5, 2012, 10:10 AM
86owen
 
42 posts · Mar 2011
Ok, I have removed the style from the sidebars and center column but there is no bottom shadow on the bodyrow...
  #8  
Old Sep 5, 2012, 11:10 AM
lmilesw's Avatar
lmilesw
 
10,099 posts · Jul 2009
Central New York State USA
I see a drop shadow.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Sep 5, 2012, 12:44 PM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Try using 'background-color' if you are only using that one parameter
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Sep 6, 2012, 02:15 AM
86owen
 
42 posts · Mar 2011
Can you explain further juggledad ?
  #11  
Old Sep 6, 2012, 04:12 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
When you use the CSS rule 'background' that is the shorthand for all the background rules (background-repeat, background-color, background-image etc) but you only have one of the parameters. That can effect some browsers, so use background-color if you are only going to use that option.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Sep 6, 2012, 04:25 AM
86owen
 
42 posts · Mar 2011
Ok, now the style for bodyrow is like this but no shadow still

#bodyrow {
background-color: #FFFFFF;
-webkit-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
box-shadow: 1px 10px 5px rgba(50, 50, 50, 0.75);
}
  #13  
Old Sep 6, 2012, 05:56 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
ah looks like a browser issue, the shadow shows in FireFox but not Safari
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #14  
Old Sep 6, 2012, 05:58 AM
86owen
 
42 posts · Mar 2011
It does not show in Chrome either... and not IE9

Any chance this can be fixed ?
  #15  
Old Sep 6, 2012, 09:48 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Well, you could write to Apple and M/S asn ask them to correct it
seripusly, you'll need to search the internet for solutions, try Googling 'box shadow table row safari'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Sep 7, 2012, 03:15 AM
86owen
 
42 posts · Mar 2011
This did the trick

#bodyrow {
background-color: #FFFFFF;
-webkit-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.40);
-moz-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.40);
box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.40);
display: block;
width: 978px;
}

Adding display:block and setting the correct width.

Thanks for your help juggledad

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Space at bottom of Center Column MajorTom Header configuration & styling 2 Apr 16, 2012 04:29 PM
[SOLVED] Round corners on bottom of center column inkdork Center area post/pages 2 Mar 28, 2012 09:49 PM
How do I add a drop shadow to my layout? rockandstroll Atahualpa 3 Wordpress theme 1 Sep 1, 2011 01:40 AM
Drop shadow in center column kal Header configuration & styling 6 Jun 18, 2009 07:39 PM


All times are GMT -6. The time now is 02:35 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.