Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected]| www.cssluxury.com Black Eve theme documentation Introduction Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much! Black Eve was conceived to be used on a wide range of online business. It’s clean style and flexibility gives you the advantage to create a powerful and rapid online image. It has 6 widget areas that can be filed with 5 custom widgets (recent posts, testimonials, twitter, flickr, follow us). Following different business models it comes with 7 different page templates (services template, blog template pages 1,2,3 columns, portfolio template, contact template, one page template ), in this way you can customize the theme as you wish.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
Black Eve theme documentation
Introduction Thank you for purchasing my theme. If you have any questions that are beyond the scope of this
help file, please feel free to email via my user page contact form here. Thanks so much!
Black Eve was conceived to be used on a wide range of online business. It’s clean style and
flexibility gives you the advantage to create a powerful and rapid online image. It has 6
widget areas that can be filed with 5 custom widgets (recent posts, testimonials, twitter,
flickr, follow us). Following different business models it comes with 7 different page
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
Installation
For proper installation please follow the next steps. Also please check the Wordpress installation guide, which you find here Installing WordPress
1. First of all, your server should support PHP. You will also need an installation of Wordpress. If you already don’t have one, download it from here and follow instructions on the wordpress site to install it correctly.
2. If you have a running installation of wordpress, place the theme files from the download into the “themes” folder. The path to this folder should be something like /wordpress_install_dir/wp-content/themes/. Make sure that all theme files (without the PSDs and help files !) are in the separate folder called “eagle”. The path to the theme files should be /wordpress_install_dir/wp-content/themes/balckeve upon completition of this step.
3. Put 0777 permissions on “cache” folder, from the theme folder (it’s used for timthumb.php – a custom image-resize script)
4. Enter you Wordpress Admin Interface. It should be available at http://yourdomain.com/wp-admin.
5. In the left menu, find Appearance tab. Click it. A submenu should appear. Click Themes.
6. The themes screen should show all of your installed themes. Find Blackeve theme. 7. Click Activate.
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
10. 11. In the right side of the page under “Categories”, select “Portfolio”
12. Publish and preview
13. Your “Portfolio” page should look like this
14. 15. Click on the image, you should see your video.
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
16.
Create a post with thumb image for the Services category
1. Go to “Post>>Add new”
2. Give the post a title and content
3. Now we have to insert the post thumb image/icon (300x120px, NOTE: this field does NOT
makes use of image resize script, so upload your images/icons at the specified width)
4. Click on the Insert Image icon to upload a new image. (Follow the same steps as for the
portfolio thumb image)
5. Upload your image using WordPress' built-in image uploader. (Follow the same steps as for
the portfolio thumb image)
6. When your image has successfully been uploaded, click on File URL. A URL should appear in
the field above the button (Link URL field). Copy that value. (Follow the same steps as for
the portfolio thumb image)
7. Go back to the post editing screen. Under “Services-Small image URL” paste the URL that
you have copied into the value field.
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
8. 9. In the right side of the page under “Categories”, select “Services”
10. Publish and preview
11. Your “Services” page should look like this
12.
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
Create a post for the Main page slider (Featured posts) category
The theme makes use of custom fields to display posts thumb images. In this example I will show
you how to create a post for the “Featured posts” category.
1. Go to “v”
2. Give the post a title
3. Now we have to insert the post image (960x429px, if you upload image bigger than that
resolution, don’t worry the image resize script comes into action)
4. Click on the Insert Image icon to upload a new image.
5. Upload your image using WordPress' built-in image uploader.
6. When your image has successfully been uploaded, click on File URL. A URL should appear in
the field above the button (Link URL field). Copy that value.
7. Go back to the post editing screen. Under “Slideshow ⇒ Large image URL” paste the URL that
you have copied into the value field.
8. 9. Now, in the “Slideshow ⇒ Large image LINK” input, insert the link for the post (e.g.
www.google.com)
10. In the right side of the page under “Categories”, select “Featured posts”
11. Publish
12. Assuming that you didn’t choose what version of the slider will display on the main page,
you must follow this steps:
a. Go to Black Eve theme options >> Main page
b. From “Choose slideshow” select the slider that you like (for this example we choose
default1)
c. Then go to “Slideshow” tab and select the slideshow featured category.
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
d.
e. f. Save
13. Preview the main page
14. Your main page should look like this:
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
15.
Working with the main page
The main page is divided into 5 sections (logo and menu, featured posts, information box, posts and
footer).
Until now we configured the menu and the featured posts.
Now, let’s begin with the rest of the sections.
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
Logo
You have the possibility to upload your own custom logo or leave it as default wordpress name.
To upload your own logo you must follow these steps:
1. Go to “Black Eve theme options”
2. Click on “Enable custom logo image” checkbox
3. Insert the logo URL (use the same steps as for the post thumb image upload)
4. Insert the logo description - Logo image ALT tag (e.g. Black Eve logo)
5. Save and preview
6. If the logo doesn’t align properly you can insert additional css styling in the “Overwrite
logo image CSS:” input (e.g. margin-top:10px; margin-left:2px;)
Information box
You have the possibility to insert a custom message, title, image, hover image and attach a link to it.
1. Go to “Black Eve theme options”
1. Scroll down until you find “Information box”
a. The “Information box” is default set to display. If you don’t want it choose NO
from the “Display information box” select field.
2. In the “Box no.1 ”part we must insert our information as follows:
a. Enter box title
b. Enter box text
c. Enter box link to
d. Enter box thumb image (use the same steps as for the post thumb image upload)
e. Enter box hover image (use the same steps as for the post thumb image upload)
f. g. Save and preview
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
h.
3. Repeat the steps for the next ones. Of course, … if you need them.
Posts
You have the possibility to choose what post category must be displayed on the main page and the
number of post shown.
You can configure this from “Black Eve theme options” >> “Main page” >> Posts display
Footer
You have the possibility to insert copyright notice.
1. Go to “Black Eve theme options”
2. Scroll until you find “Footer Options”
3. In the “Footer text” textarea insert you’re copyright notice (e.g. Copyright 2010 – Black
Eve)
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
4. Hit Save and preview. Your main page should look like this
Working with menu dropdown The menu dropdown appears only if you have subpages or subcategories.
For example if our main page “Theme pages” has subpages, it will display them.
If you want the menu to NOT have a dropdown, go into “Black Eve theme options”, under
“Navigation”, check “Disable dropdown menu”
Black Eve Theme - WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: [email protected] | www.cssluxury.com
Working with the widgets This theme has 6 widget areas. One for each different page template.
1. Sidebar - for the default page template
2. Services sidebar – for the services template
3. Contact sidebar - for the contact template
4. Blog 2col sidebar - for the default blog template
5. Blog 3col sidebar left – for the 3 columns blog template (the left one)
6. Blog 3col sidebar right – for the 3 columns blog template (the right one)
The theme comes with 5 custom widgets:
1. Black Eve Recent Posts – Displays the recent posts with the possibility to exclude
categories
2. Black Eve Twitter widget– Displays your Twitter updates. Can display up to 10 updates.
3. Black Eve Testimonials Widget – Displays your testimonials, having the option to insert
client name and website.
4. Flickr – Displays your flickr images.
5. Black Eve Follow us – Displays your social links. This can be configured through
“Miscellaneous” tab, in the theme options
Troubleshoting
If your images don’t show up The theme uses Timthumb function for image resizing, which requires.
1. GD library, which is available on any host sever with PHP 4.3+ installed.
2. /cache/ folder permissions to 777.
Please verify the following if your still images don’t show:
1. Make sure the timthumb.php file has its permission set to 777
2. If you host your website on HostGator, you will need to ask them to change a few settings within mod_security for Apache. This is a documented issue with timthumb usage on Host Gator. Below is an email I sent to them making my own request:
Dear Host Gator,
I recently updated my WordPress website with a theme that uses the
Fonts used: MgOpen Modata free font http://www.zvr.gr/typo/mgopen/index
jquery-1.3.2.min.js http://jquery.com/ - cufon-yui.js http://cufon.shoqolate.com/generate/ used to include the font used in this
theme as text not as an image. DD_belatedPNG_0.0.8a-min.js - used to fix the transparent .PNGs on Internet Explorer 6.
Although this script does resolve most of the PNGs, the results are unexpected, so we don't recommand using it as a default style for this browser. The link: http://www.dillerdesign.com/experiment/DD_belatedPNG/
MgOpen_Modata_400-MgOpen_Modata_700.font.js - this is the font used for text replacement
menu.js http://www.leigeber.com/2008/11/drop-down-menu/ - The necessary javascript for the menu.
jquery.colorbox-min.js http://colorpowered.com/colorbox/ The script for the photo gallery jQuery.equalHeights.js
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/ The script for equal height boxes
jquery.jqtransform.js http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/ The script for the nice forms style
jquery.vgrid.0.1.2.min.jshttp://blog.xlune.com/2009/09/jqueryvgrid.html Used for Jquery media page (the nice effect on the images holder)
jquery.easing.min.js http://gsgd.co.uk/sandbox/jquery/easing/ Needed for the slideshow javascript (on the first page)
scripts.jshttp://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html Javascript slideshow script (on the first page)
jQuery.YMslider-min.jshttp://seb.maxymeum.free.fr/jQuery.YMslider/v105/ Javascript content slider (on the services page)
s3Slider.jshttp://www.serie3.info/s3slider/ Javascript slideshow script (on the first page - index2.html)
jquery-easing-compatibility.1.2.pack.jshttp://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/ Javascript needed for the slideshow script (on the first page - index3.html)
tooltip.jshttp://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery Javascript tooltip script (on the first page)
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.