I'm building a custom zen sub-theme and I'm using Drigg http://drupal.org/project/drigg as one component of my site. The author has built his own custom theme for the module so I am trying to incorporate elements of it into my design. Before I try and pull his template files apart and patch the php functions and whatnot into zen, has anyone else already made custom Zen/Drigg templates? Or anyone have ideas on the proper way to start so I don't have updating problems later? I have just about zero php experience, so making sure I preserve the functionality without throwing in a bunch of extra junk code into my site is paramount.

Comments

hokuspokus’s picture

hokuspokus commented

So to start with the template.php is 

<?php

function _phptemplate_variables($hook, $vars) {

  global $user;
  $node=$vars['node'];
  
  switch($hook) {

    case 'page' :

    case 'node' :

    break;
  } // END if the switch

  return $vars;

}

and looks pretty basic and may already work without modifying Zen.template.php.

The functions that I am trying to merge into Zen come from his page.tpl.php file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>">

<head>
  <title><?php print $head_title; ?></title>
  <?php print $head; ?>
  <?php print $styles; ?>
  <?php print $scripts; ?>

  <!-- REMOVE these if you are using jquery-update!! -->
  <script type="text/javascript" src="/misc/collapse-fix.js"></script>
  <script type="text/javascript" src="/misc/compat-1.0.js"></script>

</head>

<body>
  
  <div id="container">
    
    <div id="header">
      <div id="header_title">
        <?php if (!empty($site_name)): ?>
          <h1><a href="<?php print $base_path ?>" title="<?php print t('Home'); ?>"><?php print $site_name; ?></a></h1>
        <?php endif; ?>
        
        <?php if (!empty($site_slogan)): ?>
          <p><?php print $site_slogan; ?></p>
        <?php endif; ?>
        
        <div id="header_search">
          <?php print $search_box; ?>
        </div>
      </div>
    
      <?php if (module_exists('drigg')) { ?>
        <div id="header_categories">
          <?php
            if (module_exists('drigg')) {
              print drigg_ui_submit_button();
            }
          ?>
          <?php print drigg_ui_sections() ?>
        </div>
      <?php } ?>
      
      <?php if (!empty($breadcrumb)): ?>
        <div id="header_breadcrumb">
          <?php print $breadcrumb; ?>
        </div>
      <?php endif; ?>
      
      <?php if (!empty($header)): ?>
        <div id="header_content">
          <?php print $header; ?>
        </div>
      <?php endif; ?>
    </div> <!-- /header -->
    
    <div id="content">
      <?php if( $show_ads && ! ( arg(0) == 'node' && is_numeric(arg(1)) ) ) { ?>
        <div class="googleads_top">
          <!-- Google ad here. 468x60 works... -->
        </div>
      <?php } ?>

      <div id="content_center" class="column">
        <div class="controlbar clearfix">
          <?php if (!empty($title) && !( arg(0) == 'node' && is_numeric(arg(1)))) : ?>
            <h1><?php print $title; ?></h1>
          <?php endif; ?>
          <?php
            if ($page == 0 && module_exists('drigg')) {
              print drigg_ui_type_menu();
              print drigg_ui_order_menu();
            }
          ?>
        </div>
        
        <?php if (!empty($tabs)): ?>
          <div class="tabs"><?php print $tabs; ?></div>
        <?php endif; ?>
        
        <?php print $help; ?>
        <?php print $messages; ?>
        <?php print $content; ?>
      </div> <!-- /content_center -->
      
      <?php if (!empty($sidebar_left)): ?>
        <div id="content_left" class="column">
          <?php print $sidebar_left; ?>
        </div> <!-- /content_left -->
      <?php endif; ?>

      <?php if (!empty($sidebar_right)): ?>
        <div id="content_right" class="column">

          <?php print $sidebar_right; ?>

          <?php if( $show_ads) { ?>
            <div class="googleads_left">
              <!-- Google ad here. 160x600 works... -->
            </div>
          <?php } ?>
        </div> <!-- /content_right -->
      <?php endif; ?>

    </div> <!-- /content -->

    <div id="footer">
      <?php print $footer_message; ?>
    </div> <!-- /footer -->

    <?php print $closure; ?>
    
  </div> <!-- /container -->
</body>
</html>

Obviously I don't need his header layout functions since they are taken care of in zen, but the module specific sections seem problematic to me. Take for example 

      <div id="content_center" class="column">
        <div class="controlbar clearfix">
          <?php if (!empty($title) && !( arg(0) == 'node' && is_numeric(arg(1)))) : ?>
            <h1><?php print $title; ?></h1>
          <?php endif; ?>
          <?php
            if ($page == 0 && module_exists('drigg')) {
              print drigg_ui_type_menu();
              print drigg_ui_order_menu();
            }
          ?>
        </div>

would this be a function I would try to import into Zen? It doesn't seem like it, it seems like something I would just drop in a block, but maybe I am wrong and Zen would handle this as well.

FYI, the main reason I'm here is that the module author apparently has no theming experience and has referred all theme questions to the forums. My theme is Zen based, so here I be.

Thanks all

hokuspokus’s picture

hokuspokus commented

No help on this one, or is this the wrong place to ask these types of questions?

hokuspokus’s picture

hokuspokus commented

Okay, so one more hint from the documentation for Drigg:

Step 3b: Add the Drigg default theme

Drigg needs the theme to do a few very important things:
For example, in page.tpl.pgp it calls:

* print extra_voting_forms_insert_js_css() . This is needed by Extra Voting Forms
* print drigg_ui_sections();. This will print out the sections defined as a clickable menu.
* print drigg_ui_submit_button();. This will display the "submit" button
* print drigg_ui_type_menu();. This will define what the user is looking at, Drigg-wise: "Published", "Upcoming" or "Archived".
* print drigg_ui_order_menu();. This will allow the user to pick the story's order: newest, oldest, etc.

The example theme, in node-drigg.tpl.pgp, calls:

* print drigg_embed_contents(). This is to show embedded contents.
* drigg_rl_related_links_get_html(). This will pull up an unordered list of related scoops.
* drigg_ui_article_menu(). This will print the menu "Who voted", "Comments" etc. at the bottom of the article

The easiest way to go about the theme is to just use the default theme file that comes with Drigg. In the drigg directory (located under [your_server]/modules/drigg/, you will find:

* drigg_theme

Move or copy drigg_theme in the "themes" directory in your server located in [your_drupal_dir]/sites/all/themes

You now need to enable the theme. go to Administer -> Site Building -> Themes, and pick "Drigg Theme". The layout of your site will change dramatically. Now, your scoops will look right.

If no one can help with the specifics of this module and Zen, can anyone point me to a verbose guide for importing functions into Zen? I know michelle from advanced forum/profile had trouble getting her stuff in and she is a far better coder than I, but I can at least poke around and see what I can work out....with a little guidance of where to start.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented

My guess would be that Drigg is using path_to_theme() to find the template files. ?

But path_to_theme() returns the path to Zen and not the path to the sub-theme. So either change Drigg to use path_to_subtheme() (which won't work if you are using any non-Zen themes) or try putting the drigg_theme directory in the zen directory instead of your sub-themes directory.

thankfully, this kind of module/theme interaction become super easy in D6. Its just D5 that has no mechanism for a module to alter the theme.

hokuspokus’s picture

hokuspokus commented

Thanks John, that's a starting point at least. I'll work on it a bit and see what I can come up with.

thankfully, this kind of module/theme interaction become super easy in D6. Its just D5 that has no mechanism for a module to alter the theme.

Yep. It will be nice to not have to mash stuff like this together anymore. Come on Future, get here now!

yoroy’s picture

yoroy commented
Status: Active » Closed (fixed)

Cleanupup: closing older support requests, feel free to re-open if needed.

socialnicheguru’s picture

socialnicheguru commented
Version: 5.x-1.1 » 6.x-2.x-dev
Component: Subtheme: Zen Classic » Code

did you ever get this working? I am looking at the same thing.

hokuspokus’s picture

hokuspokus commented

Sorry no, I ended up just modifying the custom theme the Drigg author packaged with his module. At the time I didn't have the skill or the time to go through and build a zen-based drigg theme. The stock drigg themes went through some changes as well to add functionality, so in the end it turned out to be a good thing I didn't work too hard on building a separate Zen theme.

johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Component: Code » PHP Code

With the changes in Drupal 6's theme system, it could be possible that the Drigg module would no longer need a specific Drigg theme. But that's pretty far outside the scope of the Zen theme. :-\

hokuspokus’s picture

hokuspokus commented

Yeah, I'm migrating my site to 6 right now, finally time to make the jump and work all this out. Converting the Drigg Theme to a new custom theme I building off the Zen 960 subtheme. So far things are MUCH easier to figure out as far as theming goes in Six. Keep those interested posted in how it all turns out, should be about a week (since I am learning as I go still.)

slicedsoup’s picture

slicedsoup commented

What is the current status on the use of Drigg with a Zen based theme?
It would be great to have a setup guide for Zen or a basic Drigg-Zen theme to download.

hokuspokus’s picture

hokuspokus commented

I messed around with it and you can see the results here: ecoevolution.org/news (I still have to clean up the vote button a bit, still ugly.) I used Zen and the 960 subtheme, but I would have to look at how I did it again to see if there was a way to give a step by step. Basically I created page templates specifically for the news section and styled it that way, moving stuff to where I needed it and tweaking it here and there.

I can give more details if you need them

slicedsoup’s picture

slicedsoup commented

That's great hokuspokus, it would be great to get a step by step on this if that's possible. I'm sure there are many other Driggers out there that would help tweak this into a guide and maybe even a new Drigg theme to download.

Mars2012’s picture

Mars2012 commented

Hi,

I was looking for Drigg theme information and FINALLY I found this Issue.

I have a simple question.

How can I change my Drigg theme to adapt from 3 columns to 1,2 or 3, depending if it has blocks or not, like the Garland does.

Congratulations hokuspokus for your webpage.

hokuspokus’s picture

hokuspokus commented

Hi guys,

I'm running through my site now trying to remember how I set things up. This might sound a little convoluted but hopefully it will help a bit in understanding the drigg layout.

Here are the basic tools that you need to start building your own Drigg theme.

1. Firebug addon for Firefox- shows you the elements on the page and the CSS that controls them
2. Devel module for Drupal- most importantly, the theme developer tool. This shows you what template is being called and what to name a new template file if you want to change a page around. http://drupal.org/project/devel
3. Grab yourself a copy of Zen and zen960 themes, or any other base theme that lets you build up from scratch. http://drupal.org/project/zen , http://drupal.org/project/zen_ninesixty

For Drigg, you will have at least two different page templates (layouts) on your site: one for your Drigg newstream pages and one for every other type of content you have (if you have more than one type of content like I do.)

Page templates control the placement of everything on the page and reads from top to bottom in the order that things appear. They are found in your theme folder, Drigg has two included; drigg-theme and 4plus. Open the template files and look for the major sections like "head" and "content" and you will start to see how things are laid out on the page or within a node. Anything with a "print" command will be printed on the page as well, so that can help you see where things are going, section by section.

For my site and Zen using the Zen960 subtheme, I created several templates to handle drigg content, which are based off the ones found in the stock themes folder of Drigg, specifically node-drigg.tpl.php and page.tpl.php. The node template controls the appearance of the individual drigg stories or nodes, and the page template controls how the category menus, drigg river of news stream, sidebars, etc appear.

Enable Drigg and the stock drigg themes and start poking around with Firebug, Devel and a text editor and see how changing/moving things affects the layouts. Then you can start to get an idea of how to make things look how you want for Drigg. Don't be afraid of the crazy programmy talkin' in the templates, I don't know a thing about programming in php and I was able to crack this nut and make the site you saw. Keep asking questions here and I will help as much as I can.

Hokus

gizmoraft’s picture

gizmoraft commented

I managed to create a fully functional drigg theme in under a day, it's not fully designed, just putting some finishing touches before letting people use the service, but you can check it out and give some feedbacks. http://watsey.com

Mars2012’s picture

Mars2012 commented

Congratulations for your work in less than one day.

You start with a Zen based theme or you change the drigg theme?

Beside this I have a question:

How do you put the four columns (About WatSey, Business, Legal and Get Involved) in the footer?

You achive that with a module? If yes, which one?

Thanks.