Tutorial: The Anatomy of a Front Page
I recently revamped the front page look at Ubercart.org in preparation for an eventual (hopefully sooner rather than later) first release. In the process, I learned once again that all the wonderful contributors have made Drupal an excellent tool for designing web pages. With a simple combination of Panels, Views, and Drupal's own content type creation, I was able to achieve what you see there with no headache whatsoever. It was just too easy!
What isn't necessarily easy is knowing the tools exist to do something like that and how to use them together for your site. I decided to spend some time writing up my experience, including the preliminary thought processes and then actual configuration of the modules, so others could benefit from my fun. The voice in the tutorial is pretty informal, but I trust it gets the job done. Also, I'm just darn proud of the end result and thought I'd put this up to get some feedback while helping people, too. ; )
From the tutorial's introduction:
Purpose: Describe the thought processes and modules used to design the front page of Ubercart.org, a site designed to be both an information portal and user/developer community.
Modules explained: Drupal's own content type creation, Views, and Panels.
Honorable mentions: Deciding on what to display, visual aids, "enhancing" the forums and Navigation menu.
The tutorial is available here: http://ryan.grinhost.net/tutorial/2007/anatomy_front_page
The end result is visible here: http://www.ubercart.org/
I'd love to have your feedback and get more ideas for easy, fun page creation!
Thanks!
Very well done front page! Thanks for the tutorial. I'm building my first Drupal site (www.lostinpanama.com)and that is exactly what I needed.
Sylvain Duford
www.lostinpanama.com www.duford.com www.tragicplanet.org www.digitalfotographer.com
excellent tutorial.
Thanks for posting it.
Thsnk for a great job
I like the writing style -- it's friendly. Past being engaging and showing such an up-beat personality, your creative process of working through the features of Views and Panels give me courage to try to do some pretty similar kinds of things. In fact it's amazing that one can do such stuff without having to get to coding themes. Hooray! A million thanks!
Awesome! I'm glad this has
Awesome! I'm glad this has benefited you all, and I hope it helps many more. : )
It's nice, like you said, to be able to accomplish something that looks sharp and gets the job done without being a total design genius. Many geniuses have paved the way for us with Drupal and the contributed modules. ^_^
Side note: flatforum code?
I noticed in your tutorial that you mentioned you had to do some workaround with the flatforum.
Do you mind posting your node-forum.tpl.php? I've gotten flatforum installed, but dangitall if I can't seem to get it to orient properly on the page. Studying your code would help me a great deal!
Thanks in advance. Sorry for detracting from the tutorial at hand.
hehe No problem. I'll
hehe No problem. I'll package up what I've got on Monday. Like I said, I'd like to tweak it more... you'll notice it's overwriting the precomment block I setup for Google AdSense, and I'm not happy with the left side yet. I did find it best to use hook_nodeapi to remove the forum navigation links (http://drupal.org/node/115442) and make sure comments were displayed linearly instead of "threaded." I'll have to get with Lyle at work to see if he had to make any other changes, too.
thanks a lot for the
thanks a lot for the tutorial,
Flatforum tweaks wanted
Thank you for taking the time to write this up. I'm sure it will save me and a lot of other people some precious time.
I too am interested in your tweaks for the forum. It would be most helpful if you could post them somewhere "public" when you get a chance.
Thanks again.
My apologies to
My apologies to Cross_and_Flame... I totally forgot to do that on Monday. When I get a chance, I'll put the code up at our site and post back here.
----------------------
Current Drupal project: http://www.ubercart.org
Ok... so I got stuck
Ok... so I got stuck finalizing and bugfixing the uBrowser module with the rest of my day (and finalizing an order for a lady in Mexico.. woohoo). So, I've gotta post the stuff tomorrow... Sorry again. = P
----------------------
Current Drupal project: http://www.ubercart.org
It's up! Let me know if
It's up! Let me know if it's still not working for you using these files:
http://www.ubercart.org/forum/general_discussion/267/flatforum_garland#c...
----------------------
Current Drupal project: http://www.ubercart.org
Great works！
glad to see it here. I will build my front page with it. so ,thanks again. hope to get mare works.
http://www.wenhuo.com
thank you
rszrama nice tutorial.
Another good one for the views module http://drupal.org/node/63230.
Take out left column??
Looks good tutorial; read it a little while ago, and now back to actually have a go.
Been wondering: have you thought of also getting rid of your left column for the front page?
____________________________
CheungChauHK 長洲HK - South China Sea island in Hong Kong.
Hmm... you know, I hadn't
Hmm... you know, I hadn't really thought of it. (I think mostly because then I'd have too much real estate on screen and Garland doesn't play well with logos and no left column.)
For those interested, this would be simple to do through your blocks configuration page. Just go to your blocks' configure pages and scroll down to the section headed "Page specific visibility settings." Keep the first radio select box marked and put in the text area below it. That should hide it nice and tidy.
----------------------
Current Drupal project: http://www.ubercart.org
just content column for front page
It's something I'm experimenting with - got a little way with a new frontpage (not yet live) using views much as you describe; tho I have adapted Aberdeen template. I also figure Views could make for some fine custom menus, tho another step or two away.
If and when I get something I'm fairly happy with, will post back.
Edit: well, not perfect, but now have frontpage (newfrontpage - old version still around should I wish to revert) without regular Drupal columns.
A full width "welcome" message: just using panels.
Then, left column with teasers of some article nodes, as per frontpage normally. Right column has lists of articles, forum topics, blog posts (only few as yet). Hopefully useful both for search engines to find and index articles (and pass on pagerank, should the site recevie any!), as well as for users navigating. For these columns, first created pages in views.
Hardly ideal - but may be useful for others to have look at, even if to assess what not to do!
One oddity: tried including login block, but didn't appear; maybe as Views/Panel "thinks" people viewing are authenticated, tho may change in future judging by thread I've found.
____________________________
CheungChauHK 長洲HK - South China Sea island in Hong Kong.
Hey Doc... couldn't get your
Hey Doc... couldn't get your page to load. Is it supposed to be the one in your signature?
cheungchauhk
I'm very slow to return to Drupal site.
Yes, it's the front page of the site in my signature - had some server troubles lately, but working just now.
Nodeteaser module also helping with this front page.
Martin
____________________________
CheungChauHK 長洲HK - South China Sea island in Hong Kong.
thanks, thats really helpful
thanks, thats really helpful for us beginners
www.netidme.net
Thanks
Thank you so much rszrama. This tutorial was really useful to me!
Awesome! :) Glad people are
Awesome! :) Glad people are finding it helpful.
Thanks for the great tutorial...
I thought I was going to have to spend some serious time figuring out how to use panels. This is just what the doctor ordered!
lsabug