By ncd on

I am trying to create a theme from scratch for my brother's portfolio site. Now, I have made a theme for Drupal before, but all I did was take an existing theme 'Nista' and change the images and colors (you can see what I did here: www.drdhaarts.com ).

There are a couple of things I would like to accomplish with the theme, on of them being a random image in one of the cells of the table. Is this possible? I saw on the forum a box with a random image script. I want to make a fluid bar on the left and top.

I am not the greatest with css, and I was wondering if anyone would give me some tips on Drupal theming. If you look at this: www.namaillo.com/images/sample.jpg you can get an idea of what I am trying to make into a theme. Is there a similar theme made that I could use as a basis? How would I make the links section? Is there a guide already where these questions could be answered? Am I asking too many questions?

⋅ Categories: Drupal 5.x

Comments

CmsTT’s picture

CmsTT commented

There is nothing like to many questions. So, don't worry. I am not that great with CSS either. But, acquainted enough with it, to say that the theme you want to make would not be that difficult, with some research, and reference work. Like anything else, IMHO the best way to learn is by using a step by step tutorials. Also, because I am also a beginner, I would say some tips would be, to START SIMPLE. I mean real simple (navbar (single column) header, content area footer) to get you head round Drupal's, Robust, flexible but, at times, confusing PHP templating system. Also, study the markup structure of well "established" themes (Zen, garland etc) and "borrow" code snippets from them. This is the best approach because you can be assured more or less that the coding in those themes "works" I realized after much agony there is no short cuts in learning to theme (in my company I most likely going to have a graphic designer, since I suck in graphics and CSS structure). IMO Zen is an ok starting theme. I also found "Golden hour" to be somewhat good and friendly to work with. You can search for it in the themes section. I hope this helps.

ncd’s picture

ncd commented

All right, I kind of understand what you're talking about. When I was making my previous theme, while looking at the code, I noticed that it works pretty different than other CMSs like Joomla or Zencart.

sepeck’s picture

sepeck commented

It's do-able.

To get started getting more familiar with Drupal theme's, check out This quick tutorial. After that, check out this web cast. This is about 2-4 hours of playing :)

Looking at your mock up.... Two column theme...
The random image could be handled two ways.
1. php script in the theme itself.
2. php script in a block.

Links go here would be the 'primary links' (see blue marine for example)
The site name and content is also covered in the tutorial.

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide -|- Black Mountain

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

ncd’s picture

ncd commented

OK, thats useful. I will check out the tutorials.

As for making the random image, what would you suggest the better way to go - in the theme, or in a block?

ncd’s picture

ncd commented

OK so I've got something up but I can't figure out how to do the continuous lower left area (see link above). I did manage the random image though.

This is the table code in the main file so far:


<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" rowspan="3">
<?php
$total = "3";
$start = "1";
$file_type = ".jpg";
$image_folder = "files/rand";
$random = mt_rand($start, $total);
$image_name = $random . $file_type;
echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />";
?>
	</td>
    <td bgcolor="#999999" height="52" id="menu"><img src="images/spacer.gif" width="3o" height="52" alt="">
	  <?php if (isset($secondary_links)) { ?><?php print theme('links', $secondary_links, array('class' =>'links', 'id' => 'subnavlist')) ?><?php } ?>
      <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' =>'links', 'id' => 'navlist')) ?><?php } ?>
      <?php print $search_box ?>
	</td>
  </tr>
  <tr>
    <td height="44" id="logo">
      <?php if ($site_name) { ?><h1 class='mainhead'><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
      <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>
	  </h1>
	</td>
  </tr>
  <tr>
    <td rowspan="2">      
	<?php if ($mission) { ?><div id="mission"><?php print $mission ?></div><?php } ?>
      <div id="main">
        <?php print $breadcrumb ?>
        <h1 class="title"><?php print $title ?></h1>
        <div class="tabs"><?php print $tabs ?></div>
        <?php print $help ?>
        <?php print $messages ?>
        <?php print $content; ?>
        <?php print $feed_icons; ?>
      </div></td>
  </tr>
  <tr>
    <td width="200" height="100%" background="themes/namaillo/images/left.gif"><img src="themes/namaillo/images/left.gif" width="200" height="616" alt=""> </td>
  </tr>
</table>

The last cell is the one I am having problems with. Does the cell background image work in Drupal?

hsalazar’s picture

hsalazar commented

Writing a theme from scratch doesn't mean you need to code all by hand. If I were you, I'd simply install the SWFTools module and use the Jeroen Wijering's image rotator module either in the left block or in a different region built specifically to put there the rotating image. This way you wouldn't need to lay a hand on your theme once it's working.

Cheers

hsalazar
www.periodismocientifico.com

ncd’s picture

ncd commented

Well that's pretty cool actually for random images, and true, it makes it easier to add more pictures. But, it doesn't solve my problem with the box in the bottom left. I am trying to code it as I would in plain html, but it doesn't quite work.

What I want is www.namaillo.com/images/sample.jpg and what I get is www.namaillo.com/port/
The whole cell does not show up at all.