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 » Montezuma Theme »

box shadow


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 Jan 13, 2013, 06:59 AM
Ilke
 
78 posts · Aug 2010
Hi,
I used a box shadow on my Montezuma website, and it works nicely on mac osx and safari. On chrome it doesn't show at all, on pc and firefox kind of, but the menu and widgets are sticking out on the right, and on an iPad there is no shadow (and the tagline disappears and the breadcrumbs are not covering the complete width). The code I use in the MO content.css is

body {
margin: 40px 200px 40px 200px;
padding: 20px 0 0 0;
...
background: #ffffff;
box-shadow: 0 0 60px #ccc;
-moz-box-shadow: 0 0 60px #ccc;
}

I'm afraid I also messed up on the margin, since on small screens the site is only half visible on the right side. Should I maybe use a different grid then the responsive 960px margin 0?

For a moment I thought I had it nailed, but seeing the site on other screens and devices makes me feel quite lost again...
I'll keep trying, but I'd also appreciate any support very much.
Thanks,
Ilke
  #2  
Old Jan 13, 2013, 12:04 PM
Ilke
 
78 posts · Aug 2010
Okay, that wasn't very smart. I put the box-shadow into the MO content.css right under border box

.row, .lw {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
o-box-sizing: content-box;
box-shadow: 0 0 60px #ccc;
-moz-box-shadow: 0 0 60px #ccc;
}

and that works fine on all browsers.
I still have to tackle the problem of the breadcrumbs and the footer having a shadow, too, but it's a lot better.

I also know that the margins I chose are completely wrong. I want to the site to have a fixed width, at least flexible to a certain point only. But of course I don't want a margin of 200px on a small screen. So I'll be at it some more.

Last edited by juggledad; Jan 13, 2013 at 06:40 PM.
  #3  
Old Jan 13, 2013, 01:38 PM
Ilke
 
78 posts · Aug 2010
Okay, I am giving up for now.
I want the page to be 960px wide. Now the header is aligned left, the content is in the center, the footer also, but broader, and the breadcrumbs as well as some horizontal lines cover the entire width of the screen except for the 20px padding.

The unwanted box-shadow on top of the breadcrumbs and the footer have become minor problems, although I'd like them gone, too.

Can anybody tell me what I need to do (yes, learn more about css is part of that)?
  #4  
Old Jan 13, 2013, 01:39 PM
Ilke
 
78 posts · Aug 2010
BTW, the site can be found here: www.tastenfischer.de
  #5  
Old Jan 13, 2013, 06:21 PM
jerryc
 
367 posts · Oct 2012
Florida
Quote:
Originally Posted by Ilke
Now the header is aligned left, the content is in the center, the footer also, but broader, and the breadcrumbs as well as some horizontal lines cover the entire width of the screen except for the 20px padding.
Yep, you have a mess.

Quote:
Can anybody tell me what I need to do (yes, learn more about css is part of that)?
The way I learned css layout was by giving various divs different background colors. Remember, the background color will cover all the padding, but not the margins; margins will keep the bg color of the parent element. Try that and you may get some aha's.

Also, did you validate your css and html? That's always a good place to start.
  #6  
Old Jan 14, 2013, 02:49 AM
Ilke
 
78 posts · Aug 2010
Yes, I use the background colors, too, to find out which part I am working on. I'll start off with an older, less messy, saved version. Good to know that the margins don't get any bg color, I'd been wondering.
Thanks.
  #7  
Old Jan 14, 2013, 04:29 AM
juggledad's Avatar
juggledad
 
22,244 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you might want to re-read the section mto->Editing CSS->box-sizing: border-box
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Tags
box shadow, different screens, grid

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to put shadow around sidebars OsmanSafdar Sidebars & Widgets 4 Sep 24, 2012 04:29 AM
How to add shadow? ontrackdesignz Page & Category Menu Bars 5 Oct 4, 2010 03:37 PM


All times are GMT -6. The time now is 06:32 PM.


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