Installation & Help File - Magnifizine (WP)

GhostPool Designs | Created 17-Jan-10 | Help File 06-Apr-10

Change Log

Table of Contents

1. Installation
2. HTML Structure
3. CSS Files and Structure
4. Javascript
5. PSDs
6. Using The Main Slider
7. Adding Videos
8. Creating A Portfolio
9. Creating A Blog
10. Redirect Template
11. Other Page/Post Templates
12. Alternative Category Template
13. Splitting Posts/Page
14. Using The Lightbox
15. Changing The Font
16. Theme Options
17. Additional Plugins
18. Sources and Credits

Installation

1. You should have already unzipped the file you downloaded.
2. Now you can either upload the "magnifizine" folder to your /themes directory via an FTP program OR zip/compress the contents within the folder called "magnifizine" and go to your WordPress Admin Panel, select Appearance > Add New Themes > Upload and select the folder you just zipped.
3. Next go to Appearance > Themes and activate the theme called "Magnifizine".
4. Next download the video player needed to play videos in the slider by clicking here. Unzip the folder and upload it to your "magnifizine/includes" directory.

   Make sure the the folder you upload is named "mediaplayer" and not "mediaplayer-viral" and that the file within the folder is named "player.swf" and not "player-viral.swf".

5. Go to Appearance > Magnifizine Options to edit the theme.
6. If you have images uploaded to your posts prior to installing this theme you will want to recrop all images. Simply go to Plugins > Add New and search for "Regenerate Thumbnails". Install and activate the plugin called "Regenerate Thumbnails" and then run the plugin from Tools > Regen. Thumbnails.

HTML Structure

This theme is a fixed layout with two columns. All of the information within the main content area (column #1) is nested within a div with an id of "main-content". The sidebar's (column #2) content is nested within a div with an id of "sidebar".

If you want to edit a particular section of the site you should first identify the HTML and CSS tags that are controlling it. For FireFox users the easiest way of doing this is by downloading Firebug, which allows you to right click on any part of the web page to show you the HTML and CSS controlling it. Google Chrome has a similar application built into their browser.

CSS Files and Structure

There are several style sheets with this theme, but style.css is the main style sheet. You can either customize the CSS styling code without editing style.css by going to Appearance > Magnifizine Options > Style Settings or opening style.css in a text editor. The file is separated into sections so it is easy to locate the tag you want to change.

/* Page Body */ css code /* Navigation */ css code /* Logo */ css code /* Search */ css code

Javascript

This theme uses eight javascript files located in the "js" folder:

1. jquery.flow.1.2.js: Main "Sweep Across" slider
2. jquery.cycle.min.js: Portfolio slider
3. s3Slider.js: Mini transitional slider
4. jquery.prettyPhoto.js: Lightbox functionality
5. DD_belatedPNG_0.0.8a-min.js: PNG transparency support for IE6
6. jquery.smoothDivScroll-0.9-min.js: Scroll horizontally within div tags
7. jquery.tabs.js: Tabbed interface
8. menu.js: Dropdown menu functionality

PSDs

All of the layered images used in this template come in PSD form. This means they can be opened in a program such as Adobe Photoshop and edited layer by layer.

Using The Main Slider

1. Create or edit an existing post and click on the "Add An Image" button to upload your image(s).

   

2. Now click the "From Computer" tab and upload your image(s).
3. Once the image(s) have been upload choose which one you want to display in the slider by clicking the "Use as thumbnail" link.

   

4. Now close the "Add an Image" window and check the "Main Slider" box in the "Additional Options" panel below the post text.

Note: The images in the slider are the following sizes: Large Slider - 980px x 525px; Medium Slider - 980px x 350px; Small Slider - 780 x 418px.

When uploading images make sure you have a directory called "uploads" in /wp-content and that it has file permissions of 755 (CHMOD). Go to your WP Admin Panel and find Settings > Miscellaneous and make sure the first text box is referring to your uploads folder, it probably should be set to "wp-content/uploads".

Adding Videos

Note: The main slider only supports Flash (.flv) and YouTube videos; the lightbox supports Flash, (.flv), YouTube, Vimeo and Quicktime videos.

1. When adding an image to a post, add the video URL to the "Description" box in the image upload window, using one of the following formats:

   YouTube: http://www.youtube.com/watch?v=5PSNL1qE6VY
   Flash (flv): http://www.example.com/videos/videofile.flv
   Vimeo: http://vimeo.com/8245346
   QuickTime: http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=780&height=418

2. Give this image an order number of "1" if you're displaying it as the main image in the slider/portfolio.

   

3. The video will then load in the main slider and portfolio when the image is clicked.

Creating A Portfolio

1. Go to Pages > Add New, give your page a title (e.g. Portfolio) and from the drop down menu on the right-hand side select the Portfolio template.
2. Next enter your category IDs in the "Portfolio Categories" text box, leave blank to display all categories (the ID can be found by going to Posts > Categories, hovering your mouse over the relevant category link and getting the ID from the URL indicator at the bottom of the browser window).
3. To create portfolio subcategories, create a new page, assign it to the "Portfolio" template and then enter your category IDs in the "Portfolio Categories" text box.
4. Set the parent page to the portfolio page of your choice from the "Parent" drop down menu on the right-hand side.
5. In order to display images in the portfolio you need to create or edit an existing post and click the "Add An Image" button to upload your image(s).

   

6. Once the image(s) have been upload choose which one you want to display in the slider by clicking the "Use as thumbnail" link.

   

7. Give the main image in each your portfolio entries an order number of "1".

   

Creating A Blog

1. Go to Pages > Add New, give the page a title and then select the "Blog" page template from the drop down menu on the right-hand side of the page.
2. Enter your blog category IDs in the "Blog Categories" text box in the "Additional Options" panel, leave blank to display all categories (the ID can be found by going to Posts > Categories, hovering your mouse over the relevant category link and getting the ID from the URL indicator at the bottom of the browser window).

Redirect Template

1. The redirect template allows you to direct pages to external websites.
2. Go to Pages > Add New, give the page a title and then enter the website URL in the main post textbox e.g. http://google.com
3. Select the "Redirect" template from the right-hand side.
4. Finally publish your post.
5. Now when you click the link to this page in the navigation or sliders it will open up http://www.google.com.

Other Page/Post Templates

1. Post Templates: You can select the Default, Full Width or Two Columns post templates from the Additional Options panel.

2. Page Templates: You can select the Default, Full Width, Two Columns, Contact, Blog, Redirect or Portfolio page templates from the right-hand side.

Alternative Category Template

To create a category with the alternative category template go Appearance > Magnifizine Options > Category Settings and enter the IDs of the categories you want to display the alternative category template.

Splitting Posts/Page

To split the page or post content across multiple pages add

<!--nextpage--> within your text where you want it to be split.

Using The Lightbox

1. To use the image or video pop up effect add rel="prettyPhoto" to your links as follows: <a href="http://example.com/imagename.jpg" rel="prettyPhoto"><img src="http://example.com/imagename.jpg" alt=""></a>
2. If you want to display the Next and Previous arrows in the lightbox add rel="prettyPhoto[groupname]" instead: <a href="http://example.com/imagename.jpg" rel="prettyPhoto[groupname]"><img src="http://example.com/imagename.jpg" alt=""></a>
3. Now any image link with the same group name will be added to the same lightbox group.

Changing The Font

1. You can change the header text font (BonvenoCF-Light) by downloading your own font files.
2. Your fonts are probably either in TTF or OTF format. You also need to convert the font files in .EOT format so they display in Internet Explorer. Go to the @Font-Face Generator to convert your font files.
3. Now upload all of your font files to "magnifizine/images/fonts".
4. Next open style.css and find: @font-face { font-family: 'BonvenoCF-Light'; src: url('images/fonts/BonvenoCF-Light.otf') format('opentype'); }
5. Change BonvenoCF-Light to your own font name.
6. Next change the file name and switch .otf to .ttf and opentype to truetype if necessary.
7. Now go through style.css and replace all instances of BonvenoCF-Light with your new font name, for example here you would replace BonvenoCF-Light with your own font name: h1, h2, h3, h4, h5, h6 { font-family: 'BonvenoCF-Light', Arial; font-weight: normal; margin: 0; padding: 0 0 10px 0; text-transform: uppercase; }
8. Now open style-ie.css and do the same.

Theme Options

You can access a number of options to personalize your theme from within your WordPress Admin Panel by selecting Magnifizine Options from the Appearance tab. All the option fields are clearly labelled, so everything should be self explanatory.

Additional Plugins

This theme has been designed to work with the following plugins out of the box. Go to Plugins > Add New, search for the relevant plugins and activate. The plugins will be styled and functional right away:

1. WP-PageNavi
   Converts the Next and Previous page links to numbers.
2. Subscribe to Comments
   Allow users to subscribe to comments and receive an email when a new comment from a specific topic is posted.

Sources and Credit

I'd liked to give credit to the following sites for the use of their scripts and/or images:

1. jflow 1.2
2. jQuery Cycle Plugin
3. s3Slider
4. Smooth Div Scroll
5. JW Player 5
6. jQuery Tabs
7. Two Columns script
8. jQuery Image Hover Effect
9. Font "BonvenoCF-Light"