Preface

This is the Whitebull Handbook, created to provide information and advice for customizing and modifying certain design elements and features of the Whitebull theme. This handbook reference to Danland theme handbook.

To get help, submit feature requests and report bugs, go to Issues for Whitebull page. To avoid duplication, please check if your problem has already been reported or resolved before posting. Please describe your problem and provide detailed information, including links, screenshots, and the specific configuration, to make it easier for people to help.

Whitebull was created and developed by Gunawan Probo Swandono.

Quick links

  1. Regions
  2. Wide image banner
  3. How to create rounded corners on the banner
  4. How to change or add slideshow images
  5. How to change the slideshow effects
  6. How to convert the slideshow banner to a static banner
  7. How to replace the image slideshow with a Flash (.SWF) slideshow
  8. How to change the size of the sidebar and main content regions
  9. How to set up the Superfish menu
  10. How to change background color
  11. How to enable the Search box at the right top
  12. How to use local.css to protect your customizations when you upgrade
  13. Tips for changing the CSS
  14. How to remove the Login is here | Register links and the RSS button
  15. How to remove the notice links
  16. How to turn on the site's mission statement
  17. How to set up the menu
  18. How to enable user pictures

Regions

Whitebull provides 19 regions for placing content, listed below:

  1. Preface first
  2. Preface middle
  3. Preface last
  4. Superfish menu
  5. Top note - only displayed on the front page
  6. Slideshow note - only displayed on the front page
  7. Bottom note
  8. Content top
  9. Content middle
  10. Content bottom
  11. Sidebar left
  12. Sidebar right
  13. Bottom first
  14. Bottom middle
  15. Bottom last
  16. Bottom 1
  17. Bottom 2
  18. Bottom 3
  19. Footer

Note: Whitebull 7.x includes three additional regions:

  1. Search region
  2. Highlighted
  3. Footer note

Wide image banner

In this theme, you'll find a very large banner image or slideshow beneath the menu bar. In Whitebull 6.x, you can activate a transparent white image below the banner by turning on the site's mission statement.

How to create rounded corners on the banner

The background of the banner image uses color degradation to improve banner's display on devices that display only a small number of colors. Because of this, you will need to use a special technique to make rounded corners on the banner image. If you are using Photoshop, follow the steps below to add rounded corners to your banner image:

  1. Open the picture that you want to use as a banner for your website. Crop or resize it so that the size is exactly 960x398 px.
  2. Open the original image from the Whitebull banner.
  3. Zoom in as far as possible on both images so you can edit them at the pixel level.
  4. Move the mouse pointer to the lower left side of the Whitebull banner. You will see six distinct color points at the corner of the image. You must now perform the following steps for each of these three corner pixels in all four corners of your image.
  5. Using the Eyedropper tool, take a sample of the color of one of the three corner pixels.
  6. After obtaining a sample color, select the Pencil tool.
  7. Move to the corresponding pixel in your own banner image, and use the Pencil tool to apply the sampled color to that pixel. Make sure that you apply the color to the pixel in exactly the same position as the pixel on the original image.
  8. Repeat these steps for the other two pixels in that corner.
  9. Move the pointer to the upper left corner of the original images, and copy the colors of the three corner pixels to the corresponding pixels in your own images. Repeat these steps for the two remaining corners of your image.

How to change or add slideshow images

The Whitebull theme includes a slideshow feature on the front page. By default, only three images are included with the theme, but you can substitute others or add as many pictures as you like. Here's how:

  1. Select images with width of at least 960px; crop or resize so that final dimensions are 960x398 px. Upload into [yoursiteurl]/sites/all/themes/Whitebull/images/slideshows.
  2. Change or add the URL for your new picture in the page.tpl.php file.

<div class="slideshow">
<img src="<?php print $base_path . $directory; ?>/images/slideshow/image1.jpg" width="960" height="398" alt="image1"/><!-- change image1.jpg to yourpicture.jpg to replace with your picture -->
<img src="<?php print $base_path . $directory; ?>/images/slideshow/image2.jpg" width="960" height="398" alt="image2"/><!-- change image2.jpg to yourpicture.jpg to replace with your picture -->
<img src="<?php print $base_path . $directory; ?>/images/slideshow/image3.jpg" width="960" height="398" alt="image3"/><!-- change image3.jpg to yourpicture.jpg to replace with your picture -->
<img src="<?php print $base_path . $directory; ?>/images/slideshow/your-image.jpg" width="960" height="398" alt="image3"/><!-- or add a new image in this statement -->
</div>

How to change the slideshow settings

You can configure the slideshow by changing the values in jquery.cycle.all.js. The jquery.cycle.all.js can found in folder scripts

jQuery(document).ready(function($) {
    $('.slideshow').cycle({
        fx: 'fade' , timeout: 8000, delay: 2000});
});

to create any slideshow effects that you want:

  • turnDown effect
  • jQuery(document).ready(function($) {
        $('.slideshow').cycle({
            fx: 'turnDown' , timeout: 8000, delay: 2000});
    });
  • shuffle effect
  • jQuery(document).ready(function($) {
        $('.slideshow').cycle({
            fx: 'shuffle' , timeout: 8000, delay: 2000});
    });
  • zoom effect
  • jQuery(document).ready(function($) {
        $('.slideshow').cycle({
            fx: 'zoom' , timeout: 8000, delay: 2000});
    });
  • curtainX effect
  • jQuery(document).ready(function($) {
        $('.slideshow').cycle({
            fx: 'curtainX' , timeout: 8000, delay: 2000});
    });

Do not forget to clear the cached data in Drupal under Performance settings and to clear your browser's cache before refreshing the page.

Read the complete documentation on configuring the slideshow.

How to convert a slideshow banner to a static banner

There may be times when you just want to use a static banner. Here's how to do that.

  1. Open the page.tpl.php file.
  2. Remove all but one picture between the slideshow classes.

For example, change

<div class="slideshow">
<img src="<?php print $base_path . $directory; ?>/images/slideshow/image1.jpg" width="960" height="398" alt="image1"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshow/image2.jpg" width="960" height="398" alt="image2"/>
<img src="<?php print $base_path . $directory; ?>/images/slideshow/image3.jpg" width="960" height="398" alt="image3"/>
</div>

to

<div class="slideshow">
<img src="<?php print $base_path . $directory; ?>/images/slideshow/your-image.jpg" width="960" height="398" alt="image3"/><--! your image here -->
</div>

How to replace the image slideshow with a Flash (.SWF) slideshow

Whitebull's built-in slideshow is created with a JQuery function. If you want, you can replace the built-in image slideshow with a Flash (.SWF) slideshow by doing this:

Replace the following code in page.tpl.php

<div class="slideshow">
<img src="<?php print $base_path . $directory; ?>/images/slideshow/image1.jpg" width="960" height="398" alt="image1"/>
..............................
</div>

with this:

<div class="slideshow">
<object width="960" height="398" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
     <param value="themes/Whitebull/images/file.swf" name="movie">
     <param value="high" name="quality">
     <param value="transparent" name="wmode">
<embed width="960" height="398" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="themes/Whitebull/images/file.swf" wmode="transparent"></embed>
</object>
..........
</div>

Note: These instructions assume that the .swf files are in the Whitebull images folder.

How to change the size of the sidebar and main content regions

You can do that by change container.css following this code:

For main content (using a 2-column layout):

.one-sidebar.sidebar-first #main-content {
  float: left;
  margin-left: 13px;<!-- change this -->
  width: 74.5%;<!-- this is the main content size -->
}
.one-sidebar.sidebar-second #main-content {
  float: left;
  width: 74.5%;<!-- this is the main content size -->
}

.two-sidebars #main-content {
float: left;
margin-left: 8px;
width: 56.3%;

}

For sidebar left (using a 2-column layout):

.one-sidebar #sidebar-left-wrapper {
  float: left;
  width: 24%;<!-- change this -->
}

For sidebar left (using a 3-column layout):

.two-sidebars #sidebar-left-wrapper {
  float: left;
  width: 21%;<!-- change this -->
}

For sidebar right (using a 2-column layout):

.one-sidebar #sidebar-right-wrapper {
  float: right;
  width: 24%;<!-- change this -->
}

For sidebar right (using a 3-column layout):

.two-sidebars #sidebar-right-wrapper {
  float: right;
  width: 21%;<!-- change this -->
}

How to set up the Superfish menu

Here are the steps to populate the Superfish menu. For example, to create a menu of products:

  1. Go to Administer > Menus > Primary links > Add item
  2. Fill "Path" with "all-my-products-url", "Menu link title" with "All Products", and "Descriptions" with "All products". (In Drupal 7, Main menu replaces Primary links.)
  3. Enable the "Expanded" checkbox. For parent item, choose "Primary links", and "Save"
  4. Now creating the submenu. Go again to Administer > Menus > Primary links > Add item
  5. Fill "Path" with "my-product-1-url", "Menu link title" with "My Product 1", and "Descriptions" with "My Product 1"
  6. For parent item, choose "All Products", and "Save"
  7. Go to Administer > Blocks. Place the Primary links block in the Superfish menu region, and "Save blocks"
  8. Go to Administer > Site building > Themes > Configure > Whitebull (admin/build/themes/settings/Whitebull). Uncheck the Primary links, "Save configuration".

Note: The paths "all-my-products-url" and "my-product-1-url" in this example must already exist.

Note: Read the readme.txt in the Whitebull folder for more info.

Note: The Superfish menu is built into the Whitebull theme. You do not need to install a separate Superfish module to use the Whitebull Superfish menu.

How to change the background color of whitebull

You can do that by change style.css following this code:

body {
  background: #e9e9e9;<!-- change this -->
  color: #666666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 85%;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}

You can experiment to pick the right color.

How to enable the Search box at the right top

For Whitebull 6.x, you can enable the Search box by visiting:

  1. Administer > Modules. Check the "Search" and save the configuration.
  2. If the Search box is still not displayed, go to Administer > Site building > Themes > Configure > Whitebull (admin/build/themes/settings/Whitebull). Check the "Search box" and save.

For Whitebull 7.x, go to Structure > Blocks and drag the the Search form block to beneath the Search region heading. Make sure to set the right permissions. Then save your configuration.

How to use local.css to protect your customizations from theme updates

If you modify the CSS for the theme, do not make your changes in the style.css file. This file will be replaced if you install a new version of the theme, and your changes will be overwritten. Instead, make all changes in local.css. This stylesheet will override the style.css file. The local.css file is not part of the Whitebull installation, so it will not be overwritten when you update the theme. To create the local.css file, follow these steps:

  1. Create local.css.
  2. Copy the blocks of code that you want to override from style.css to local.css.
    Make your changes to the code in local.css.
  3. In Whitebull.info, take this code stylesheets[all][] = local.css. If you do not make this code to the Whitebull.info file, the local.css file will be ignored.
  4. Where is the Whitebull.info? Inside the Whitebull theme folder.

    By restricting your css changes to local.css, your changes will not be overwritten when you upgrade to a new version of the theme.

    Tips to change the CSS

    The ids and classes of the frontpage and regular pages are the same. Just change it in accordance with the class name or id.

    How to remove the Login | Register links and the RSS button

    The Login | Register links and the RSS button can be removed by adding the following code to the local.css file:

    #authorize {
    display: none;
    }

    To remove only the Login | Register links, use this code:

    #authorize ul {
    display: none;
    }

    To disable only the Login link, you can add this

    #authorize ul li.first{
    display:none;
    }

    To disable only the Register link, you can add this

    #authorize ul li{
    display:none;
    }
    #authorize ul li.first{
    display:block;
    }

    To disable only the rss feed button, you can add this

    #authorize .feed-wrapper{
    display:none;
    }

    You do not need to remove that code from page-front.tpl.php or page.tpl.php, in case you need it in the future.

    How to remove the notice links

    The notice links at the bottom of the page, "Theme by Gunawan Probo Swandono and inspired by Danland.", can be removed by using the local.css file, and add:

    .notice {
    display: none;
    }

    Adding the above code to your local.css will ensures that any upgrades of the theme will not reverse your changes.

    How to turn on the site's mission statement

    You can configure the site's mission statement by visiting: Administer > Site building > Themes > Configure > Whitebull (admin/build/themes/settings/Whitebull).

    Please add a "mission statement" on the "site information" page first. Note, in Drupal 7 there is no mission statement. Check your Blocks page for a "Site mission" block. If one does not exist, create one and place in the Highlighted region.

    How to set up the menu

    Go to Administer > Menus. You can adding a new menu there, for the Primary links will be displayed at the top, and for the Secondary links will be displayed at the bottom.

    How to enable user pictures

    1. Go to Administer > User settings. You can enable the signature and user picture support there
    2. Go to Administer > Site building > Themes > Configure > Whitebull (admin/build/themes/settings/Whitebull). Check the "User pictures in posts" and "User pictures in comments"

    Hint

    If you still have not found the answers you are looking for or if you think the documentation is wrong, you can go to Issues for Whitebull page. To avoid duplicates, please search before submitting a new issue.

    Back to top