Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Implementing a Drupal Business Theme

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

Having completed our Photoshop design, today we'll look at turning it into a simple Drupal theme. This tutorial will walkthrough basic html/css techniques, a bit of php, creating blocks/views, and I'm also going to explain how to add the Nivo Slider into Drupal!


Step 1: Site Structure

To start off, we're going to use the default Drupal theme "Stark" as our starting point. The Stark theme is located in your Drupal folder > Drupal 7.7 > themes. Go ahead, duplicate Stark, and rename it "Business".

We should have two image files, a .info file, layout css and README file. The only files we need to keep are the screenshot png and stark.info, you can delete the rest.

Rename "stark.info" to "business.info". This file will contain some basic information about our theme (such as identifying regions and css files) which Drupal needs to know.

Open business.info in the code editor of your choice (I'm using Dreamweaver) and add the following snippet. It lays out the config details, plus the region identifiers, and the various css files we'll be using:

name = Business
description = Drupal 7.7 template.
package = Core
version = VERSION
core = 7.x

regions[header]         = Header
regions[navigation]     = Navigation
regions[featured]       = Featured
regions[welcome]        = Welcome
regions[columns]        = Columns
regions[content]        = Content
regions[highlighted]    = Highlighted
regions[help]           = Help
regions[sidebar]  		= Sidebar
regions[footer]         = Footer

stylesheets[all][] = /css/reset.css
stylesheets[all][] = /css/html-elements.css
stylesheets[all][] = /css/layout.css
stylesheets[all][] = /css/fonts.css

scripts[] = /js/modernizr-2.0.6.min.js

Next we're going to add our template files. We are just going to copy the default examples provided by Drupal and then edit them later. Inside your Drupal 7.7 folder go to modules > system and copy "page.tpl" and "html.tpl" to our business theme folder.

Now create four new folders, "css" for our css files, "design" will contain our psds created in part one of this tutorial, "images" for our images files and "js" for javascript/jQuery files. This is what our basic site structure should look like now:

Next we are going to move our business folder to a better location for Drupal, which is located in sites > all > themes. This is where your default theme will be located when enabled in Drupal.


Step 2: Enable Drupal Theme

Before continuing, make sure Apache and MySQL are running in your XAMPP control panel. Now open http://localhost/drupal-7.7/drupal-7.7/index.php in a web browser and you should be greeted by the default Drupal theme and its interface at the top. To login use your username and password that was created during installation.

Now we are going to enable our business template. Under "Appearance" you should see the Bartik default theme listed and then below that is our theme. Go ahead and set our template as the default theme.

After enabling the theme a success message should appear:

We're now going to edit a few settings for our theme, select the settings link (under our business theme) and copy the settings below. You can also upload the logo from our theme > images folder. Make sure to save the configuration.

After saving the configuration another success message should appear:


Step 3: Drupal Modules

Now we're going to download some Drupal modules to enhance our site. All modules that are installed will be placed in drupal-7.7 > sites > all > modules. Make sure to download modules that are compatible with the version of Drupal that you're using, so in this tutorial only download Drupal 7 modules.

Go to the Drupal modules section to download the required modules for this tutorial:

One more thing we have to do for the CK editor is download some extra files from the CKEditor website. After you've downloaded the file, move it to drupal folder > sites > all > modules > ckeditor-7x-1.3 > ckeditor > ckeditor > ckeditor and extract the files.


Step 4: Enable Modules

Go back to your site and under "modules" select core to minimise that whole section. Now enable the following modules:

  • Under CHAOS TOOL SUITE, enable all modules
  • Under FIELDS, enable link
  • Under MEDIA, enable all modules
  • Under OTHER, enable all modules
  • Under SPAM CONTROL, enable all modules
  • Under USER INTERFACE, enable all modules
  • Under VIEWS, enable all modules

Make sure you save the changes at the bottom of the page.


Step 5: Site Configuration

In this step we will adjust a few important settings for our site. Go to "configuration" and under "System" go to site information. You can change the site name, your email address and the number of posts per page. Under "default front page" clear the form.

Now, under Content Authoring, select "CKEditor", and under "profiles" select "edit" under Full HTML.

Under "File Browser Settings" select "IMCE" in the dropdown menu for File browser type (Link dialog).

Under "Modules" scroll down to "Other" and under the module Pathauto select "configure".

Now change the Default path pattern to "[node:title]".

At the moment the search form is only visible to admin but we also want our users to see it too. To enable the search form go to "People" and under the "Permissions" tab scroll down to "Search" and check all for use search. Again. make sure you save the settings.

To enable the contact form go to "People" and under the "Permissions" tab scroll down to "Contact" and check all for use site wide contact form. Save the settings.


Step 6: HTML Template

Now it's time to edit the HTML in the default Drupal template. Go to your themes folder and open "html.tpl". This file is used to display the basic html structure of a single Drupal page. It includes css files, javascript, jQuery files and our content from the page template we will edit next.

Copy and paste the following html code into the "html.tpl" file.

<!DOCTYPE html>
<html xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>

<head profile="<?php print $grddl_profile; ?>">
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <script src="js/modernizr-2.0.6.min.js"></script>
  <?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
  <div id="skip-link">
    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
  </div>
  <?php print $page_top; ?>
  <?php print $page; ?>
  <?php print $page_bottom; ?>
</body>
</html>

Step 7: PAGE Template

In this step we will edit the page default Drupal template. Go to your themes folder and open "page.tpl". This file is used to display regions and content.

Copy and paste the following html code into the "page.tpl" file:


<header id="header">
    <div id="header-container">

      <?php if ($logo): ?>
        <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
          <img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/197_drupalTheme/<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
        </a>
      <?php endif; ?>

      <?php print render($page['header']); ?>
    
		<?php if ($main_menu || $secondary_menu): ?>
        
          <nav id="nav">            
		  	<?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))); ?>
          	
          </nav> <!-- END NAV -->
        
		<?php endif; ?>
    
    </div><!-- END HEADER CONTAINER -->
</header><!-- END HEADER SECTION -->

<section id="featured">
    <article id="featured-container" class="clearfix">
		
		<?php print render($page['featured']); ?> 
    
    </article>
</section><!-- END FEATURED SECTION -->

<section id="welcome">
    <article id="welcome-container" class="clearfix">
       
        <h1 class="title" id="page-title"><?php print $title; ?></h1>
		<?php print render($page['welcome']); ?> 

    </article>
</section><!-- END WELCOME SECTION -->

<section id="columns" class="clearfix">

	<?php print render($page['columns']); ?>  
      
</section> <!-- END SERVICES SECTION -->

<div id="container" class="clearfix">
    <section id="content">
       
        <?php print $messages; ?>
            
        <?php if ($page['highlighted']): ?><div id="highlighted"><?php print render($page['highlighted']); ?></div><?php endif; ?>
        <a id="main-content"></a>
        <?php print render($title_prefix); ?>

        <?php if ($tabs): ?><div class="tabs"><?php print render($tabs); ?></div><?php endif; ?>
        <?php print render($page['help']); ?>
        
        <?php if ($action_links): ?><ul class="action-links"><?php print render($action_links); ?></ul><?php endif; ?>
        <?php print render($page['content']); ?>
               
    </section><!-- END CONTENT SECTION -->
            
    <aside id="sidebar" class="clearfix">
        <div class="sidebar-section">
        
            <?php print render($page['sidebar']); ?>
            
        </div><!-- END SIDEBAR SECTION -->
    </aside><!-- END SIDEBAR -->
        
</div><!-- END PAGE CONTAINER -->

<footer id="footer">
    <article id="footer-container">
    
   		<?php print render($page['footer']); ?>
        
    </article><!-- END FOOTER SECTION -->
</footer><!-- END FOOTER-->

Step 8: Blocks Structure

It's time to arrange the blocks in our theme.

Under Structure > Blocks scroll down to "disabled". Now drag the navigation block into the navigation region. Don't forget to save the block at the bottom of the page.

Next go to "add block" and give it a description: "welcome-contact" and in the block body add text: "contact us today". Make sure to select Full HTML in the text format section below the block body.

Select the text and in the editor click the link button. In the popup window, type in the URL: "localhost/drupal-7.7/drupal-7.7/contact".

In region settings under Business theme select Welcome, and save the block.

We will now setup the first column block and after that you can repeat this step twice more for the two other columns.

Add another block, give it a description: "col1" and a title "We get Results".

In the CKEditor select "image" and browse the server to find an icon.

Add in some dummy text and a "read more" link. In the link popup window, type in the URL: "localhost/drupal-7.7/drupal-7.7/services"

In the region settings under Business theme select "Columns". In visibility settings under "Show block on specific pages" check "Only the listed pages" and type "<front>" in the textarea. Now save the block.

Repeat this step two more times for col2 and col3.

Scroll down to disabled and move the search form and user login to the sidebar region.

Scroll down to disabled and move the main menu to the footer region.

Add another block, give it a description: "footer-social". This block will contain our social media icons.

In the block body select "image" and browse server to find the facebook icon. Repeat this step for the twitter and rss icons.

For each image apply a link. In the popup window or source code, type in the URL of the icon (for facebook add: http://facebook.com) for example.

In region settings under Business theme select "Footer" and save the block.

Add another block, give it a description: "footer-contact".

In the block body type in some copyright text:

In region settings under Business theme select "Footer" and save the block.

OK, after all that, this is how the footer region should look:


Step 9: CSS Reset

You'll hopefully remember that back in Step 1 we referenced a few css files in our "business.info" file. It's time now to create those stylesheets.

Copy and paste the css styles below into a new css file: "reset.css".


article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* ==|== non-semantic helper classes ======================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* ==|== media queries ====================================================== */

@media only screen and (min-width: 480px) {
}

@media only screen and (min-width: 768px) {
}

/* ==|== print styles ======================================================= */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

Step 9: CSS Layout

Copy and paste the following css styles into a new file: "layout.css". As you would expect, they deal with the layout of our pages, and each section is clearly labeled.

/* @file layout CSS */
 
/* GENERAL  */
body {
background:#EEE;
min-width:1024px;
}

/* HEADER */
#header {
background:#327ba8;
height:100px;
border-bottom:1px solid #295f94;
}

#header-container {
margin:0 auto;
width:940px;
}

/* LOGO */
#logo {
float:left;
margin-top:30px;
}

/* NAV */
#nav {
float:right;
margin-top:40px;
}

/* SLIDER */
#featured {
background:#338fca;
width:100%;
padding:40px 0;
border-top:1px solid #58a3d4;
}

#featured-container {
margin:0 auto;
width:940px;
}

#featured-container h2,#featured-container span {
display:none;
}

/* WELCOME */
#welcome {
width:100%;
background:#FFF;
height:100px;
border-bottom:1px solid #CCC;
}

#welcome-container {
margin:0 auto;
width:940px;
}

#welcome-container h1 {
float:left;
margin-top:32px;
}

#welcome-container .content {
float:right;
margin-top:25px;
}

/* LAYOUT */
#container {
margin:0 auto;
width:940px;
padding-bottom:40px;
min-height:450px;
}

#columns {
margin:0 auto;
width:960px;
padding:40px 0;
}

#columns .block {
float:left;
display:inline;
margin:40px 10px 0;
width:300px;
}

/* CONTENT */
#content {
float:left;
width:540px;
margin:0;
padding:40px;
background:#FFF;
border:1px solid #CCC;
}

#content p {
width:540px;
}

.node {
margin-bottom:40px;
}

#content ul.inline li {
padding:0;
}

.col {
float:left;
display:inline;
margin:0 10px;
width:300px;
}

/* SIDEBAR */
#sidebar {
float:right;
margin-right:0;
width:300px;
min-height:500px;
}

#sidebar .block {
margin-bottom:40px;
}

/* FOOTER */
#footer {
background:#999;
min-height:100px;
clear:both;
border-top:1px solid #FFF;
}

#footer-container {
margin:0 auto;
width:960px;
padding:30px 0;
}

#footer .block {
float:left;
display:inline;
margin:0 10px;
width:300px;
}

Step 9: CSS HTML Elements

Here we go again - copy and paste the styles below into a new file: "html-elements.css".

/* @file HTML elements CSS */

/* TYPE */
h1	{
font-family: Museo 700;
}

h2, h3, h4, #nav {
font-family: Museo 500;
font-weight:normal;
}
	
h1{
font-size:36px;
color:#327ba8;
line-height:36px;
}
	
h2{
font-size:26px;
color:#338fca;
line-height:30px;
}

h3{
font-size:24px;
color:#999;
line-height:24px;
}

p, body {
font-size:13px;
color:#333;
line-height:24px; 
font-family: Droid Sans;
}

h4{
font-size:20px;
color:#EEE;
}

/* LINKS */
a, a:hover  {
text-decoration:none;
}

a {
color: #338fca;
}

a:hover {
color: #327ba8;
}

/* NAV */
#nav {
font-size:18px; 
text-transform:lowercase;}

#nav h2 {
display:none;}

#nav a {
color: #EEE;}

#nav a:hover {
color: #FFF;}

/* CONTACT CALL TO ACTION BUTTON */
#welcome-container .content a, 
#welcome-container .content a:hover { 
border:none;
color:#FFF;
font-weight:bold;
font-size:20px;
font-family: 'Droid Sans'; 
text-transform:uppercase; 
text-shadow: 0 1px 0 #222; 
padding: 16px 54px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

/* CSS3 GRADIENTS */
#welcome-container .content a {
background: #338fca;
background-image: -moz-linear-gradient(top, #338fca, #327ba8);
background-image: -webkit-gradient(linear, center top, center bottom, from(#338fca), to(#327ba8));
background-image: -o-linear-gradient(top, #338fca, #327ba8);
background-image: linear-gradient(top, #338fca, #327ba8);}
 
#welcome-container .content a:hover {
background: #327ba8; border:none; 
background-image: -moz-linear-gradient(top, #327ba8, #338fca);
background-image: -webkit-gradient(linear, center top, center bottom, from(#327ba8), to(#338fca));
background-image: -o-linear-gradient(top, #327ba8, #338fca);
background-image: linear-gradient(top, #327ba8, #338fca);
}

/* COLUMNS */
#columns p { 
width:260px; 
}
	
#columns .block img{
float:left;  
padding:0 20px 60px 0;
}

/* BUTTONS */

/* GENERAL BUTTON STYLES */    
#columns .block a, 
#columns .block a:hover, 
.col a, 
.col a:hover,
.node-readmore a, 
.node-readmore a:hover,
#user-login-form .form-submit, 
#user-login-form .form-submit:hover, 
.contact-form .form-submit, 
.contact-form .form-submit:hover  {
color:#FFF;
font:11px Arial, Helvetica, sans-serif;
moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:8px 12px;
border:none;
}

/* BUTTON BG */    
#columns .content a,
.col a, 
.node-readmore a, 
#user-login-form .form-submit, 
.contact-form .form-submit  {
background: #338fca; 
}

/* BUTTON HOVER */    
#columns .content a:hover, 
.col a:hover, 
.node-readmore a:hover, 
#user-login-form .form-submit:hover, 
.contact-form .form-submit:hover {
background: #327ba8;
}

/* SEARCH FORM  */
#block-search-form .form-text {
background:#FFF; 
border:none;
padding-left: 10px;
width:280px; 
height:30px;
}
	
#block-search-form .form-submit {
background: #FFF url(../images/general/search-btn.png) no-repeat 0 0;
margin-left:-30px; 
text-indent: -999px;
border: none;
height:16px; 
width:16px;
}

/* FOOTER */
#footer a, #footer ul li, #footer p {
font-size:11px;
color:#CCC; 
padding:0; 
}
	 
#footer a:hover {
color: #FFF;
}
	
#footer ul li, #footer img {
float:left; 
margin-right:6px;
list-style:none;
}
	
#footer .menu {
padding:0;
}
#footer .block h2 {
display:none;
}

/* LOGIN FORM */
#user-login-form input {
background:#FFF; 
border:none; 
color:#666; 
padding:5px; 
}

/* CONTACT FORM */
.contact-form input {
background:#f7f7f7; 
border: 1px solid #CCC; 
color:#555; 
padding:5px 0 5px 10px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

Step 9: CSS @font-face

Last one; copy and paste the styles below into a new file: "fonts.css". These styles will sort out our web fonts.

/* @file fonts CSS */

@font-face {
font-family: 'DroidSansRegular';
src: url('DroidSans-webfont.eot');
src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
	 url('DroidSans-webfont.woff') format('woff'),
	 url('DroidSans-webfont.ttf') format('truetype'),
	 url('DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'DroidSansBold';
src: url('DroidSans-Bold-webfont.eot');
src: url('DroidSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
	 url('DroidSans-Bold-webfont.woff') format('woff'),
	 url('DroidSans-Bold-webfont.ttf') format('truetype'),
	 url('DroidSans-Bold-webfont.svg#DroidSansBold') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Museo500';
src: url('Museo500-Regular-webfont.eot');
src: url('Museo500-Regular-webfont.eot?iefix') format('eot'),
	 url('Museo500-Regular-webfont.woff') format('woff'),
	 url('Museo500-Regular-webfont.ttf') format('truetype'),
	 url('Museo500-Regular-webfont.svg#webfontQF7qPaga') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Museo700';
src: url('Museo700-Regular-webfont.eot');
src: url('Museo700-Regular-webfont.eot?iefix') format('eot'),
	 url('Museo700-Regular-webfont.woff') format('woff'),
	 url('Museo700-Regular-webfont.ttf') format('truetype'),
	 url('Museo700-Regular-webfont.svg#webfontNpXBDqia') format('svg');
font-weight: normal;
font-style: normal;
}

Step 10: Nivo Slider Image Style

We are now going to set-up the Nivo Slider.

Firstly we'll set-up an image style that will define the height and width of our slider images. Under "configuration", scroll down to "media" and under "image styles" select "add an Image style".

Add a style and call it "slider". Scroll down to "Effect" then in the drop down menu select "scale and crop". Then select add.

Here we are going to set the dimensions of our slider image. Add in 940px width and 320px height and add that effect.

The final result:

Now exit that screen and our style should be added to the bottom on this page:


Step 10: Nivo Slider Content Type

Now we have to add a content type to post our slider images under. Under Structure > Content types, select "add content type".

Give it a name, Slider (add a description if you want) and edit the settings as follows:

  • Submission form: default
  • Publish: only published checked
  • Display settings: uncheck
  • Comment settings: drop down > closed
  • Menu settings: none

Now select "save and add fields".

On the next screen, go ahead and delete the body field because we don't need it. Add a new field Link with the following settings:

  • label: Link
  • field name: field_link
  • data store: Link
  • widget: Link

Select save and then Save the field settings on the following screen.

On the next page we'll just save the default settings.

Go ahead and add another new field called "Image" with these settings:

  • label: Image
  • field name: field_pic
  • data store: Image
  • widget: Image

Select save and then Save the field settings on the next screen. On the next page, under "preview image style" select "slider" (the image style we created earlier).

This success message should appear:


Step 10: Nivo Slider Add Content

In this section we will add some slider images using our content type created earlier. Under Content go to "add content":

You should see "Slider" under our two default content types.

Click on slider and add a title. I'm just going to upload a large image from my documents. Make sure you select "upload and save" at the bottom.

Repeat that step a few times so we have enough images for the slider to scroll through.


Step 10: Nivo Slider Add View

Now we will add a view. Under Structure select "views".

Select add new view and copy the settings below:

Select "Continue and edit".

Under Format > Unformatted list change the display to "Views Nivo Slider". Select "apply".

Under "Image field style" select "slider", under "Direction Navigator Hide" select "No", under "Control Navigator" select "Basic" and apply all displays.

Under Fields remove the default field Title.

Now add a new field and on the next screen search for Link and select "Link appears in node:slider". Apply configure fields.

Check "exclude from display" and apply settings.

Under Fields add another a new field. Search for image and select "Image appears in node:slider". Apply configure fields

Under "Image style" choose "slider" and under "Link image to", choose "content". Apply the settings.

Make sure you save the view at the top of the page.

If you view your site now nothing will have changed because we have to assign the view to a block, which we will do in the next step!


Step 10: Nivo Slider Enable Slider

In this step we will give our slider a block. This is so we can adjust it to only appear on the homepage.

Under structure > blocks if you scroll down to the disabled section you should see "View: Slider". Go ahead and drag it to our featured block. Make sure you save blocks at the bottom.

Now if you view your site the slider should be transitioning through our images! You may have to refresh your browser or clear Drupal's cache if it doesn't show up, if so under configuration > development select "performance"S and clear the cache.

Next we will hide the featured block so it only appears on the homepage.

Under Structure > blocks scroll down to "featured" and for the view:slider block select "configure".

Scroll down to Show block on specific pages and check "Only the listed pages". In the textarea type in "<front>" and save the block.


Step 10: Nivo Slider Style the Slider

To edit the default Nivo Slider styles we are going to edit the css file in the nivo slider folder. In your Drupal folder go to "sites > all > modules > views_nivo_slider-7.x-2.x-dev > views_nivo_slider > styles > default" and open custom-nivo-slider.css in your code editor.

Copy and paste the css styles below into "custom-nivo-slider.css".

.nivoSlider {
  position: relative;
}

.nivoSlider img {
  position:absolute;
  top:0px;
  left:0px;
  display: none;
}
.nivoSlider a {
  border:0;
  display: block;
}

.nivo-controlNav {
  position:absolute;
  left:47%;
  bottom:-20px;
}
.nivo-controlNav a {
  display:block;
  width:11px;
  height:11px;
  background:url(bullets.png) no-repeat;
  text-indent:-9999px;
  border:0;
  margin-right:3px;
  float:left;
}
.nivo-controlNav a.active {
  background-position:0 -12px;
}

.nivo-directionNav a {
  display:block;
  width:38px;
  height:40px;
  background:url(arrows.png) no-repeat;
  text-indent:-9999px;
  border:0;
}
a.nivo-nextNav {
  background-position:-38px 0;
  right:20px;
}
a.nivo-prevNav {
  left:20px;
}

Also, replace the default arrows and bullet images with the ones we created in part one.


Step 11: Add Pages

To create a new page, go to "add content" on your dashboard and select the content type: basic page.

Give the page a title and add some dummy text in the textarea.

Scroll down to "menu settings" and check "provide a menu link". Give a description, parent item should be "main menu", and give it a weight of 1.


Step 12: Contact Form

To enable the contact form go to modules and in the Core section you should find the contact module which is disabled by default. Go ahead and enable the contact module. Save configuration.

Now under the contact module go to "configure" and on the next screen select the link: Menus administration page.

Under the navigation menu go to list links and enable the contact link. Now under the contact link go to "edit".

Change parent link to main menu and give it a weight of 4.

Now you should have a working contact form on the contact page!


Conclusion

It's been a pretty involved walk-through, but I hope it's given you an idea of how to lay out, design, and set up a drupal theme. Once you have this example up and running, you'll be able to move on to more advanced theming.

I hope you liked this tutorial, thanks for reading!

Advertisement