This may be more a CSS question than purely a Drupal one, but I'm trying to figure out the best way to handle adding shadows to the bottom of containers using CSS. The method I'm currently using is by adding divs to the outside of a container (say a div at the bottom of the container div in the node-blog.tpl file), giving it a height and adding my background image. This is how I normally handle this particular type of shadow when creating static pages, but I wasn't sure if this was the best route to take when developing pages in Drupal.
This may be a fundamental styling question, but I'm trying to be as thorough as possible while learning to style these Drupal builds -- I want to become a better Drupal user -- so any help is greatly appreciated (and, of course, if this is not in the right place, please feel free to let me know).
Comments
Are you really hacking
Are you really hacking templates? You mean system templates? If, yes - that incorrect.
Because if you adding some html tags to you custom theme - it`s a good way and you are doing all fine.
It sorta depends on the
It sorta depends on the situation...three options I can think of:
1) Add padding-bottom to your main container and add the shadow as a background on that container, positioned at the bottom. However, there are times when that won't work (like if your container already needs a different background)
2) Add a div like you mentioned and use that for the background (make sure you're adding it to the page.tpl.php IN YOUR THEME, not in core).
3) Use CSS3's box-shadow, which is supported in WebKit (Chrome/Safari) using -webkit-box-shadow and Firefox using -moz-box-shadow, but not in IE. If IE support is a must for this shadow, use http://css3pie.com/ which is a really easy way to make IE support box-shadow. This would be my preferred route since I'd much rather mess with code than images, but to each his own.
I'm sorry, I should've
I'm sorry, I should've clarified. I'm adding these tags in template files within my custom theme folder. I'm not hacking core. I added a div tag to the bottom of my container element in the blog-node template file I created WITHIN the theme folder I created.
Unfortunately mcrittenden, the type of shadow I'm using cannot be achieved using method 3 (I'm going for a specific look, per the request of the client). This is also why I cannot use method 1, as the container div already has a background image attribute. Thanks so much for the suggestions, however; any help is always appreciated.
So it sounds like I'm doing this in the right spot?
...
The way you are doing it is very normal, adding an extra DIV in your template suggestion is fine - that's the way you should be doing it :)
Thanks Jeff. And thanks again
Thanks Jeff. And thanks again to everyone for the replies. I was worried I was doing this incorrectly.