SpaceShip - Photography Portfolio WordPress Theme
Documentation
- created: 08/03/2012
- latest update: 05/19/2014
- by: Apollo13
- email: info@apollo13.eu
Thank you for purchasing our theme. In case of any questions or doubts, do not hesitate to contact us via our Support Forum: http://support.apollo13.eu/. We will do our best to solve any problem concerning the project. At the same time we invite you to visit often our profile on ThemeForest since there will be appearing the improvements of our project and the newest actualizations.
You have probably seen our demo page and this is why you baught this theme. To see most of this things in your page you will have to provide proper content for it, and here we will guide you how to achieve this.
My front page is empty or gives error message.
If you see empty front page after theme installation or message "Apologies, but no results were found for the requested archive. " it means you have to add some content or change front page to display something else.
You will have to add some posts/page or add some albums and albums page. Next follow this section.
I would like to see front page same as on your demo. How to do it?
Our front page is Albums list page. Firstly you need to add some albums and albums page. Next select Albums list in this section.
Check this section.
How to make album to show in background of post/page ?
First you have to have some album. Next you will have to set it as background in posts/page options. Check this section.
What are best practices while adding photos to album?
Especially for you we prepared Album appearance section.
I would like to modificate theme, how can I do it?
If you like to edit some CSS and JS, or maybe some theme behaviour you should check compression options and theme modification section.
Since version 1.5 we have changed back end media selector to one intrduced in Wordpress 3.5. You can now use it for works, galleries or for adding logo.
Twitter widget
Also cause of change in API and policy of twitter we had to remove Twitter widget from our theme as it was no longer usable. Instead we recommend to use http://bluedogwebservices.com/wordpress-plugin/twitter-widget-pro/
To use you will have to provide twitter account info as explained in plugin instructions.
Install
To install theme you can:
-
Upload it via FTP(safer)
-
Download ZIP file from ThemeForest and find in it spaceship.zip(theme file)
-
Unpack files from spaceship.zip. You should now have directory spaceship and in it othere directories and files like 404.php, home.php, index.php etc.
-
upload whole spaceship folder to /wp-content/themes/ in your wordpress installation
-
login to admin panel in Wordpress, and go to Appearance->Themes and click Activate below spaceship theme
-
Upload it via admin panel(can get error while upload)
-
Download ZIP file from ThemeForest and find in it spaceship.zip(theme file)
-
go to Appearance->Themes->Install Themes(Tab)->Upload and choose file spaceship.zip
-
go to Appearance->Themes and click "Activate" below spaceship theme
After that You will see new menu named Spaceship Theme and that is where all fun begins :-) Also you will see My albums. We will write about it later.
After installation
Set permalinks
It is good practice to set permalinks for your blog. Go to Settings->Permalinks and set anything other then default seetings.
Add menu
Next you should choose menu to use in theme. It is very simple. Go to Appearance->Menus, create some menu(even with one position) and select available menu in Theme locations-> Site Navigation. Read more about creating wordpress menu.
If you want to add Single Album to menu you have to digg in wordpress hidden options;-). Just look at image below
Next you should scan through Theme options to set everything you need.
Update theme
As this theme is commercial one, for now we don't provide auto update option for theme, as this will lead to easily stealing our work. In future this may change, but for now updates are only available on ThemeForest in place where you have downloaded your first version of theme:-) Although WordPress will inform you about new version of theme, but you still will have to go to ThemeForest site.
When you got zip file with theme, best way to update theme is to use plugin such as http://wordpress.org/extend/plugins/easy-theme-and-plugin-upgrades/. You can also manually delete theme and upload new version. If you have made some changes in theme files you will have to manually update to keep your changes.
Remember to always backup your data before update!(or cry if you didn't and something went totally wrong)
Use of Easy Theme and Plugin Upgrades
Upgrading a Theme(copied form plugin page)
-
Download the latest zip file for your theme.
-
Log into your WordPress site.
-
Go to Appearance > Themes.
-
Click the "Install Themes" tab.
-
Click the Upload link below the main page tabs.
-
Select the zip file with the new theme version to install.
-
Select "Yes" from the "Upgrade existing theme?" option.
-
Click "Install Now".
After update you will loose file user.css which holds some settings from admin panel. Don't panic :-) Just go to admin panel to menu named Spaceship Theme, change first option you see, even if only by a pixel ;-) click Save changes and it will recreate this file. Now you can revert your changes.
Demo data
If you really need to see your new site as our demo page, then this is section for you. This is why we provide sample data, if you like to see how it is all made from backend in admin page. If you are confused about options in theme, we advice to use it only to see how things are made in Spaceship. After that, you should clean your Wordpress so you don't have any unwanted content ;-)
How to install sample data:
- Locate the sample_data.xml file in data folder in file downloaded form ThemeForest
- Open Tools->Import menu and choose WordPress option(Installation may be needed first).
- Upload sample_data.xml file.
- On next page you should check Download and import file attachments
But it would be simple if this will end here :-) Import will probably fail(cause of timeout while downloading images), so you will have repeat above steps few times, till you get success message. After this fallow next steps:
- Go to Settings->Reading->A static page
- As Front page use Albums, as Posts page use Blog and save
- Go to Spaceship theme->Main settings->What to show on front page? set to Albums list
- Go to Appearance->Menus->Theme locations-> Site Navigation select available menu(adding menu).
- You may need to clean menu listed on the right couse it may have 'doubles' due to many import atempts.
- Widgets will be totaly no good, so go to Appearance->Widgets and make some cleaning and inserting.
- Last thing we have to create user.css file from default settings. To do that, we have to edit any setting of Spaceship theme. Go to Spaceship theme->Albums->Select start album and select "Album Three (Fullscreen)". But for real, you can change any option of theme to recreate user.css file.
- Theme should look good enough now.
If you wish to use theme default value for each option(it may sometimes be different frome theme initial value) just delete whole text in input from this option.
What to show on front page?
Here you set what you wish to see on frontpage. You can choose from:
- page - static page added in Pages menu,
- post list(blog) - it is default wordpress front page,
- albums list - list of all albums you have displayed as full width slider,
- single album - one album, showing full scrren photos
To set it proper just stick to option description. One thing about setting this proper is to(if you want anything other then blog for front page):
- Go to Settings->Reading->A static page
- as Front page set some empty page you created in Pages menu, for example you can name it "Frontpage"
- as Posts page use another empty page named for exapmle "Blog".
Select start album
If as front page you choose Selected album then here you can select this album.
Blog
Setting manual or automatic excerpts for posts. You can read more here.
Layout
Global setting for layout alignment for posts and pages.
Copyright text & Signature text
Texts that will appear in footer. Copyright text will be on the left and Signature text on the right. You can use html in both fields(good to link something).
Contact form settings
Give e-mail address for contact page form or left empty to use admin e-mail.
Google Analytics
Code for statistics from google
In theme we use shortcodes editor. You can see it below:
Use it to insert predefined elements for your content. To see available shortcodes in theme check http://themes.apollo13.eu/spaceship/shortcodes/ and select shortcode category from submenu.
To make frontpage and Blog work as it should you have to follow this steps:
- Go to your wordpress Pages->Add new
- Add new page named Frontpage and another named Blog. You can leave them empty.
- Go to Settings->Reading->Front page displays
- Choose "A static page (select below)"
- In Front page: choose Frontpage
- In Posts page: choose Blog
- Save changes.
- You are done :-)
Next go to Main settings menu
Pages has almost same options so this description will fit them too
If you are not familiar with adding posts in wordpress please read http://codex.wordpress.org/Writing_Posts
Adding posts is same as always in wordpress, but with few tweaks. Firstly you can use shortcodes editor. Secondly you use Featured image or Video to represent post.
Next thing that you can set is use of one of three layouts : pushed to left, centered, pushed to right.
Also you can choose to use full width content by turning off Widget area.
Last thing is setting backgorund image or background album. To do it select in Background option Image or Album and next select desired image or album to display.
Posts list / blog
If while writing posts you won't use more tag then theme will use excerpt feature. Excerpt are made automatically, but you can also specify what will be displayed. Just find Excerpt box, and type text you wish Read more.
If you won't give excerpt either, then post will be cut after first 30 words.
Before you start anything below, it is good to visit Albums menu
Adding Albums list
To add Albums list to your blog first you need to create Albums list page:
- Add new page(Pages->Add new)
- Name it as you wish but keep in mind that if you use nice addresses (eg. yourblog.com/about-me ) than slug of your page have to be different then slug for portfolio setted in Albums menu, so everything will work correct. Best name this page as "Albums Page".
- From template list choose Albums.
- Publish Page.
- Done
Add new album
Adding new album is pretty easy. First you should set title and Featured image as it is cover of your album which is visible on Albums list page.
Important thing here is to keep cover of album in rational dimensions, as image for album cover is loaded in full version(same image as uploaded) and uploading here 10MB file could kill user transfer when viewing Albums list page. And what would happen if you would have 20 albums... :-)
Next you have to set some settings. Lets check image below.
- Use only as background? - if you select this one, album won't be displayed on Albums list, but will be selectable for background album.
- Fit images - you can use auto(Fit always) or decide in which way images should be streched to fill screen.
- Transition type - 7 types of animation beetwen slides.
- Enable thumbnails list - it shows list of all slides in album.
- Pattern above photos - it will place semi transparent pattern above all photos. You can select from few different patterns. You can also set Pattern opacity.
- Show album name in each photo - will show name on album above each photo.
- Autoplay background music - If you added background music here you can choose to autoplay it. Be careful if you also add auto playing videos to album.
Next it is time to add some photos & videos to our gallery. Lets check screen below.
- If your browser supports multi upload then you can use it to upload many images at once.
- You can add title and description for each photo. If you set any of them or choose to display name of album, then they will be displayed above photo.
- Color under photo - you may use set globally for whole album, or overwrite it here.
- Title description font color and background color also can overwrite album global setting for these options.
- If you choose video type, you have to add link to video(youtube link, vimeo link, or link to mp4, ogv, flash file)
- also you may add thumb for video, it will be used in album thumbs list. If you won't provide any then:
- Viemo and Native video will use placeholder
- Youtube will use defult youtube thumbnail
- You can also choose to autoplay video.
As for cover of album, also here images are loaded in full size(same as uploaded).
Spaceship can display pictures (in albums) in three different ways: 1) Always Fit 2) Fit portrait 3) Fit landscape.
To achieve the best results and enjoy every option to the full, under description of the options we added informations about minimum resolution of the image that will be optimal for all types of screens (from smartphones to Full HD).
1) Fit always – regardless of pictures' height or width, it will always fit them in the height of the browser window so as the entire image is visible.
Live example: http://themes.apollo13.eu/spaceship/album/album-four-vertical-fit/
2) Fit portrait – automatically adjusts the display mode to the image size. If an image is higher than wider (portrait), it matches an image up to the window (like “Fit always” option). If an image is wider than higher (landscape), it extends it to the width of the browser window (like “Fit landscape” option).
Live example: http://themes.apollo13.eu/spaceship/album/album-two-fit/
3) Fit landscape – regardless of pictures' height or width, images always fit in the width of the browser window. While the image is stretched to the entire width of the window, you need to take into account that it will be a little cropped (top and bottom) depending on resolution (screen) we are using while watching the images.
Note! The best and optimal results can be obtained by adding wide pictures ( landscape )
Live example: http://themes.apollo13.eu/spaceship/album/album-three-fullscreen/
Optimal image resolution:
- Portrait – 750px (width) x 750px (height)
- Landscape – 1100 (width) x 750px (height)
Important! The optimal image resolution is given to achieve the best results, while maintaining the smallest file size and speed of page loading. There are no restrictions on adding photos in higher resolution. Nevertheless, the addition of a large photograph can affect the loading speed of the photos in an album and the whole page.
Remember also to compress images to get the smallest file size in order to maintain optimal quality. We managed to get the file size of approx. 80KB for portraits and 130KB for landscapes. It's worth a try!
Background colors for your photos in albums
To get even better results, you can set a different background color for each picture.
Live example: http://themes.apollo13.eu/spaceship/album/album-five-titles/
To add contact page simply create new page and from templates choose Contact. In this template, contact form will be displayed under page text(content typed in editor). Contact page has also its own widget area.
Theme is prepared for translation, so it will just require some time for you to see our theme in your language. Important files you will find in theme directory in spaceship/languages/default.po
This file should be opened in program like Poedit and translated. After everything is done you have to save your translation with proper name. Names for each country can be found here (in parenthesis in titles). So for example for German - Deutsch you should save files as de_DE and get 2 files: de_DE.po and de_DE.mo.
Copy these files to spaceship/languages
At end you have to go to your Admin Panel, Settings-> General-> Site Language and set your language.
After that if everything went fine, you will see theme in your language:-)
In every update, file default.po may change as we may add some new functions or fix some spelling, but you can use your old translation to get most of work done.
Good article about translating theme can be found in http://www.solostream.com/blog/tutorials/translate-wordpress-theme/
Also good to read is http://codex.wordpress.org/Translating_WordPress
Here we post image where to type translated texts in Poedit, as not everyone get it right away.
Many of you may be tempted to edit theme files, but by doing so you block yourself from geting updates of theme, as you will loose your changes when you update theme. Fortunately there is solution - making child theme. Even wordpress team advice this as best solution:-)
Anyone intrested in this should read http://codex.wordpress.org/Child_Themes
But lets check how to do it with spaceship theme.
Since Spaceship 1.1.2 there is attached sampel child theme, so you can start changing theme even faster. To install it follow this steps:
- Install normal spaceship theme.
- Repeat step 1 but now install theme from spaceship-child-theme.zip
- Activate child theme.
- Done.
Now you can overwrite styles, theme functions and even whole templates. Lets check some examples.
If you want to change background color of content area(default white) under blog, post or page you just have to edit style.css in child theme and add:
#content{
background-color: #000;
}
Now you have black background under text :-)
In spaceship default stylesheet is loaded from main theme, and then you can overwrite CSS rules in style.css in child theme. After this come user.css with changes set in admin panel. So finally it loads in this order:
1. main theme style.css or compressed.css
2. child theme style.css
3. user.css
Another example, you may wish to change info that is displayed under title of each post(date, author, categories, tags) so you have to define your own version of a13_post_info() function. Lets say you wish to remove tags from that list. Just open functions.php in child theme and drop this code:
function a13_post_info() {
?>
<div class="post-info">
<?php echo a13_posted_on(); ?> <span class="author"><?php printf( __fe( 'by %1$s' ), get_the_author_link() ); ?></span>
<span class="categories"><?php _fe('Category' ); ?>: <?php a13_posted_in( ', ' ); ?></span>
<?php echo ' <a class="comments" href="' . get_comments_link() . '" title="' . get_comments_number() . ' ' . __fe( 'comment(s)' ) . '"><em>' . get_comments_number() . '</em></a>'; ?>
<?php edit_post_link( __fe( 'Edit' ) ); ?>
</div>
<?php
}
You have now overwritten main theme function, and your version will be loaded.
Most interesting functions you will find in advance/utilities.php(in main theme) , but there is more functions that you can change in child theme. All functions that can be overwritten has before its definition code: if(!function_exists('function_name'))
. If you wish to change other functions ask on our forum for support in that case or just don't bother with child theme and change main theme ;-).
In case of any questions or doubts, do not hesitate to contact us via our Support Forum http://support.apollo13.eu/
Instruction how to get Purchase Code:
- Responsive Design
- WordPress 3.4+ Support
- Highly Optimized (Profiled JS, Compressed JS & CSS, Sprite Images)
- Valid HTML 5
- Switch Glass Effect (Bulb Icon)
- 4 variants of the Home Page (Album List, Single Album, Blog, Page)
- Drop-Down with Widgets
- Albums Features:
- Fullscreen Image Slideshows
- Auto Fit and Vertical Fit Image Slideshows
- Pattern
- Thumbs / Arrows Navigation
- Any Color Background (for each Image)
- MultiUpload
- Advanced Appearance Options
- Easy to use Admin Panel
- Custom Background Image and Photo Album for each Page and Post
- You can upload your own Google Font
- 13+ Custom Widgets:
- Simple Text
- Recent Posts, Popular Posts
- Recent Albums
- Recent Comments
- Custom Menu, Archives, Categories, Meta, RSS
- Google Map
- Tag Cloud
- Search
- Calendar
- no Timthumb ;)
- Shortcodes
- Translation Ready
- Forms Validation
- Dropdown Menu
- Social Icons
- Google Analytics Ready
- Cross-Browser Compatibility
- Customizable PSD Files Included
- Extensive Documentation built into the Theme Panel
- Forum Customer Support
Template image sizes
560 x auto - page, post featured image
77 x 77 - thumbs in sidebar of posts
66 x 66 - thumbs in sidebar of posts
150x100(can be chaged) - thumbs of album
Video support
Theme support Youtube and Vimeo videos, and also HTML 5 types.
You can insert them by shortcodes or as main post video.
For youtube best to use links as : http://www.youtube.com/watch?v=JByDbPn6A1o
For vimeo best to use links as: http://vimeo.com/12280336
Any other link will be treated as HTML 5 video. Browsers that understand the HTML5 tag will display MPEG/H.264 (.mp4) files, VP8/webm (.webm), or Ogg/Theora (.ogv) files. Other browsers can use Flash to play the .mp4 or .flv.
Changing favcion
To change favicon you have to upload your icon to wp-content/themes/spaceship/images as icon.png.
If you want to use other name for favicon change this line in header.php in theme.
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/icon.png" />
The scripts and plugins used is the project:
- jQuery (http://jquery.com)
- VideoJS (http://videojs.com/)
- hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html)
- ScrollTo (http://flesler.blogspot.com)
- Supersized (http://www.buildinternet.com/project/supersized)
- jQuery autoResize (http://james.padolsey.com)
- Placeholder plugin for jQuery Daniel Stocks (http://webcloud.se)
- jQuery mouseWheel Brandon Aaron (http://brandonaaron.net)
- Lightbox v2.51 by Lokesh Dhakar (http://www.lokeshdhakar.com)
- Automatic Updates For Private And Commercial Themes (http://w-shadow.com/blog/2011/06/02/automatic-updates-for-commercial-themes/)
- Simple Google Map(http://clarknikdelpowell.com/wordpress/simple-google-map/)
and lots of internet wisdom out there. Thanks a lot everybody!
Once again, thank you so much for purchasing this theme. As we said at the beginning, we'd be glad to help you if you have any questions relating to this theme. No guarantees, but we'll do our best to assist.
Apollo13 Team
Social menu
Here you provide links to social profiles you have. Nothing new :-) Only thing that should be explained it is setting number of visible icons. If you set it for example to 3 and you provided 5 links to social networks, than first 3 will be displayed instantly, and other two will be available while hovering this section :-) Simple.
You can drag & drop social items to set them in order you wish to see on your page.
Only filled inputs will activate each social icon. Not filled = not shown :-)