My Drupal for Fun: Customize Acquia Marina to Be Similar to Its Screenshot

I consider myself as a newbie on CMSs, particularly Drupal. In other words, I am in a middle of the high slope part of Drupal’s steep-learning curve. Based on my personal experience, the best way of learning a new thing is by doing and getting through it. So, I set up Drupal environment which consists of Apache HTTP server 2.2.17, MySQL 5.1.53, PHP 5.3.4, phpMyAdmin 3.3.8.1, and Drupal 6.19 with Acquia Marina 6.x-3.1, Fusion 6.x-1.0 themes and Skinr 6.x-1.6. My goal is to customize Acquia Marina from its default installation to be similar to its live demo. In other words, change from Figure 1 to Figure 2.

Figure 1: Default installation of Acquia Marina

Figure 2: The live demo version of Acquia Marina

Notes: For people who are looking for a way to have texts wrapping around the Recent comment block, I still cannot figure out how to do it.

1. Set up necessary themes and modules.
   1. Install Drupal into $Apache_Home/htdocs directory, where the $Apache_Home is the installation directory of the HTTP Server.
   2. Rename the drupal installation directory to $Apache_Home/htdocs/drupal6. This directory will be known as $Drupal_Home.
   3. Create a new directory named “themes" in the $Drupal_Home/sites/all folder, resulting in $Drupal_Home/sites/all/themes
   4. Create a new directory named “modules" in the $Drupal_Home/sites/all folder, resulting in $Drupal_Home/sites/all/modules
   5. Install Acquia Marina and Fusion themes in your $Drupal_Home/sites/all/themes.
   6. Install Skinr module in your $Drupal_Home/sites/all/modules
2. Set up a subtheme of Acquia Marina called Sub Acquia Marina. (Note: The subtheming approach described here is definitely NOT the correct way.)
   1. Create a directory named sub_acquia_marina in the $Drupal_Home/sites/all/themes folder, which is the same directory level as the original acquia_marina
   2. Copy and paste everything in the original acquia_marina directory into your sub_acquia_marina folder.
   3. Rename the acquia_marina.info file in the sub_acquia_marina folder to sub_acquia_marina.info
   4. Edit the sub_acquia_marina.info by replacing name = Acquia Marina with name = Sub Acquia Marina
3. Access your Drupal homepage.
   1. Start HTTP server.
   2. Start MySQL server. (Assume that you already create a new database for your Drupal web site, and run the installation script.)
   3. Open a web browser and point to the address: http://localhost/drupal6/. (Note: “drupal6” is your Drupal installation directory.)
4. Change the default theme to your Sub Acquia Marina, and activate all necessary themes and modules.
   1. On your Drupal homepage, log in as administrator.
   2. Administer -> Site building -> Themes
   3. Check the Enabled checkbox for Acquia Marina theme.
   4. Check the Enabled checkbox for Fusion Core theme.
   5. Check the Enabled checkbox and default radio button for Sub Acquia Marina theme.
   6. Click on the “Save Configuration” button.
   7. Administer -> Site building -> Modules
   8. Check the Enabled checkbox in front of the Skinr module.
5. Activate the Site Slogan and Search form box.
   1. Administer -> Themes -> Configure -> Check the checkboxes for Site slogan and Search box
   2. Click on the “Save Configuration” button.
6. Enter the Site slogan.
   1. Administer -> Site configuration -> Site information
   2. Enter your slogan in the Slogan textfield.
   3. Click on the “Save Configuration” button
7. Put the Search form, Who’s new, and Navigator blocks in the Sidebar first region, and put the Recent comments block in the Sidebar last region.
   1. Administer -> Site building -> Blocks
   2. Move the Search form, Who’s new and Navigator to the Sidebar first region by putting the Search above the Who’s new and Who’s new above the Navigator blocks, respectively.
   3. Click on the “Save Configuration” button
8. Configure the Search box
   1. On your drupal homepage, move your mouse over the Search box. A configuration icon, a gear icon, will be visible or shown up.
   2. Click on the gear icon to go to the configuration page for the Search box.
   3. Acquia Marina — General theme styles: Rounded corners
   4. Acquia Marina — Block title styles: Green rounded title background with white text
   5. Acquia Marina — Block title icon styles: Search
9. Configure the Who’s New block
   1. Similar to the Search box, move mouse over the Who’s new area, and click on the gear icon to go to the configuration page for the Search box.
   2. Acquia Marina — General theme styles: Rounded corners
   3. Acquia Marina — Block title styles: Green rounded title background with white text
   4. Acquia Marina — Block title icon styles: Star
10. Configure the Navigator block
    1. Use the same configuration as the Who’s new block.
11. Configure the Recent comments block
    1. Similar to the Search box, move mouse over the Recent comments block, and click on the gear icon to go to the configuration page for the Search box.
    2. Acquia Marina — General theme styles: Rounded corners
    3. Acquia Marina — Block title styles: Green rounded title background with white text
    4. Acquia Marina — Block title icon styles: Bubble
12. Add primary and secondary links
    1. Administer -> Site building -> Menus -> Primary links.
    2. ADD ITEM, Path: <front>, Menu link title: Home, Enabled: Checked, Expanded: Unchecked, Parent item: <Primary links>, and Weight: 0
    3. ADD ITEM, Path: <front>, Menu link title: About Us, Enabled: Checked, Expanded: Unchecked, Parent item: <Primary links>, and Weight: 1
    4. ADD ITEM, Path: <front>, Menu link title: Our Services, Enabled: Checked, Expanded: Checked, Parent item: <Primary links>, and Weight: 2
    5. ADD ITEM, Path: <front>, Menu link title: Drupal theming, Enabled: Checked, Expanded: Unchecked, Parent item: Our Services, and Weight: 0
    6. ADD ITEM, Path: <front>, Menu link title: Web design, Enabled: Checked, Expanded: Unchecked, Parent item: Our Services, and Weight: 1
13. Remove an underline from each secondary link
    1. Edit the fusion-acquia-marina-style.css file in your sub_acquia_marina folder.
    2. Search for the following definition in the file
       
#primary-menu ul.menu li ul.menu li a.active {
text-decoration: underline;
}

       
    3. Replace the word “underline” with “none“.
14. Divide the Preface Top region into Preface Top Left region and Preface Top Right region.
    1. Edit your sub_acquia_marina.info file, and replace
       
regions[preface_top] = preface top

       with
       
regions[preface_top_left] = preface top left
regions[preface_top_right] = preface top right

       
15. Define the Preface Top Left and Preface Top Right regions in the front page.
    1. Copy and paste the page.tpl.php file into the same directory.
    2. Rename the pasted file into page-front.tpl.php. This file will be served as a template for your front page.
    3. Find the following line in the page-front.tpl.php file:
       
<div id="preface-top-inner" class="preface-top-inner inner clearfix">

       
    4. Insert the following section of code right below the above line.
       
<div id="mypreface" class="mypreface">
<?php if ($preface_top_left): ?>
<div id="preface-top-left">
<?php print $preface_top_left; ?>
</div> <?php endif; ?>
<?php if ($preface_top_right): ?>
<div id="preface-top-right">
<?php print $preface_top_right; ?>
</div>
<?php endif; ?>
</div>

       

16. Define styles for Preface Top Left and Preface Top Right regions.
    1. Edit the fusion-acquia-marina-style.css in your sub_acquia_marina/css folder
    2. Add the following section of code right after the definition of .preface-top-wrapper{...}.
       
#mypreface{
margin: 0 auto;
}
#preface-top-left {
width: 50%; float: left;
}
#preface-top-right {
width: 50%; margin-left: 50%;
}

17. Add a new custom blocks into the Preface Top Left region.
    1. On your Drupal homepage, Administer -> Site building -> Blocks
    2. ADD BLOCK
    3. Acquia Marina — List styles: Large text list with green checkmarks (for Preface Top region)
    4. Acquia Marina – Block title styles: Green title
    5. Block description: my_left_block
    6. Block title: UNORDERED LIST
    7. Block body:
       
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>

18. Add another custom block to the Preface Top Right region.
    1. On your Drupal homepage, Administer -> Site building -> Blocks
    2. ADD BLOCK
    3. Acquia Marina — List styles: <none>
    4. Acquia Marina – Block title styles: Green title
    5. Block description: my_right_block
    6. Block title: This part is for a text paragraph
    7. Block body:
       
<font size="3" face="'Myriad Pro', 'Myriad Web Pro Regular', 'Lucida Grande', Geneva, Trebuchet MS, sans-serif">Put whatever text that you'd like to in the Block body.</font>

       
    8. The font face inside the <font> tag is derived from the font-family definition of Marina - List - Green arrow in the fusion-acquia-marina-style.css file.
    9. To incorporate the <font> tag, set the Input format to: Full HTML.

19. Decrease the font size of list items for Acquia Marina — List styles.
    1. Search the following definition in the fusion-acquia-marina-style.css file of your sub_acquia_marina folder.
       
/* Marina - List - Green arrow */
.marina-list-arrow-green ul li {
background: url(../images/green-checkmark.png) no-repeat 0 5px;
font-family: "Myriad Pro", "Myriad Web Pro Regular", "Lucida Grande", Geneva, Trebuchet MS, sans-serif; font-size: 120%; /* 18px/12px */
line-height: 100%;
list-style-image: none;
list-style-type: none;
padding: 10px 0 15px 40px; }

       
    2. Change the font-size from 150% to 120%.
20. Add a new content node.
    1. On your Drupal homepage, click on “Create content” -> Story
    2. Put your own text in the Title and Body.
    3. Click on the “Save” button and add some comments to the story.

Advertisement