Help
Black Aperture Theme for WordPress
Created: 05/21/2009
By: Matt Brett
Contact Info: Check my official support forums for known issues http://forums.mattbrett.com, or send a message through ThemeForest if you can’t find your answer in the forums.
———————————————————————————————————-
–VERSION HISTORY–
1.4 – 07/06/2009
* Revised Theme Settings panel to include headings that categorize options.
* Added options to remove all pages and/or categories from the nav.
* Moved search down to silver subnav bar in order to allow more room for top level tabs.
* Added text-shadow effect to nav and subnav items now that Firefox 3.5 supports text-shadow.
* Comment form now jumps to current position when replying to a comment. Cancel restores it to original position.
1.3 – Not Released to Public
* Replaced Smart Image Resizer with TimThumb dynamic image resizing script.
1.2 – 06/05/2009
* Removed some code from functions.php which could prevent the theme from being installed.
1.1 – 06/04/2009
* Added ability to disable dynamic image resizing script all together from Theme Settings panel.
1.0 – 05/21/2009
* Initial release.
———————————————————————————————————-
–TABLE OF CONTENTS–
A) Markup, Style, and Layout
B) Internet Explorer Compatibility
C) Dynamic Image Resizer
D) Image Dimensions
E) Featured Posts Showcase
F) Writing a Review Post
G) Creating the Nav
H) Widgetized Sidebars
I) Managing Ads
J) Miscellaneous Theme Settings
K) Support & Feature Requests
———————————————————————————————————-
A) Markup & Style
Black Aperture is built on XHTML 1.0 Strict and makes use of Eric Meyer’s CSS Reset technique. The templates are well commented with obvious flags, so figuring out where containers start and end shouldn’t be an issue.
The main colour scheme of Black Aperture is neutral intentionally, which only a single colour used for accent (nav, headings, etc.). From the Theme Settings panel the accent colour can be altered via an attached colour picker, or by pasting in a custom HEX value. There is a separate setting for thenav colour since it sits on a light background, while the rest of the site is on dark. You may need to use a slightly darker hue for thenav colour.
There are a few stylesheets in the /css directory – screen.css being the main one that contains all of the theme’s structure and style. There are some overrides for different versions of IE located in separatedstylesheets that are displayed conditionally.
By default, Black Aperture is a 3 column layout. The left sidebar is 120px wide (standard skyscraper width), while the right sidebar is 300px wide (standard bigbox width). From the Theme Settings panel in WP-Admin (found under Appearance), you can easily transform Black Aperture to a 2 column layout, eliminating the left sidebar all together. The right sidebar is left untouched, while the content area stretches to fill.
———————————————————————————————————-
B) Internet Explorer Compatibility
Black Aperture is compatible with all versions of IE (version 6 and up), to an extent. Some frills are missing in action since IE isn’t up to par with the latestCSS. Rounded corners on the nav items, images in posts, and buttons, for example. Some effects added to images by layering transparent PNGs have been hidden for IE6 in lieu of doing extensive work-arounds to get them to work.
In short, the theme fully works in all versions of IE, but some of the bells and whistles are missing.
———————————————————————————————————-
C) Dynamic Image Resizer
Black Aperture uses Tim McDaniels’ TimThumb (http://code.google.com/p/timthumb/) script for resizing the images used in the featured posts sections and in archive listings. Simply upload your images using the built-in media manager or direct FTP, then copy/paste the original file’s path into the Post Image field in the Additional Information box.
When you enter image paths in WP-Admin, you should start with the /wp-content directory. The WP home path is entered automatically in the templates. For example, if your image path is http://mydomain.com/wp-content/uploads/image.jpg, you would paste /wp-content/uploads/image.jpg in the field.
TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed. There shouldn’t be a problem with most web hosts, but if images are broken, this could be why. Contact your host and see if they can help you out.
If you are certain your server is compatible, you may need to check that the /cache directory is writable on your web server – set the permissions to 755 or 777.
If you absolutely cannot get TimThumb to work, I can offer no further assistance. As such, I’ve included an option in Theme Settings to disable image resizing entirely. In this case, you will have to resize images manually.
———————————————————————————————————-
D) Image Dimensions
If you’re able to make use of the dynamic image resizing, you can bypass this section entirely. In the case that your server is incompatible, you will have to resize images manually if you want them to look their best. Otherwise, images will be resized via CSS restrictions, which doesn’t produce the best results. Here are the exact sizes for each of the different images…
Post Image: 120×90
Showcase Image: 290×239
Cover Art: 140x__ (height is arbitrary)
Cover Art Thumbnail: 85x__ (height is arbitrary)
Any easy way to automate image resizing, is to use the WP media manager and adjust your settings so that images are resized to the above specifications automatically when they’re uploaded. From the Settings -> Media panel, change the values to the following…
Thumbnail: 85×85
Medium: 120×120
Large: 290×290
———————————————————————————————————-
E) Featured Posts Showcase
Adding posts to the Featured Posts Showcase is very easy. On the Write -> Post screen you should notice a new box directly under the main text area titled Additional Information. This area houses a series of input fields for the Featured Posts Showcase and reviews. As described above in section C, upload and paste the path of your image in the Post Image field. Short Title and Post Type are the other fields associated with the Featured Posts Showcase. Short Title will likely be the name of the game the post is about, while Post Type is meant to be a brief description. For example, if your post title is “Leaked Screenshots from Gears of War 3″, you might want to use “Gears of War 3″ for the Short Title, and “Leaked Screenshots” for the Post Type. Originally, I was thinking Post Type would just be used for keywords like Review, Preview, Just Announced, etc.
In order for posts to show up in this area, they have to be assigned to a unique category. I would recommend creating a “Featured” category for this very purpose. Once you have done this, make sure you enter the Featured category ID in the Theme Settings page.
———————————————————————————————————-
F) Writing a Review Post
Now that you have a basic understanding of how the Additional Information box works, adding information for a game review should be trivial. Aside from the cover image, the rest of the information is plain text that you can find from many sources online – GiantBomb (http://giantbomb.com) is my personal favourite as it’s more of a wiki format.
Upload your cover art just as you did for the Post Image. The image will be sized to 140px wide, but the height is variable to allow for different formats (regular DVD case side, Blu-ray case, DS case, etc.), so be sure that your cover image is at least 140px wide.
For the review score, you need to enter textual value. The appropriate 5 star rating will be displayed in the post. Starting with 0 and ranging to 5, ratings go up in half steps… 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5
In most cases, the Game Name will mirror the Short Title.
All of this information is conditional, so it will only show up if you have entered a value for it. Don’t worry if you can’t find a game’s developer, just leave it blank and the developer row will be hidden.
———————————————————————————————————-
G) Creating the Nav
This was a bit of a sticking point for me during development, as I wanted to try and keep it managed from within WP-Admin. I’ve done that, but I’m hoping it’s not too confusing. Basically, the home button is static, then you have the ability to add categories and pages to thenav as top level tabs. Sub-categories and sub-pages are support and will show up as a secondary nav in the silver bar below the tabs.
I would have preferred to have you include categories and pages you want in the nav, but the stock WP functions don’t work that way. Instead, you exclude the categories and pages you don’t want to show up in thenav . At this time, you have to exclude sub-pages as well. Both category and page exclusions are a comma separated list of IDs. To find an ID, go to the Categories/Pages screens in WP-Admin and hover over the name you want to exclude. Glance down to the status bar in your browser and take a look at the path. For Categories, you will see Cat_ID= then a number. That number is what you’re looking for. Pages is a little different – look for post= at the end of the URL.
You can remove all pages or all categories from the nav by checking the appropriate boxes in the Theme Settings.
———————————————————————————————————-
H) Widgetized Sidebars
Both sidebars are widgetized, so you can drag and drop standard WP widgets and custom widgets designed specifically for Black Aperture. I didn’t test every single widget I could get my hands on, but the most popular ones should display just fine.
Please refer to the WordPress Codex if you’re unfamiliar with using widgets.
http://codex.wordpress.org/Appearance_Widgets_SubPanel
———————————————————————————————————-
I) Managing Ads
There are several built-in ad spots in Black Aperture. On the Theme Settings panel you will see a series of text areas after the basic settings which are for the ads. Once you have placed your code in the appropriate areas and saved, you will need to add the associated widgets to the sidebars.
The 125×125 buttons widget can support any number of ads, up to 4. Obviously, even numbers look best. But if you only have 2 ads, don’t fret, it will look just fine.
———————————————————————————————————-
J) Miscellaneous Theme Settings
There are a few other options on the Theme Settings panel that haven’t been covered above.
Use Plain Text Logo – If you aren’t able to create an image logo, you can enable this and the theme will use the Blog Title and Tagline you have entered in the General Settings.
Logo Image Path – If you do have a logo and would like to use it in the header, you can replace the default image pretty easily. Using the blackaperture-logo.psd template, simply drop your image in, scale to fit, and save. Once you upload it to your server (wherever you want), put the path in this field and you’ll be good-to-go.
Facebook URL, MySpace URL, Twitter URL – When you enter a URL for each of these sites, a nice big button is placed in the header. I will likely be adding more buttons if there are requests for them. I figured the big 3 would be a good start. Buttons only show up if you have entered a URL for them. So if you’re on Facebook and Twitter, but not MySpace – simply leave the MySpace field blank and no button will appear for it.
RSS Feed Replacement URL – If you use a service like FeedBurner for your RSS feed, you can place the URL here. It will replace the feed URL used in the head tag for browser recognition and on the big feed button in the header.
Email Subscription URL – Similarly, you can link to the sign-up form for email subscriptions if you use them. Again, the corresponding button won’t be displayed if there is nothing in this field.
‹head› Include Code – Some ads require a chunk of code in the ‹head› as well. You can dump that and any other code that needs to be placed in the ‹head› in this field.
Footer Include Code – Most stat tracking code needs to be placed in the footer. Paste that code in this field.
———————————————————————————————————-
K) Support & Feature Requests
Please send me a direct message via ThemeForest if you need help. I will gladly help squash any bugs that might pop up and assist as best I can in resolving issues with the theme itself. I will continue to update Black Aperture if updates to the WordPress core render it incompatible over time.
I have also setup forums on my own domain for peer-to-peer support. Please use this space to ask for help troubleshooting issues, find out how to extend the theme, share your modifications, etc.
http://forums.mattbrett.com
However, I cannot facilitate feature requests, including customizing the theme at this point. I’ve included the PSD to ensure all original assets are at your disposal should you want to change things up. Knowledge of Photoshop, XHTML/CSS, and the WordPress template system are required if you want to do things like change the main colour scheme (blacks and greys), make the logo space bigger, add more featured posts, etc.
———————————————————————————————————-
Once again, thank you so much for purchasing this theme! As I said at the beginning, I’d be glad to help you if you have any questions relating to this theme. No guarantees, but I’ll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the “Item Discussion” section.
Matt Brett
http://mattbrett.com
http://twitter.com/mattbrett
