Church web site - Simple but effective

lacitpo - February 23, 2009 - 02:00

I am finishing up a web site for my parents church and I thought others could get some benefit off of what I've done here. This is a very simple site but for many organizations, this is all you really need.

I got a lot of my creative influence from this post and the linked site. Anyone with eyes will be able to see the similarities.

I'm using Drupal 6.9 (latest stable at the time of creation)

Modules Installed:
CCK - only because I know I'll end up using it. Currently not used for any part of the site.
Views - Couldn't expound enough on how useful this module is.
Panels - For front page layout.
Inline - For easy embedding of pictures and attachments within nodes.
Webform - Future use for things like prayer requests. Very versatile.
Read More Tweak - Helps layout a lot

For a theme I started with the Foundation theme and built from the ground up. This is my first ever experience with real CSS and it was a real learning experience. I used Firebug for everything and I can't imagine how I could have ever done it without it. If you have always wanted to learn to theme drupal, Firebug is awesome.

All my graphics are custom done in photoshop. Not that difficult of stuff. Simple gradients and rounded rectangles but it gives the site a nice look.

The Random Image block on the upper right is done via the code found here and was pretty simple to get working.

Future plans will integrate a calendar and podcasts but to be honest, all of that seems pretty simple after all the CSS work. Hope this helps someone else out. Anyone got any constructive criticism or comments?

_

WorldFallz - February 23, 2009 - 02:23

um.... the link? ;-)

_
Don't be a Help Vampire - read and abide the forum guidelines.
If you find my assistance useful, please pay it forward to your fellow drupalers.

Haha, of course I forgot

lacitpo - February 23, 2009 - 03:06

Haha, of course I forgot that

http://new.saintandy.org

Doesn't appear I can edit my original post so I guess the link will forever remain here....

Some thoughts

Keyz - February 23, 2009 - 04:19

Pretty nice. A few thoughts:

  • Consider some sort of button or tab design for your main navigation. Just the text links that way don't say "I'm the menu" to a visitor. Even just put a background color behind each item, or throw on a little something like this (the round edge part does not affect IE... if that matters to you, then you'd have to use a less-simple method):
    .navigation-primary ul.menu li a {
      background-color: #6DE966;
      padding: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
    }

    Having it affect the "a" (link) makes the whole box clickable.

  • Your border edges are pretty rough looking. Either add a "matte" color when you export a transparent gif, or else switch to transparent png images (and you will need a "pngfix" script to make it work in IE6, if it matters to you). If you don't mind requiring Javascript to have the round edges show up there are a variety of "instant round corners" scripts to use. For the rare user with Javascript disabled, nothing will change, just the edges will not be round. Here's a great "roundup" of CSS and/or Javascript methods for round edges.
  • Same regarding the logo and the "Facebook" text... pretty jagged looking. So far as the logo, again use a matte color if it is transparent, or since it's in a static location in the header, just export it with the same background gradient behind it. A matte (using a sample from that blue color) should suffice though. The Facebook text is on completely solid white, so there's no reason for it to be transparent at all.
  • Remove the underline from the site title text, and make it a different color, e.g. white or a very slight off-white. It's also overwhelmingly large - I'd bring down the size a bit.
  • I suggest "not" having those drop shadows on the titles of the blocks (Mission, Worship). Drop shadows are usually not a good design move, unless you have a good reason and can execute it properly. I'd suggest instead using a different color to contrast the following text, and also consider using a different font for headings, such as Georgia (serif fonts for headings, with sans-serif for body text is perfectly fine). Or try a sans-serif font like "Trebuchet MS" (a web safe font).
  • I'd go with a different link color. Try something a little less primary blue. Also set your heading tags that are also links not to be underlined.
  • Set your "submitted by" text to a lighter shade, and possibly make it italic. This will help set it apart and give visual organization to the content.
  • The blocks in your right side bar are a bit haphazard. Make sure to contain and align them.
  • Consider using an image for your search button instead of the form button, which will look quite a bit nicer. Here's the code I personally use, to change it with just CSS:
    #header #search input {
      background: transparent url(images/search-bg.gif) no-repeat;
      float: left;
      width: 122px;
      height: 22px;
      border: none;
      padding: 4px 2px 2px 20px;
      color: #6D6E73;
    }

    #header #search input.form-submit {
      background: transparent url(images/search-go.gif) no-repeat;
      display: block;
      padding: 0 0 2px 0;
      border: 0;
      margin: 0;
      white-space: nowrap;
      width: 31px;
      height: 22px;
      text-decoration: none;
      color: #44474B;
      float: left;
    }

    Obviously only some of that will apply to your own search form, so remove what's unneeded. If not an image, even just style the form button at all, and it will look better up there than the default form button.

    If you want to change the search button's text, this is an easy way (in page.tpl.php... Go is what I changed mine to, though only do that if you have other "search" indication):
    <?php print str_replace('value="Search"', 'value="Go"', $search_box); ?>

Hope this helps :)

-- David
davidnewkerk.com | absolutecross.com
View my Drupal lessons & guides

Wow! Thats all really great

lacitpo - February 23, 2009 - 06:13

Wow!

Thats all really great stuff. I'll probably implement a bunch of that in the coming weeks. Pretty new at this so absolutely love the input. CSS has been a real learning experience but I really understand now why it's so superior to everything else.

Im new, but why dont you use

gear001 - April 2, 2009 - 00:33

Im new, but why dont you use http://drupal.org/project/ddblock its a cool mod, that can make the top right block an image a slide show. It would look better and give more insight to your church. I just made my first sit too.

www.fastacservice.com

 
 

Drupal is a registered trademark of Dries Buytaert.