Table of Contents

1. Site Structure
2. Post Structure
3. CSS Files and Structure
4. JavaScript
5. PSD Files
6. Sources and Credits

Site Structure

• To modify the Site Logo: WordPress Admin / The Proton Theme Configuration / Your Logo URL.
• To modify the Main Navigation: WordPress Admin / Appearance / Menus.
  You could visit http://codex.wordpress.org/Appearance_Menus_SubPanel to learn more about how to using a new menu system in WordPress 3.x version.

  
  TheProton theme uses menu description to show as the small text below the main menu item, it’s hidden by WordPress default.

  When you are at the Appearance > Menus Site you need to look at the top right and you will notice a “Screen Option” tab. Click it and you will get the option to display several other input fields for each menu item, among them a checkbox to show the description.
  kriesi.at

• To modify the Call to action text: WordPress Admin / The Proton Theme Configuration / Your Call To Action Text and WordPress Admin / The Proton Theme Configuration / Your Call To Action URL.
• To modify the Featured Slideshow section:

  WordPress Admin / The Proton Theme Configuration / Slideshow Style (Choose between 3 different slider)
  
  Wordpress Admin / The Proton Theme Configuration / The number of slide in a slideshow section
  (If you do not specify any number, theProton will display all of the slides)

• To modify the Latest News section: WordPress Admin / The Proton Theme Configuration / The number of post in a latest news section.
• To modify the Twitter News section: WordPress Admin / The Proton Theme Configuration / Your Twitter Username.
• To modify the Footer Sidebar section: WordPress Admin / Appearance / Widgets.

Post Structure

When creating a new post for your website, you will see theProton post settings above showed below the WordPress Post Editor. Here is an explaination for these options:

Include this post into the featured slideshow?

• If you want to include the post to the slideshow section on your main homepage, lets stick this box.
• theProton will ask you to provide Slide title, Slide description and Slide image URL(required) for your new slide.
• If you do not provide Slide title or Slide description, theProton will display an image only.
• The image dimensions should be 960*300px (fixed) for optimal appearance.

Include this post into the featured post group?

• If you want to include the post to the featured post group on your main homepage, lets stick this box.
• theProton will ask you to provide Featured post image URL, Featured Post Title and Post description.
• Featured post image URL: The image dimensions should be 440*90px (fixed) for optimal appearance. If you leave this field blank, the theme will automatically use WordPress featured image, if not, it will get the first image of your post to process as a thumbnail (that image must be in an internal host – theProton will automatic resize image for you).
• Featured Post Title: The post title will be used if this field is blank.
• Post description: The post excerpt will be used if this field is blank.

Please choose the layout of this post:

• You can choose 3 different post layout with this option.
• The post with right sidebar will be used as default.
• E.g:
  • Full width post: http://www.intenseblog.com/theproton/blog/integer-ut-urna-porta.html
  • Post with left sidebar: http://www.intenseblog.com/theproton/function/a-sample-post-with-left-sidebar.html
  • Post with right sidebar: http://www.intenseblog.com/theproton/function/a-sample-post-with-right-sidebar.html

Please choose the type of this post headline:

The post headline is the section showed above the post content, you can put text, images, adsense banner in this section.

• Default Headline: display the Default Headline Text in the theme option page.
• Custom Headline: display the content you put in Custom Headline text box below.
• Show Latest Twitter News
• Show nothing

Disable featured image in the post page?

not show your featured image in the post page.

Disable author section in the post page?

not show the author section in the post page.

Disable related post section in the post page?

• not show the related post section in the post page.
• E.g: http://www.intenseblog.com/theproton/blog/mauris-volutpat-est-in-mi.html

Link featured image to a multimedia file?

• If you want to link the featured image to another image/video file instead of the featured image itself, lets stick this box.
• theProton will ask you to provide the file URL(required) and its dimensions.
• E.g: http://www.intenseblog.com/theproton/site/optimized-for-seo.html

Note:
1/ theProton uses the_content() to display your post content in the category/archive/search listing so when posting a new article lets divide your post content by 2 parts with more tag.

2/ theProton uses the WordPress featured image to process as the post thumbnail and automatically resize it to suit the post layout, so let follow this guild line:

• Your featured image dimensions should be greater or equal 920*300px for the full width post.
• Your featured image dimensions should be greater or equal 600*200px for the post with left or right sidebar.
• If you do not have any image with that dimensions, I recommend you using: Disable featured image in the post page.
• If you do not know how to set the featured image for your post with WordPress, please read this tutorial: http://www.bloggingtips.com/2010/06/24/featured-image-wordpress-best-underused-feature/

CSS Files and Structure

TheProton uses Black color scheme as default with a style.css file only, if you choose another color scheme, theProton will call addition css file in the Style directory.

The main stylesheet of theProton is based on 960 grid system, so you could visit http://960.gs to learn more about this framework, by using 960 grid system you could create a complex site layout easily.

The main style.css file is separated into sections using:

/* Grid */
some code

/* Logo */
some code

/* Top Menu */
some code
...

If you want to modify the Css system of theProton theme, please follow these section instruction:

/* Grid */

/* Logo */

/* Top Menu */

/* Cycle Slideshow */

/* Coin Slider */

/* Nivo Slider */

/* Call to action */

/* Featured Content section */

/* Other news section */

/* Twitter news section */

/* Footer Top */

/* Pre header */

/* Post content */

/* Author section */

/* Related Post section */

/* Comment list */

/* Comment Form */

/* Search Form */

/* Sidebar */

/* Portfolio */

/* Shortcodes Style */

JavaScript

This theme imports these Javascript files:

• If you want to customize the Main Navigation javascript, please go to: javascript/custom.js for the homepage or javascript/custom_single.js for other pages.
• If you want to customize the jQuery Cycle Slideshow javascript (e.g: transition effect…), please go to: javascript/jquery.cycle.all.latest.js and locate to to the bottom code in this file; visit http://jquery.malsup.com/cycle for more options.
• If you want to customize the Coin Slider Slideshow javascript (e.g: transition effect…), please go to: javascript/coin-slider.min.js and locate to to the bottom code in this file; visit http://workshop.rs/projects/coin-slider for more options.
• If you want to customize the Nivo Slider Slideshow javascript (e.g: transition effect…), please go to: javascript/jquery.nivo.slider.pack.js and locate to to the bottom code in this file; visit http://nivo.dev7studios.com for more options.
• If you want to customize the Lightbox effect javascript, please go to: javascript/jquery.prettyPhoto.js and locate to to the bottom code in this file; visit http://www.no-margin-for-errors.com for more options.

PSD Files

I’ve included 20 PSDs with this theme, these PSDs file were saved as the same name with the image file in image directory of theProton theme.

E.g: if you want to modify the bg_home.jpg, you need to open bg_home.psd file then make the necessary adjustments.

Sources and Credits

To learn more about the external resources that I have used in theProton theme, please visit http://www.intenseblog.com/theproton/about which has a latest update list.

I recommend you installing the sample theProton website to fully understand How this theme function.