Cours et tutoriel de design drupal. Tutorial: How to make a better Ubercart product page. Nifty Products Tutorial Part 1. In this tutorial we are going to teach you how to theme your products page. We will get started by creating the node file which we are going to edit to create the mark-up (HTML), so we can style it using CSS at a later date. Ubercart uses a content type called product for it’s nodes so we will create file shown below. node-product.tpl.php Note: If you use a different content type for your products, just put the content type name where I have put the product in the above. We will now create the mark-up(HTML) /php for the product display.
<? I’ve tryed to comment everything explaining what each bit does the $variables are pulled from the $node array. Placing the above code at the bottom of your new node file should print the $node array just in case you might want to display more data. Now all you have to-do is upload your new node file to your active theme folder. Your product page won’t look much now but when you add some new CSS Styles it will look ACE! Easier wireframing with Drupal components for Balsamiq Mockups.
This little project had been on my hit list for months, but I finally put together some Drupal-specific components for Balsamiq Mockups , the wireframe application. It’s cross-platform (Adobe AIR ) and costs $79, but is free or discounted in a number of situations (including if you’re an open source contributor, ahem). Simply download the attached .bmml file , open in Balsamiq and you can copy over any of the components to your wireframes, including: Header with logo, site name, slogan, primary and secondary links Node teasers with $submitted, tags, different types of $links, feed icon Sidebar with common blocks like search, user login, menus A Drupal-style pager Footer menu and footer message Drupal messages: warning, help, status, error Breadcrumbs, local task tabs Full node page with comment thread and form A few extra blocks like Quicktabs, view of recent comments, and Ubercart shopping cart block.
Grok Drupal (7) Theming.