Note:
Use this technique at your own risk! This is my own solution, so don't blame me if you get into trouble.
Well...
At first, let's go to the Falanx.hu site which will be our example.
As you can see, this page has a nice boxed front page content surrounded by header, footer, sidebars, with clickable titles, teasers, 'read more' links, pictures, etc. Neverthless, the top news has a different style! It looks like a front page ought to do...
So we have the challenge to put some boxes into the center and fill'em up with the appropriate contents, i.e. pulling the latest newsfrom different terms, without forgetting about the sticky news.
Let's split the task into two parts:
-create the boxes with CSS
-produce the appropriate queries
A plan:
figure out the front page's structure, the positions of the boxes. It will be a great help if we simply draw a plan like this.
CSS:
won't be a trouble if we have some CSS-knowledge, because this is how we will create the boxes. (of course, we could use tables for the layout, but we definitely don't discuss it here)
Furthermore download the Front_page module. Download and install, following the readme you'll find in the module mackage.
In this tutorial, we are going to create three different types of boxes:
-sticky box
-full-width box
-half-width box
The HTML structure is the following:
<!-- turn off the breadcrum -->
<style>#breadcrumb{display: none}</style>
<!-- sticky news here -->
<div id="front_wrap">
<div id="front_left1" class="front_half">
<h3>Itthon</h3><!-- box title -->
<!-- generated content -->
</div>
<div id="front_right1" class="front_half">
<h3>Nagyvilág</h3><!-- a boy title -->
<!-- generated content -->
</div>
<div id="front_middle3" class="front_middle">
<h3>Szubjektív</h3><!-- box title -->
<!-- generated content -->
</div>
</div>In this case we pull news from three categories -Itthon, Nagyvilág, Szubjektív. We don't need the bredcrumb, make the HTML structure and lable the appropriate boxes. (I usually use static content where possible, but you could make the titles dynamic, of course)
As you can see, we don't make a separate box for the sticky news: the Drupal handles it nicely by itself, we should only do a little css to emphasize it.
I used the following CSS code to create boxes (note: I tried to use minimal styling in this example for better viewing):
/* half-width box */
.front_half{float: left; width: 216px; margin-right: 14px;}
/* full-width box */
.front_middle{float: left; width: 447px;}
/* box title */
#front_wrap h3 {margin-bottom: 7px; border-bottom: 2px solid #cccccc; text-transform: uppercase}
/* news title */
#front_wrap .node h2.title a {border-bottom: 1px solid #aaaaaa}
/* let's add a little style for the images */
#front_wrap img {float: left; width: 70px; padding: 1px; margin: 4px 5px 0px 0px; border: 1px solid #aaaaaa}
/* 'read more' link */
a.front_more{display: block; float: right; margin-top: -12px; margin-bottom: 25px}
#front_right1{ margin-right: 0px; }
/* the separator */
.front_hr {display: block; clear: both; width: 216px;}So far, so good. Let's see the queries.
ote:
if you use nodevote module and don't want to see the stars on the front page, change the code in the first line of the HTML structure as described below:
<style>#breadcrumb, fieldset {display: none}</style>...and the CSS as well:
#front_wrap fieldset {display: none}Basically, we'll need two different types of queries:
-select the stiky news
-pull the latest news from categories
Note: don't forget that if a node is sticky and latest, we should take the necessary steps to avoid showing it twice
So we know all, let's see the queries:
Sticky news:(from any category)
$result1 = pager_query(db_rewrite_sql("SELECT n.nid, n.created FROM {node} n INNER JOIN term_node ON n.nid = term_node.nid WHERE n.type = 'story' AND n.status = 1 AND n.sticky = 1 ORDER BY n.created DESC"), 1);News for the boxes:
$result1 = pager_query(db_rewrite_sql("SELECT n.nid, n.created FROM {node} n INNER JOIN term_node ON n.nid = term_node.nid WHERE n.type = 'story' AND term_node.tid = X AND n.status = 1 AND n.sticky = 0 ORDER BY n.created DESC"), 2);Well, let's unify our HTML structure with the queries.
The whole thing looks like this:
<style>#breadcrumb, fieldset {display: none}</style>
<?php $result1 = pager_query(db_rewrite_sql("SELECT n.nid, n.created FROM {node} n INNER JOIN term_node ON n.nid = term_node.nid WHERE n.type = 'story' AND n.status = 1 AND n.sticky = 1 ORDER BY n.created DESC"), 1);
while ($node = db_fetch_object($result1)) {
$output .= node_view(node_load(array('nid' => $node->nid)), 1);
}
print $output;
?>
<?php unset ($output); ?>
<div id="front_wrap">
<div id="front_left1" class="front_half">
<h3>Itthon</h3>
<?php
$result1 = pager_query(db_rewrite_sql("SELECT n.nid, n.created FROM {node} n INNER JOIN term_node ON n.nid = term_node.nid WHERE n.type = 'story' AND term_node.tid = 2 AND n.status = 1 AND n.sticky = 0 ORDER BY n.created DESC"), 2);
while ($node = db_fetch_object($result1)) {
$output .= node_view(node_load(array('nid' => $node->nid)), 1);
$output .= '<a class="front_more" href="node/'.($node->nid).'">tovább...»</a>';
$output .= '<br class="front_hr" />';
}
print $output;
?>
</div>
<?php unset ($output); ?>
<div id="front_right1" class="front_half">
<h3>Nagyvilág</h3>
<?php
$result1 = pager_query(db_rewrite_sql("SELECT n.nid, n.created FROM {node} n INNER JOIN term_node ON n.nid = term_node.nid WHERE n.type = 'story' AND term_node.tid = 3 AND n.status = 1 AND n.sticky = 0 ORDER BY n.created DESC"), 2);
while ($node = db_fetch_object($result1)) {
$output .= node_view(node_load(array('nid' => $node->nid)), 1);
$output .= '<a class="front_more" href="node/'.($node->nid).'">tovább...»</a>';
$output .= '<br class="front_hr" />';
}
print $output;
?>
</div>
<?php unset ($output); ?>
<div id="front_middle3" class="front_middle">
<h3>Szubjektív</h3>
<?php
$result1 = pager_query(db_rewrite_sql("SELECT n.nid, n.created FROM {node} n INNER JOIN term_node ON n.nid = term_node.nid WHERE n.type = 'story' AND term_node.tid = 6 AND n.status = 1 AND n.sticky = 0 ORDER BY n.created DESC"), 2);
while ($node = db_fetch_object($result1)) {
$output .= node_view(node_load(array('nid' => $node->nid)), 1);
$output .= '<a class="front_more" href="node/'.($node->nid).'">tovább...»</a>';
$output .= '<br class="front_hr" />';
}
print $output;
?>
</div>
<?php unset ($output); ?>
</div>Please don't forget the following little code:
<?php unset ($output); ?>The whole code must be copied for anonymous and authenticated users under administer -> settings -> front_page.
Enjoy :)