Drupal template file -- Created by Yubis IT Solutions

Drupal is driven by templates file. Basically, files ended in *.tpl.php are the template files.

• page.tpl.php
• node.tpl.php
• block.tpl.php

page.tpl.php controls most of the parts. For example, which CSS files are being called. It also determines what items to display (like your mission/ titles/ primary link menu bar)

node.tpl.php controls how the content should be displayed. For example, you don't want to add the comment link for the nodes, you may set it here.

block.tpl.php controls how the blocks should be displayed. Div class may be added to the blocks, which helps to let its layout be modified by CSS.

Padding Error -- Created by Yubis IT Solutions

This is how the tablized images appear like splitting apart!!

In the old days, a whole image used to be tablized/split into tiny pieces of images. It's really had to work it like that. In Drupal, we found that the tablized images will have "padding error", in which sense the images will just appear to be splitting apart even though no CSS is inserted. This only happens with the browsers of the new standard, not those in the old days (e.g. IE6/7)

There's a little bit of history. In the old days though not too long ago, websites are not confined to W3C standard. But then, when this standard appeared, the browser vendors had a tough choice. Option 1 is to follow strictly the standard, but this makes the website look bad. Another option is to please the design while giving up the standard.

So, 2 main modes emerged: quirk and strict. Quirk mode (old versions of IE like IE6/IE7) supports those old design, while strict mode (newer versions of IE, Firefox) supports the W3C standard and follows strictly to it.

Tablized images are really old-fashioned, and so problems occur in strict mode. The simplest solution is to force the browser to run in quirk mode. To do this, add an img tag of style: block

Of course, the easiest way to get rid of it is avoid using tablized images.

Ref: http://www.quirksmode.org/css/quirksmode.html

Change text into images

To change the email address/any text from text into image. This can be done automatically in Drupal using module called Textimage. I tried installing it and the result looks good. (REF: http://drupal.org/project/textimage)


The image background and font size/family can be set through this module. Auto-insertion can be done when buddled with this module. (REF: http://drupal.org/project/textimage_autoinsert)

Tools may help on customizing theme

CopyRights Reserved by Yubis IT Solution

These are very useful tools for you to trace the html code to find out the classes of element, in order to customize your design.


For FF:

Firebug:
download link: https://addons.mozilla.org/zh-TW/firefox/addon/1843

For IE:

Internet Explorer Web Developer Tools
download link: http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

Embed Youtube/ other 3party video

Instal the Drupal module called embedded video from http://drupal.org/project/emfield



After that, add this field to any content type you wanna put into. (Addr: /admin/content/node-type)

Select Manage field and then add a field called embedded video.




After that, every node created using this content type contains an embedded video field. Simply copy the youtube link like http://www.youtube.com/watch?v=K7KhcEAmCxQ&feature=related and the video can be shown. It does save steps in copying object tags to display youtube videos.




You can check what type of video could be embedded in /admin/content/emfield. Configuration can be as well done there.


PS. Not only video can be embedded, even flickr or other kinda media can be embedded. This can be achieved by enabling Embed media module from /admin/build/modules.

Install Slideshow Creator - Created by Yubis IT Solutions

Modules Needed:
1. Slideshow Creator -
dl link: http://drupalmodules.com/module/slideshow-creator
2. jQuery_plugin -
dl link: http://drupalmodules.com/module/jquery-plugins

Steps(Using drupal 6.x):
1. Site Configuration => Input format=> Configure => Tick SlideShow
2. Create a page => insert codes example in reference below to the "Body" section

Sample Code(for Testing):
[slideshow: 2, img=|http://drupal.org/themes/bluebeach/logos/drupal.org.png|drupal.org|Drupal|The ultimate CMS. Download it now!|Drupal|, img=|http://www.mysql.com/common/logos/mysql_100x52-64.gif|http://www.mysql.com|MySQL|Free and reliable SQL server and client.|_self|, dir=|files/|yes||Generic Photos|Arent they great?||]

To create a directory for images included in the slideshow:
(suppose the images placed in www\drupaltest\sites\default\files\frontpage_slideshow)

[slideshow: 2, rotate=6, blend=3, dir=|/frontpage_slideshow/|yes||Generic Photos|Aren't they great?||]

Other attributes can be shown in the README.TXT

Reference:
README.TXT in the module folder

Reference Link:
http://blog.csdn.net/bright60/archive/2009/01/04/3702890.aspx

Install Slider - Text

Modules Needed:
Slider - dl link: http://drupalmodules.com/module/slider

Steps(Using Drupal 6.x):
1. Install modules
2. Add content type:
Administer => Content Management => Content Type => Add
Slider Parent Node (slider_parent_node) , Slider Content (slider_content)















3. Slider Parent Node Configure => Add field =>
slider_content(Type:node_reference, configure=>Tick Slider Content)

4. Site Configuration => Slider => Tick Slider_Parent_Node
5. Create content => Slider content => type sth like what you do in a pag
6. Create content => Slider Parent Node => like Step 5 but highlight the slider content node to be included in "input format" section
7. Finish











Other Example: http://www.yubis.net/