Follow

Kontroller Theme Guide

Step #1 - Install & Activate the Theme

unzip the file kontroller.zip and upload the kontroller folder to sites/all/themes/

Go to: Administer -> Site Building -> Themes and Set "Kontroller" as the default. Then go to: Administer -> Site configuration -> Administration theme and choose the Garland theme for administration and set "Use administration theme for content editing".

Step #2 - Install Modules

Install the special Kontroller Modules by uploading the kontrollerextra folder to sites/all/modules/.

Then install the following Drupal modules:

  • Menu Icons - http://drupal.org/project/menu_icons
  • Add to Any - http://drupal.org/project/addtoany
  • CCK - http://drupal.org/project/cck
  • Filefield - http://drupal.org/project/filefield
  • ImageAPI - http://drupal.org/project/imageapi
  • Imagefield - http://drupal.org/project/imagefield
  • Imagecache - http://drupal.org/project/imagecache
  • Transliteration - http://drupal.org/project/transliteration

Step #3 - Turn on Site Search

Go to: Administer -> Site building -> Modules and enable the "Search" module. Then go to: Administer -> Reports -> Status report -> Cron maintenance tasks and click 'run cron manually'. Then go to admin/user/permissions and under "Search Module" enable search content and advanced search for anonymous and authenticated users.

Step #4 - Activate Statistics

Go to: Administer -> Site building -> Modules and enable the "Statistics" module (Core - optional). Then go to: Administer -> Reports -> Access log settings -> Count content views: - click 'Enabled' and save the configuration.

Step #5 - Configure Date & Comments

To make your site display dates just like the demo, you will need to config date/time by going to: Administer -> Site configuration -> Date and time: -Short date format: Custom format -> F d,Y -Medium date format: Custom format -> F d,Y -Long date format: Custom format -> F d, Y g:ia

Next you need to enable "comment" Module to provide commenting functionality. The you need to enable user pictures by going to: Administer -> User management -> User settings: Picture support: click('Enabled'); 70x70 should be used as the max dimensions for this theme and then make a path to the Default Picture: http://www.yoursite.com/sites/all/themes/kontroller/images/user-pic.gif

Next you need to enable user pictures in comments by going to: Administer -> Site building -> Themes: click "Configure" and then click User pictures in comments". To set up user permissions at Administer -> User management -> Permissions.

Step #6 - Configure Blocks & Module Settings for the Front Page

Create a CKK field for image uploads. Go to: Administer -> Content management-> Content types -> Story(manage fields) then Add a new field:
New field: image
field_: image
Type of data to store: file
Widget type: Image
Then under Operations click "Configuration": and under "ALT text settings" click "Enable custom alternate text". This caption text will be used as a caption under the image in the story.

Next you need to add some Imagecache presets by going to: Administer -> Site Building -> ImageCache -> Add new preset. For this theme we will need 4 presets:
Add Scale And Crop: 110x95 (Top-Stories thumbnails)
Scale And Crop: 630x280 (Featured-Stories image)
Scale And Crop: 150x105 (Botttom-Stories thumbnails)
Scale And Crop 620x270 (Story-image) *this is for the images that will appear on the actual story w/ a caption.

You can set if the images will appear in the story teasers or in the actual stories by going to: Administer -> Content management -> Story and clicking on "Display Fields".

Now go to: Administer -> Site Building -> Blocks and move the block "Frontpage Featured Content" from Disabled to the "Content Top" region as the first block. Click "Configure" -> Show block on specific pages, under "Show on only the listed pages" put < front > to only show it on the front page. Select a preset for the Image: "Featured-Stories", then set the preferred transition animation type interval and other settings for the jQuery image fader. You can also select how many items to show.

Move the block "Top Frontpage Stories" from the Disabled to the "Content Front" region as the first block. Click "Configure" -> Show block on specific pages, under "Show on only the listed pages" put < front > to only show it on the front page. Select the preset for image thumbnails: "Top-Stories". You can also select how many items to show.

Move the block "Stories on the frontpage" from the Disabled region to the "Content Bottom" region as the first block. Click "Configure" -> Show block on specific pages, under "Show on only the listed pages" put < front > to only show it on the front page. You can also select how many items to show.

Move the block "Bottom frontpage stories" from Disabled to the "Content Bottom" region as the second block. Click "Configure" -> Show block on specific pages, under "Show on only the listed pages" put < front > to only show it on the front page. Select preset for image thumbnails: "Bottom Stories". You can also select how many items to show.

Now go to: Administer -> Content management -> Content types -> Story -> Workflow settings -> Default options: the new options will appear here: "Publish in Top Frontpage Stories", "Publish in Bottom Frontpage Stories" and "Publish in Frontpage Featured Content". You can choose which ones will be turned on by default for all Stories.

Now when you go to create a new story: Administer -> Create content -> Story -> Publishing options -> The New options will appear here: "Publish in Top Frontpage Stories", "Publish in Bottom Frontpage Stories" and "Publish in Frontpage Featured Content". You can choose which region this story will be published to.

Step #7 - Setup Frontpage & Bottom Area Ads

To configure the "Frontpage Sidebar Area" go to: Administer -> Site Building -> Blocks -> Add block. For the Block description put "Frontpage sidebar area" and for the Block title you can put whatever you want to call it. To set up your Frontpage sidebar just like the theme demo, the 125x125 ads should be displayed as links in list items of an unordered list. The unordered list must have a class="ads" and grey background on a div="sidebar-block" and "sidebar-block-bot". *View the source code of the theme demo for a complete live example.

Frontpage Sidebar Ads Example: < div class="sidebar-block" > < div class="sidebar-block-bot" > < ul class="ads" > < li > < a href="#" > < img src="yoursite.com/sites/all/themes/kontroller/images/img07.gif" alt=""/ > < /a > < /li > Etc..
For the input format use "Full HTML". Show block on specific pages: Show on only the listed pages: < front >. Move your block from Disabled to the "Right sidebar" region as the first block. You can experiment with different types of content and create new styles to accommodate any kind of new content to suite your needs.

To set up the Frontpage Featured Ad go to: Administer -> Site Building -> Blocks -> Add block. For the Block description put "Frontpage Featured Ad". For the Block title leave it blank. This block can consist of any images or HTML you need. You can experiment with different types of content and create new styles to accommodate any kind of new content to suite your needs. To set up the Block to look like the theme demo you should use a 310x280 image and simply place it inside of a DIV.

Example code:
< div > < a href="#" > < img src="yoursite.com/sites/all/themes/kontroller/images/ad03.jpg"/ > < /a > < /div >
Use input format "Full HTML". Show block on specific pages: Show on only the listed pages: < front >. Move your block from Disabled to the "Content Ads" region.

To set up the Bottom Ad Banners area go to: Administer -> Site Building -> Blocks -> Add block. For the block description put "Bottom Banners" and leave the title blank. This banner ad area is comprised of 3 300x100 banner ads as links in an unordered list. You can experiment with different types of content and create new styles to accommodate almost any type of content you require. The UL must be within a DIV with a class of "bottom-ad"

Example: < div class="bottom-ad" > < ul > < li > < a href="#" > < img alt="#" src="/kontroller/sites/all/themes/kontroller/images/ad04.jpg"/ > < /a > < /li > Etc...
Use input format "Full HTML". Show block on specific pages: Show on every page except the listed pages: do not list any pages here to show the banner ads across the entire site. Move your block from Disabled to the "Content Banner" region.

Step #8 - Footer, Category Navigation & Special Navigation Menus

Create a custom menu by going to: Administer -> Site Building -> Menus -> Add menu. Create a menu called "Category navigation". Make the title anything you want and press "Save". Then add menu items. Repeat this process for the other 2 menus. For each menu item you can upload an icon. For this theme 16x16 icons will work the best. After creating these menus, move their blocks from "Disabled" to the "Footer Category" region.

For the footer menu we will use the "Secondary Links" menu. Add a few items to secondary links and then move the block from "Disabled" to the "Footer" region.

To create the Top Area user's menu, go to: Administer -> Site Building -> Menus -> Add menu. Then call it "Top Menu" and add a few items. This should be the menu that your logged in users will see to make changes to their account, contribute content, read the help files, etc. Move the block from "Disabled" to the "Header Top" region and configure who is allowed to see it.

Step #9 - Create Top Page Banner Area & Primary Links Menu

To set up the Top Page Banner go to: Administer -> Site Building -> Blocks -> Add block. Put "Header Banner" in the Block description and leave the title blank. The Banner ad is simply an image that can be 468x60 pixels and must be contained within a DIV with a class of "ad"

Example:
< div class="ad" > < a href="#" > < img alt="" src="/kontroller/sites/all/themes/kontroller/images/header-banner.gif"/ > < /a > < /div >
Use input format "Full HTML". Move the block from "Disabled" to the "Header" region. This block should display on all pages.

Next move the "Primary Links" block to the "Header Menu" region. You can now add menu items to the Primary Links menu.

Step #10 - Setup the Inner Page Blocks & Inner Page Sidebar

To display the "Newest Stories" block go to: Administer -> Site Building -> Blocks and move the "Newest Stories Content" block from Disabled to the "Content Bottom" region as the third block. Click "Configure" -> Title the block "Newest Stories" or something similar and under Show block on specific pages: Show on every page except the listed pages: < front > You can configure the number of items to display.

To display the "Most Commented" block go to: Administer -> Site Building -> Blocks and move the "Most Commented" block from Disabled to the "Content Bottom" region as the fourth block. Click "Configure" -> Title the block "Most Commented" or something similar and under Show block on specific pages: Show on every page except the listed pages: < front > You can configure the number of items to display.

To display the "Most Popular" block go to: Administer -> Site Building -> Blocks and move the "Most Popular" block from Disabled to the "Content Bottom" region as the fifth block. Click "Configure" -> Title the block "Most Popular" or something similar and under Show block on specific pages: Show on every page except the listed pages: < front > You can configure the number of items to display.

To display the "Newest Stories" block in the sidebar go to: Administer -> Site Building -> Blocks and move the "Newest Stories Sidebar" block from Disabled to the "Right Sidebar" region. Click "Configure" -> Title the block "Newest Stories" or something similar and under Show block on specific pages: Show on every page except the listed pages: < front > You can configure the number of items to display.

To display the "Latest Comments" block in the sidebar go to: Administer -> Site Building -> Blocks and move the "Latest Comments" block from Disabled to the "Right Sidebar" region. Click "Configure" -> Title the block "Latest Comments" or something similar and under Show block on specific pages: Show on every page except the listed pages: < front > You can configure the number of items to display as well as trim the length of the comments to display a certain number of characters.

To set up the sidebar 125x125 ads go to: Administer -> Site Building -> Blocks -> Add block and put "Sponsors" in the block description and title the block as you see fit. You can create any type of HTML and Style for content in this block. However, to set it up like the theme demo follow these directions. Each 125x125 ad is simply a link in a list item of an ordered list with a class of "ads".

Example:
< ul class="ads" > < li > < a href="#" > < img src="/kontroller/sites/all/themes/kontroller/images/img07.gif" alt=""/ > < /a > < /li > Etc...
For input format use "Full HTML". Show block on specific pages: Show on every page except the listed pages: < front > Move the block from Disabled to the "Right sidebar" region.

To set up the Sidebar Menu go to: Create menu Administer -> Site Building -> Menus -> Add menu Call the new menu "Sidebar Menu" you can add items to this menu as well as menu icons. For this theme 16x16 icons will work the best. Next go to: Administer -> Site Building -> Blocks and move the "Sidebar menu" block to the "Right sidebar" region. Click "Configure" and show block on specific pages: Show on every page except the listed pages: < front >

To set up the main Inner Page Banner go to: Administer -> Site Building -> Blocks -> Add block and in the block description put "Inner banner" and leave the title blank. The block body is a 950x90 image link that is enclosed in a plain DIV.

Example:
< div > < a href="#" > < img alt="Discountmariongames.com" src="/kontroller/sites/all/themes/kontroller/images/ad07.jpg"/ > < /a > < /div >
Use input format "Full HTML" and Show block on specific pages: Show on every page except the listed pages: < front > then move the block from Disabled to the "Content Top" region.

Step #11 - Create Taxonomy Tags

To set up Tags to classify your content go to: Administer -> Content management -> Taxonomy and add a Vocabulary called "Tags". Then you can click on "Add Terms" to begin adding tags to classify your content with. For the purpose of the demo, tags would be things like, "Game Reviews", "News", "Online Gaming" etc... The tags for your stories will appear at the end of the story node above the comment area.

0 Comments

Please sign in to leave a comment.