Documentation

# 1Installing the Theme

There are 2 ways to install :

1. Fresh installation.
2. Install on Existing Drupal core

Log into your site via FTP . (if you don't have any FTP program you can use FileZilla , it's free).

1. Fresh installation.

- Upload Fresh_installation.zip to your domain directory and unzip it.
- Now go to yoursite.com to start installing.

Click Save and Continue to the next step,

1. Config your language.
2. Config database credentials
3. And you are done!

2. Install on Existing Drupal core

- Login to your Drupal site
- Upload Theme/maxx to themes directory in /sites/all/themes/
- Upload Modules/maxx to modules directory in /sites/all/modules/
- Upload all folders from Libraries directory to Libraries directory in /sites/all/libraries/
- In Drupal admin , Appearance and set Maxx as a default theme, and active all uploaded modules.

# 2Using basic html shortcodes

Use the following examples to create your site

### 2.1 Column

To create column, you can use the following html shortcodes, you just need to put your content inside them.

<div class="column-class"> your content </div>

Replace column-class with the following class:

- one-half (1/2)
- one-third (/3)
- two-third (2/3)
- one-fourth (1/4)
- three-fourth (3/4)
- one-fifth (1/5)
- two-fifth (2/5)
- three-fifth (3/5)
- four-fifth (4/5)
- one-sixth (1/6)
- five-fifth (5/6)

first class is for first column, start from the left;

Examle: to create three columns, the syntax will be:

    <div class="one-third first">
    	Column 1
    </div>

    <div class="one-third">
    	Column 2
    </div>

    <div class="one-third">
    	Column 3
    </div>

### 2.2 Buttons & Notifications

#### 2.1.1 Button:

There 2 type of buttons: Theme buttons and extra buttons. Theme button was defined by theme color skin. if you change the skin primary button color will change too.

##### Theme buttons

default and primary style (defined by color skin);

3 sizes: small, medium and large;

    <a class="button large" href="#" target="_self" title="Button Text">Button Text</a>
    <a class="button medium" href="#" target="_self" title="Button Text">Button Text</a>
    <a class="button small" href="#" target="_self" title="Button Text">Button Text</a>

    <a class="maxx-primary-button large" href="#" target="_self" title="Button Text">Button Text</a>
    <a class="maxx-primary-button medium" href="#" target="_self" title="Button Text">Button Text</a>
    <a class="maxx-primary-button small" href="#" target="_self" title="Button Text">Button Text</a>

##### Extra buttons

- 9 colors: light, aqua, blue, green, grey, red, orange, purple, and teal
- 2 styles: default and rounded
- 3 sizes: small, medium and large;

    <a class="md-button small  light" href="#" target="_self" title="Light button">Light button</a>
    <a class="md-button small  aqua" href="#" target="_self" title="Aqua">Aqua</a>
    <a class="md-button small  blue" href="#" target="_self" title="Blue">Blue</a>
    <a class="md-button small  green" href="#" target="_self" title="Green">Green</a>
    <a class="md-button small  grey" href="#" target="_self" title="Grey">Grey</a>
    <a class="md-button small  red" href="#" target="_self" title="Red">Red</a>
    <a class="md-button small  orange" href="#" target="_self" title="Orange">Orange</a>
    <a class="md-button small  purple" href="#" target="_self" title="Purple">Purple</a>
    <a class="md-button small  teal" href="#" target="_self" title="Button Text">Button Text</a>

if you want to change size, just replace the previous source like this:

    <a class="md-button large teal" href="#" target="_self" title="Button Text">Button Text</a>

to use rounded button: just add rounded class

    <a class="md-button medium teal rounded" href="#" target="_self" title="Button Text">Button Text</a>

#### 2.1.2 Notifications:

Five colors: light, blue, yellow, green, red

    <div class="md-notification light">
    	Custom notification<a class="close" href="#" title="Close this">Close</a>
    </div>

    <div class="md-notification blue">
    	Information notification.<a class="close" href="#" title="Close this">Close</a>
    </div>

    <div class="md-notification yellow">
    	Attention notification.<a class="close" href="#" title="Close this">Close</a>
    </div>

    <div class="md-notification green">
    	Success notification.<a class="close" href="#" title="Close this">Close</a>
    </div>

    <div class="md-notification red">
    	Error notification. The close button have been disabled</div>
    </div>

### 2.3 Iconboxes & Dropcaps

#### 2.3.1 Iconboxes:

    <div class="icon-boxes-wrapper">
    	<div class="icon-icon"><img src="http://your-domain.com/image-url.png"></div>
    	<div class="icon-content">
    		<h4 class="icon-header">Icon Heading</h4>
    		<p>Your content goes here. Suspendisse scelerisque facilisis neque ut pulvinar.</p>
    	</div>
    </div>

#### 2.3.2 Dropcaps:

5 styles of dropcap:

- rouded
- rounded primary color
- circle
- circle primary color
- Letter

To create the above dropcaps ,we will place dropcap shortcode inside one-third column , the code will be

    <div class="one-third first">
    	<span class="drop-cap primary">1</span>This is default dropcap with primary color .et bibendum augue pharetra. Praesent aliquet convallis erat, vitae feugiat ipsum commodo at. Duis facilisis tristique magna id sagittis.
    </div>

    <div class="one-third">
    	<span class="drop-cap primary">1</span>This is default dropcap. et bibendum augue pharetra. Praesent aliquet convallis erat, vitae feugiat ipsum commodo at. Duis facilisis tristique magna id sagittis.
    </div>

    <div class="one-third">
    	<span class="drop-cap circle primary">1</span>This is circle dropcap with primary color .et bibendum augue pharetra. Praesent aliquet convallis erat, vitae feugiat ipsum commodo at. Duis facilisis.
    </div>

    <!--Divider-->
    <div class="sp "></div>

    <div class="one-third first">
    	<span class="drop-cap circle primary">1</span>This is circle dropcap.et bibendum augue pharetra. Praesent aliquet convallis erat, vitae feugiat ipsum commodo at. Duis facilisis tristique magna id sagittis.
    </div>

    <div class="one-third">
    	<span class="drop-cap letter">1</span>This is circle dropcap.et bibendum augue pharetra. Praesent aliquet convallis erat, vitae feugiat ipsum commodo at. Duis facilisis tristique magna id sagittis.
    </div>

### 2.4 List & dividers

#### 2.4.1 List

There are 10 styles for list: dot, tick, star, bubble, document, info, cross, plus, arrow and default (no icon). Have a look at the following preview:

The syntax for list shortcode will be:

    <ul class="md-list your-icon-style">
    	<li>Title 1</li>
    	<li>Title 2</li>
    	<li>Title 3</li>
    	<li>Title 4</li>
    </ul>

replace your-icon-style with mentioned styles from above description.

#### 2.4.2 Dividers

There are 4 style of dividers: default, Triple line, shadow, and back to top.

here are the syntax for dividers:

    <!--Default-->
    <div class="sp"></div>

    <!--Triple line-->
    <div class="sp heading"></div>

    <!--Shadow-->
    <div class="sp shadow">
    	<img src="http://yourdomain.com/sites/default/files/uploads/large-seperator.png" />
    </div>

    <!--back to top-->
    <div class="sp pattern back-top">
    	<span class="back-to-top">Top</span>
    </div>

### 2.5 Image Slider & Testimonial Slider

#### 2.5.1 Image Slider

There are the following parameters for image slider:

- animation: slide, fade
- autoplay: true, false
- direction: horizontal, vertical
- speed: miliseconds: eg 5000 = 5 seconds

Just replace the following highlighted variables with above parameters

    <div class="flexslider flexslider-shortcode" data-animation="slide" data-autoplay="true" data-direction="horizontal" data-speed="3000">
    	<ul class="slides">
    		<li>
    			<img alt="" src="http://yourdomain.com/sites/default/files/uploads/slide1.jpg" />
    			<p class="flex-caption">Caption for slide 1</p>
    		</li>
    		<li>
    			<img alt="" src="http://yourdomain.com/sites/default/files/uploads/slide2.jpg" />
    			<p class="flex-caption">Caption for slide 2</p>
    		</li>
    		<li>
    			<img alt="" src="http://yourdomain.com/sites/default/files/uploads/slide3.jpg" />
    		</li>
    	</ul>
    </div>

#### 2.5.2 Testimonial Slider

####

There are two effect for testimonial slider: fade and slide

Replace the following highlighted variable:

    <div class="flexslider testimonial-slider-fade">
    	<ul class="slides">
    		<li>
    			<p>Aliquam laoreet semper justo id ornare. Nunc eros sem, ornare sit amet luctus non, suscipit id augue. Aliquam consectetur consequat nunc, quis porttitor erat fringilla nec. I</p>
    			<p style="float:right"><strong>Manh</strong> - <em>Web Designer</em></p>
    		</li>
    		<li>
    			<p>Vivamus lacinia convallis tempor. Suspendisse condimentum imperdiet urna in vestibulum. Fusce sit amet est in ipsum consectetur adipiscing Nullam vel leo in ipsum placerat tincidunt sit amet a dolor. Nunc a orci libero. Ut eget gravida enim. Mauris eget enim eget erat faucibus rutrum.</p>
    			<p style="float:right"><strong>Jackie</strong> - <em>Visual Designer</em></p>
    		</li>
    		<li>
    			<p>n semper dapibus velit, sed ornare urna aliquam non. Mauris pulvinar ultrices dignissim. Curabitur metus velit, mattis sed vestibulum quis, feugiat at felis. Nunc in nulla non turpis consequat euismod.</p>
    			<p style="float:right"><strong>Bobby</strong> - <em>Director</em></p>
    		</li>
    	</ul>
    </div>

### 2.6 Tables

Horizontal table header

    <table class="m-table" width="100%">
    	<thead>
    		<tr>
    			<th> Title1</th>
    			<th> Title2</th>
    			<th> Title3</th>
    			<th> Title4</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td> Content</td>
    			<td> Content</td>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    		<tr>
    			<td> Content</td>
    			<td> Content</td>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    		<tr>
    			<td> Content</td>
    			<td> Content</td>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    		<tr>
    			<td> Content</td>
    			<td> Content</td>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    	</tbody>
    </table>

Vertical Table header

    <table class="m-table" width="100%">
    	<tbody>
    		<tr>
    			<th> 1</th>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    		<tr>
    			<th> 1</th>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    		<tr>
    			<th> 1</th>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    		<tr>
    			<th> 1</th>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    		<tr>
    			<th> 1</th>
    			<td> Content</td>
    			<td> Content</td>
    		</tr>
    	</tbody>
    </table>

### 2.7 Accordion, Tabs, Toggles

Just change the following highlighted class:

    <dl class="m-simple-accordion">
    	<dt> <span>Title 1</span></dt>
    	<dd>
    		<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nibh mi, commodo eu, pellentesque ut, blandit rutrum, ligula. Praesent ultricies urna a urna.</div>
    	</dd>
    	<dt> <span>Title 2</span></dt>
    	<dd>
    		<div>
    			<p>Quisque massa. Cras ipsum diam, hendrerit id, accumsan sit amet, fermentum vel, dui.. Duis vulputate elit in elit. Mauris dictum libero id justo.</p>
    			<p>Fusce in est. Sed nec diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    		</div>
    	</dd>
    	<dt> <span>Title 3</span></dt>
    	<dd>
    		<div> Nullam vel tincidunt ligula. Donec ligula mauris, vehicula quis feugiat at, consequat ut velit. Praesent vestibulum orci vitae nibh cursus vulputate. Donec aliquam laoreet commodo. Praesent vestibulum orci vitae nibh.</div>
    	</dd>
    </dl>

### 2.8 Typography

#### 2.8.1 Headings

Double color for heading: Just copy the highlighted classes to headings to make it double colorized

    <h1 class="first-word double-color">
    	Double color
    </h1>

    <blockquote>
    	<p>Duis tempor lectus lectus. Integer orci enim, vestibulum non semper eu, adipiscing vel nulla. Phasellus pharetra facilisis nulla, vel sagittis tortor facilisis sit amet. Vestibulum</p>
    </blockquote>

### 2.9 Video

Lightbox:

    <a class="alignleft img-border image-preview" href="../sites/default/files/uploads/slide5.jpg" rel="prettyPhoto" title="Lightbox Demo">
    	<img alt="Lightbox Demo" src="../sites/default/files/uploads/slide5.jpg" style="width: 400px;">
    </a>

# 3Setting Media

###

### Adding size: 720x220.

Step 1. In Admin menu, go to: Configuration -> Image styles -> Add style

Step 2. In Popup window, enter "720x220" to Style name. and click Create new style

Step 3. Look at the following image for the configuration. after done setting, hit Add

Step 4. Enter width & height then hit Add effect to save the settings.:

#### REPEAT THE ABOVE STEPS TO ADD THE FOLLOWING IMAGE STYLES WITH THESE SIZING INFORMATION

- 720x220: sizing will be 720x220 px

- portfolio_thumb_282x150: Sizing will be 282x150 px

- portfolio_thumb_611_420: Sizing will be 611x420 px

- slideshow: Sizing will be 940x370 px

- thumb_60x60: Sizing will beSizing will be 60x60 px

# 4Adding Taxonomy Vocabulary

### 4.1. Adding Categories vocabulary taxonomy

- In Admin menu, click Structure -> Taxonomy -> Add vocabulary

- Enter these fields as a following image. Then hit Save

Note: Machine name must be "categories"

### 4.2. Create Project vocabulary taxonomy

Taxonomy Project is used for Portfolio

- In Admin Menu click: Structure -> Taxonomy -> Add vocabulary

- Enter these fields as the following image:

Note:Machine name must be "project"

# 5Manage top menu

### 5.1

- In Admin Menu click: Structure -> Blocks.

re-select REGION for Main menu block : "Main menu" as a following image. and click Save blocks .

Note: Remove Main menu block title .

### 5.2. Manage Menu bar

#### 5.2.1 - In admin menu click: Structure ->Menus -> Add menu.

- Enter these fields as a following image

- To add link (menu item) to created menu,click "add link" as a following image and hit save:

### 5.2.2. In admin menu click: Structure -> Blocks.

- Re-select REGION for "Menu bar" block : "Menu bar" as a following image.then hit Save blocks .

Note: Remove the title of Menu bar block

# 6Creating Home Page

### Step 1. Add content.

- In admin menu, click Content -> Add content -> Basic page :

- Insert title, body and select options as a following image. Then hit Save after done.

html Shortcode for body will be:

    <div class="one-third first">

    	<h3 class="first-word double-color "> Who we are ?</h3>

    	<div class="border-frame"><img alt="Business_people_with_question_mark_on_boards-300x162.jpg" class="alignnone" src="http://demo.yeahthemes.com/drupal/maxx/sites/default/files/uploads/Business_people_with_question_mark_on_boards-300x162.jpg" /></div>

    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">This is a link of short code page</a>, nibh ut feugiat placerat, orci lacus accumsan erat, eget porttitor arcu velit a lacus.</p>

    	<p>Sed tempus bibendum risus, nec dignissim sem vestibulum ut. Nam iaculis aliquam elementum. Nunc sed dignissim sapien.</p>

    	<div class="sp "> &nbsp;</div>

    	<p><a class="read-more" href="#" target="_self" title="Read more">Read more</a></p>

    	</div>

    <div class="one-third">

    <h3 class="first-word double-color "> What we do ?</h3>

    	<p><img alt="clipboard_48.png" class="alignleft" src="http://demo.yeahthemes.com/drupal/maxx/sites/default/files/uploads/clipboard_48.png" />&nbsp;<strong>Design web templates</strong><br />

    	Donec ligula mauris, vehicula quis feugiat at, consequat ut velit.</p>

    	<div class="clear"> &nbsp;</div>

    	<div class="sp nomargintop"> &nbsp;</div>

    	<p><img alt="bug_48.png" class="alignright" src="http://demo.yeahthemes.com/drupal/maxx/sites/default/files/uploads/bug_48.png" />&nbsp;<strong>Interface Development</strong><br />

    	Nullam vel tincidunt ligula. Donec ligula mauris, vehicula quis feugiat at</p>

    	<div class="clear"> &nbsp;</div>

    	<div class="sp nomargintop"> &nbsp;</div>

    	<p><img alt="help_48.png" class="alignleft" src="http://demo.yeahthemes.com/drupal/maxx/sites/default/files/uploads/help_48.png" />&nbsp;<strong>Support 24/7</strong><br />

    	Nibh ut feugiat placerat, orci lacus accumsan erat, eget porttitor arcu velit a lacus.</p>

    	<div class="clear"> &nbsp;</div>

    	<div class="sp "> &nbsp;</div>

    	<p><a class="read-more" href="#" target="_self" title="Read more">Read more</a></p>

    </div>

    <div class="one-third">

    	<h3 class="first-word double-color "> Why choose us</h3>

    	<p>Nullam vel tincidunt ligula. Donec ligula mauris, vehicula quis feugiat at, consequat ut velit. Praesent vestibulum orci vitae nibh cursus vulputate. Donec aliquam laoreet commodo. Praesent vestibulum orci vitae nibh.</p>

    	<ol>

    	<li> Lorem ipsum dolor sit amet, consectetur</li>

    	<li> Donec ligula mauris</li>

    	<li> Aenean sed</li>

    	<li> Nullam ven tincidunt dolor</li>

    	<li> Lorem ipsum dolor</li>

    	<li> Nam iaculis aliquam elementum</li>

    	</ol>

    	<div class="clear"> &nbsp;</div>

    	<div class="sp "> &nbsp;</div>

    	<p><a class="read-more" href="#" target="_self" title="Read more">Read more</a></p>

    </div>

### Step 2:

- Copy url of the page you just created..

- In admin menu click: Configuration -> Site information.

Go to Default front page, enter an URL of the page (that you have copied )as a following image. Hit Save configuration after done.

- Clear cache and go to your home page.

# 7Setting up Blog Page

### 7.1

Step 1. Activate blog module by check to Blog from Modules as a following image,Hit Save Configuration after done setting.

### 7.2

Step 2. Add more fields for BLOG CONTENT TYPE that have just been activated for blog page

- In Admin Menu: cick Structure -> Content types -> Click manage fields của Blog as a following image:

#### 7.2.1.Create the following fields:

##### 7.2.1.1- Image Field:

+ Input and select these fields as a following image: Hit Save to continue.

+ In the next step, Select as a following image. and Hit Save settings after done setting..

Note: 720x220 for Preview image style . If image style "720x220" does not exist , follow the instruction to add image style.

##### 7.2.1.2 - Field Tags:

+ Select these fields as a below image: then hit Save .

+ Next, Select as the following image. and click Save settings.

Note : Vocabulary select Tags. if Vocabulary tags doesn't exist, follow the instruction to add taxonomy vocabulary

##### 7.2.1.3- Field Categories:

+ Add new field as a following image: Hit Save to continue.

Note: Machine Name must be"field_categories‎"

+ In the next step, Setting as a following image. Hit Save settings after done.

#### 7.2.2. Fields Ordering for Blog

- In admin menu: click Structure -> Content types -> Manage display

- now order and select as a following image, Remember to hit Save.

##### 7.2.2.1. Default

##### 7.2.2.2 Teaser

### 7.3. Adding blog menu item to Main Menu

- In Admin Menu: clickStructure -> Menus -> Add link from Main menu

- Enter these fields as a following image. then Hit save .

Note: Path must be"blog"

- Embed "Main menu" block to "Main menu" location , and Hit Save blocks.

- Clear your cache. Done!

# 8Creating Portfolio page

Portfolio page was combined by Conten types and the following modules::

Main Module :

- Views Isotope - jQuery Isotope: https://drupal.org/project/views_isotope

Other Modules:

- Views: https://drupal.org/project/views

- Ctools: https://drupal.org/project/ctools

- jQuery update: https://drupal.org/project/jquery_update

- Libraries: https://drupal.org/project/libraries

- Features: https://drupal.org/project/features

### 7.1. Activate Views Isotop and Views UI module

#### 8.2. Creating portfolio content type

- In admin menu, click Structure -> Content Types -> Add content type

- In the next step, Enter these fields as a following image. then click Save and add fields .

Note: Machine name mus be "portfolio".

#### 8.2.1. Adding Image field for portfolio content type .

- Follow the below instruction, and hit Save .

- Next step, follow the below settings from image. and hit Save settings.

Note: Preview image style must be "portfolio_thumb_282x150". If image styles "portfolio_thumb_282x150" doesn't exist, Follow the instruction to add image styles

#### 8.2.2. Adding Picture field for portfolio content type.

- Follow the below instruction, then hit save after done setting.

- Next, click Save field settings.

- Preview image style: Select "portfolio_thumb_611_420". if image style"portfolio_thumb_611_420" doesn't exist, follow the instruction to add one.

- In Number of values: select Unlimited

- Hit Save settings .

#### 8.2.3. Adding Project field for portfolio content type .

- Follow the below instruction, the hit Save.

- In the next step, Vocabulary choose Project, Hit Save field settings .

- Continue selecting these fields the below image, Hit Save settings after done.

If vocabulary Project doesn't exist, follow the instruction to add taxonomy vocabulary

### 8.3. Adding Portfolio filter

- In admin menu, click Structure -> Views -> Add new view.

- Enter these fields as a below image, then click Continue & edit .

Note: Marchine name must be "isotope_portfolio_filter_block". if taxonomy vocabulary Project doesn't exist, Follow the instruction to add a taxonomy vocabulary.

- next step, click Settings as the following image.

- in the Popup, uncheck Provide default field wrapper elements. then click Apply (all displays) .

- next, click Taxonomy term: Name .

- in the Popup, uncheck Link this field to its taxonomy term page and Add default classes as the below image.

Click Apply (all displays) .

- And don't forget to hit Save at the top.

### 8.4. Adding PORTFOLIO page

In admin menu, click Structure -> Views -> Add new view.

- Next step, select these options as the below image. Click Continue & edit..

Note: Machine name must be: "portfolio". if Portfolio content type does not exist, follow the instruction to add portfolio content type .

#### 8.4.1. Edit Content field : Title: click menu "Content Title":

- In the popup, configure as the below image. then Apply (all displays).

#### 8.4.2. Adding Content field : Image.

Click add

- In Popup, Check to Content:Image , and click Apply (all displays) .

- Next, add CSS class to image field : "img-border align-none project-thumbnail image-preview".

Click Apply (all displays)

#### 8.4.3. Adding Content field: Project.

Click Add :

- In Popup, check to Content: Project . then hit Apply (all displays) .

- Next step: Select these fields as a below image, add CSS Class "isotope-filter" for Project field .

and Click Apply (all displays) .

#### 8.4.4. Re-ordering fields:

#### 8.4.5 Add header for page portfolio.

- Click Add.

- in popup, check to "Global: View area" .then hit Apply (all displays) .

- Next, in View to insert, select view header that we just created. "View: isotope_portfolio_filter_block - Display: default".

and CLick Apply (all displays).

#### 8.4.6. Final step, Hit Save from the top :D.

#### 8.4.7. adding portfolio item.

in admin menu, click Content -> Add content -> Portfolio.

- Look at the below image and visualize how your data will be displayed

# 9Adding Contact page

### 9.1. Activate Contact. and Save configuration .

### 9.2. Add contact menu item to Main menu.

Syntax should be: http://your-domain.com/contact.

# 10Managing Modules

CONFIGURE BLOCKs, MODULEs for WEBSITE.

### 10.1. SEARCH MODULE:

- Search bar in main menu use default Search form block .Just set the location for block: "Search form" as the below image.

Note: Remove Block title and change display permission for multiple user-role if necessary.

### 10.2. SUBSCRIBE BLOCK

### - Use Simplenews: https://drupal.org/project/simplenews

Step 1: After installing, activating and change Permissions if necessary.

Click Save Configuration.

Step 2. Drag Newsletter block to Subscription region , then click configure

- Enter these fields, and Save block .

And Clear cache to view the change

### 10.3. TOP CAPTION BLOCK

- In admin menu, click Structure -> Blocks -> Add block

- Enter these fields: and Save block.

Content for body should be: "<p>E-mail: <a href="mailto:info@example.com">info@example.com</a> - Tel: <strong>(+00) 1234.567.890</strong></p>".

Change with your info.

### 10.4. Modules: LATEST TWITTER, FLICKR PHOTOS, RECENT POST FOOTER, CATEGORIES, TAG CLOUD, RECENT POST SIDEBAR, SOCIAL NETWORK, RECENT WORK, SLIDESHOW.

- activate Maxx Widget module from module manager, and click Save configuration .

#

#### 10.4.1 Block latest twitter

- In admin menu, click Structure -> Block ->Choose region for [Maxx] Latest Tweets is Footer region 1. and Save block .

- click configure for the configuration.

#### 10.4.2. Block Flickr Photos

- in Admin menu, click Structure -> Block ->choose region for [Maxx] Flickr Widget is Footer region 2. And and Save block.

- click configure for the configuration.

#### 10.4.3. Block Recent post footer

- in Admin menu, click Structure -> Block ->choose region for [Maxx] Recent posts footer is Footer region 3. and Save block.

- click configure for the configuration.

#### 10.4.4 Block Recent posts footer :

displays posts from blog content type .

#### 10.4.4. Block Categories sidebar

- in Admin menu, click Structure -> Block ->choose region for [Maxx] Categories sidebar is Sidebar second. and Save block.

- click configure for the configuration..

#### 10.4.5 Block Categories sidebar

displays selected taxonomies

#### 10.4.6. Block Tag Cloud

- in Admin menu, click Structure -> Block ->choose region for [Maxx] Tag Cloud sidebar is Sidebar second. and Save block.

- click configure for the configuration.

#### 10.4.7 Block Tag Cloud sidebar

displays selected taxonomies

#### 10.8. Block Recent Posts Sidebar

- In admin menu, click Structure -> Block ->choose region for [Maxx] Recent posts sidebar is Sidebar secondand Save block.

- click configure for the configuration.

####

#### 10.4.9 Block Recent posts sidebar

displays posts from blog content type .

#### 10.4.10. Social network

- In admin menu, click Structure -> Block -> choose region for [Maxx] Social network is Social network. and Save block.

- click configure for the configuration.

#### 10.4.11. Slideshow

- Slideshow Block use images from Slideshow content type

.

##### 10.4.11.1. Adding Slideshow content type .

- In admin menu, click Structure -> Content types -> Add content type

- Enter these fields as a following image. Hit Save and add fields to continue

Note: Machine name must be "slideshow"

- Next , add image field as the following image. and Click Save

- In Preview image style , select slideshow .then hit Save settings.

####

##### 10.4.11.2. Adding slide image

- In admin menu, click Content -> Add content -> Slideshow

- Insert title and body for slide then click Save .

##### 10.4.11.3. Activate [Maxx] Slideshow block

- In admin menu, click Structure -> Block -> Choose region for [Maxx] Slideshow is Slideshow. and hit Save block

- Clear cache to view the change.

#### 10.4.12. Block Recent work sidebar.

This block displays the latest portfolio items from portfolio.

- In admin menu, click Structure -> Block -> choose region for "[Maxx] Recent Work" is "Sidebar second". and Save block .

- click Configure to re-config

# 11Using Google font

Go to http://www.google.com/fonts/ ,search and choose your font,

In this example, we will use Titillium Web, and click quick use:

Next, choose your font style and subset:

Copy the code in @import tab to admin/appearance/settings/maxx -> Custom CSS:

We need to specify which elements will use google font, in this example, only the headings will be applied and the code will be:

    h1, h2, h3, h4, h5, h6{
    	font-family: 'font name', sans-serif;
    }

and of course, the final code must be:

    @import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,700);
    h1, h2, h3, h4, h5, h6{
        font-family: 'Titillium Web', sans-serif;
    }

And don't forget to Save settings.

# 12Resources & Credits

The following resources where used in the theme.

### 12.1 Javascript

- jQuery - http://jquery.com/
- FlexSlider - http://www.woothemes.com/flexslider/
- SkitterSlider - http://thiagosf.net/projects/jquery/skitter/
- Isotope (Comercial License) - http://isotope.metafizzy.co/
- jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
- PrettyPhoto - http://www.no-margin-for-errors.com/
- hoverIntent r6 - http://cherne.net/brian/resources/jquery.hoverIntent.html
- jQuery Touchdown Plugin - https://github.com/samuelcotterall/Touchdown
- jquery.fitvid http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
- froogaloop http://vimeo.com
- TitilliumText25

### 12.2 Modules

- ckeditor: https://drupal.org/project/ckeditor
- IMCE: https://drupal.org/project/imce
- Simplenews: https://drupal.org/project/simplenews
- views_isotope: https://drupal.org/project/views_isotope
- Views: https://drupal.org/project/views
- Ctools: https://drupal.org/project/ctools
- jQuery update: https://drupal.org/project/jquery_update
- Libraries: https://drupal.org/project/libraries
- Features: https://drupal.org/project/features

### 12.3 Icons used

- Basic icon set by PixelMixer (48x48) - Link Download
- iconSweet Link