You are on page 1of 18

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.

Black Eve Theme - WP Version
Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo.com | www.cssluxury.com

which you find here Installing WordPress 1.cssluxury. Note: This theme has included the jQuery script. You will also need an installation of Wordpress. It should be available at http://yourdomain. In the left menu. Make sure that all theme files (without the PSDs and help files !) are in the separate folder called “eagle”. from the theme folder (it’s used for timthumb. if you install plugins please be aware that a lot of them comes with their own version of jQuery. A submenu should appear. Click it. Click Activate. The path to this folder should be something like /wordpress_install_dir/wp-content/themes/. If you have a running installation of wordpress.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. place the theme files from the download into the “themes” folder.com/wp-admin. So. First of all.com | www. for example the slideshow. 6. Now your theme should look like this: Black Eve Theme . download it from here and follow instructions on the wordpress site to install it correctly.js) or from the plugin. The themes screen should show all of your installed themes. Put 0777 permissions on “cache” folder. What that means =>jQuery being loaded twice in the same theme. Find Blackeve theme. Enter you Wordpress Admin Interface. your server should support PHP. 2. will cause some parts of the javascript to fail. Click Themes. find Appearance tab. 7.php – a custom image-resize script) 4. Also please check the Wordpress installation guide. What can be done=>You can delete the jQuery script from the theme (/wordpress_install_dir/wpcontent/themes/blackeve/js/jquery. If you already don’t have one. 5. The path to the theme files should be /wordpress_install_dir/wpcontent/themes/balckeve upon completition of this step. 3.Installation For proper installation please follow the next steps.com .

Full width page 3. Portfolio d. 1. Blog Standard v. i. To achieve the live preview example create the following pages: i.com .Theme configuration Creating site structure Now your theme is installed and ready to go. Create the pages as you like. Standard page ii. In “Black Eve theme options” click on “Navigation” tab and link the pages to the menu.com | www. First we need to create the pages a. First we need to create the site/page structure. Page with images 4. Go to “Pages>>Add new” c. After you create the pages go to “Appearance>>Black Eve theme options” to link the pages to the menu and assign the templates.cssluxury. Blog 3 columns iv. Blog 1 column iii. ii. Save and preview. Go to “Pages” and delete the “About” page b. Add all the pages and arrange them as you want (drag the box with the page left or right to arrange them as you want).WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Elements page 2. Contact vi. Services vii. Theme pages 1. Black Eve Theme .

cssluxury. For example to assign the Portfolio page with the Portfolio template we have to do the following: 1. Now we have assigned the proper template.iii.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Select from “Select portfolio page” >> “Portfolio” – this is the page we created earlier. Black Eve Theme . After you assign the page to the menu the site will look like this: iv. Now we have to assign the pages with the predefined templates. Go to “Black Eve theme options >> Portfolio page” 2.com | www. For this we have to go on each page tab (from Black Eve theme options) and select what pages to show.com .

3. Create the category/categories for Blog pages. Portfolio and Services and Main page slider. Go to “Posts>>Add new” Black Eve Theme . : For Portfolio -> Portfolio. etc…) 3. Go to “Posts” b. Go to “Posts >> Categories” b. so let’s create some posts a.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Your portfolio page must look like this now: 4. Delete the “Hello world” post c.com | www. for Main page slider -> Featured posts. (e.cssluxury. Click Save and preview. Portfolio and Services) and for the main page slider a.g.com . In order to display the categories we need to have posts in them. 2. Make the same operation for the rest of the pages. Now we have to create the categories for the pages that uses posts (Blog pages.

cssluxury.com | www. First go to “Posts >> Categories” b. Black Eve Theme . Hover on “Blog 1 column” category and remember the category id.d. 4.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Give it a name. (and the main page slider) a. Delete the “Uncategorized” category c. The id is “5” in this example. Now we have to assign the categories for the pages we want them to display. Do the same operation until you have at least one post in each category. See the screenshot. insert some content and select the proper category from the right side: e.com .

In the next sections of the tutorial I will show you how to configure the site to achieve the live preview structure. do the same operation for the Services. Black Eve Theme . Save and preview. in “Blog 1 col” and insert the category id in the “Insert categories ID to display:” field e. Your blog 1 column page must look like this f.com | www. Now. Now. other blog pages. so you don’t have to remember anything. if we can call it that.cssluxury. At this point we have created the site structure. Portfolio page.d. For the main page slider you can select the category from a dropdown in the “Slideshow” tab.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Working with posts Create a post for the Blog 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 “Blog Standard” category.com . go to “Black Eve theme options”. That was the “difficult” part.

Now we have to insert the post thumb image. Black Eve Theme .cssluxury.com | www. Upload your image using WordPress' built-in image uploader.com . 5. A URL should appear in the field above the button (Link URL field). 3. 6. click on File URL. When your image has successfully been uploaded. Go to “Post>>Add new” Give the post a title and content. 4.1. 2. Copy that value.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Click on the Insert Image icon to upload a new image.

com . 8. Go back to the post editing screen. Under “Post thumb ⇒ Image URL” paste the URL that you have copied into the value field. Give the post a title Black Eve Theme . In the right side of the page under “Categories”.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Publish and preview 10. Go to “Post>>Add new” 2. Your “Blog standard” page should look like this Create a post for the Portfolio category The theme makes use of custom fields to display posts thumb images.com | www. select “Blog Standard” 9. In this example I will show you how to create a post for the “Portfolio” category.cssluxury.7. 1.

com | www. Do the same steps. Under “Portfolio-Thumb image URL” paste the URL that you have copied into the value field. 7.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo.com . Upload your image using WordPress' built-in image uploader. Copy that value. Click on the Insert Image icon to upload a new image. select “Portfolio” 10. if you upload image bigger than that resolution. 5. A URL should appear in the field above the button (Link URL field). click on File URL. don’t worry the image resize script comes into action) 4.cssluxury. Publish and preview Black Eve Theme .3. Now we have to insert the post thumb small image (300x200px. When your image has successfully been uploaded. In the right side of the page under “Categories”. Go back to the post editing screen. 8. 6. and paste the URL of the large image in “Portfolio-Large image URL” 9. Now we have to paste the url for the “Large image”.

Copy that value.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Your portfolio page should look like this: Create a post for the Main page slider (Featured posts) category The theme makes use of custom fields to display posts thumb images. Now we have to insert the post image (960x429px.11. click on File URL. don’t worry the image resize script comes into action) 4. 6. Upload your image using WordPress' built-in image uploader. Click on the Insert Image icon to upload a new image. if you upload image bigger than that resolution. When your image has successfully been uploaded. Black Eve Theme .com . In this example I will show you how to create a post for the “Featured posts” category. Go to “Post>>Add new” 2. A URL should appear in the field above the button (Link URL field). Give the post a title 3.cssluxury. 5. 1.com | www.

Assuming that you didn’t choose what version of the slider will display on the main page. you must follow this steps: a.com . in the “Slideshow ⇒ Large image LINK” input. 8.cssluxury. www.com) 9. d. Publish 11. Now.com | www. Save 12.7. In the right side of the page under “Categories”.g. From “Choose slideshow” select the slider that you like (for this example we choose default1) c.google. Under “Slideshow ⇒ Large image URL” paste the URL that you have copied into the value field. Preview the main page Black Eve Theme . Go back to the post editing screen. Go to Black Eve theme options >> Main page b. select “Featured posts” 10. insert the link for the post (e. Then go to “Slideshow” tab and select the slideshow featured category.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo.

information box.com . posts and footer). Black Eve Theme . Until now we configured the menu and the featured posts. featured posts. let’s begin with the rest of the sections.cssluxury. Your main page should look like this: Working with the main page The main page is divided into 5 sections (logo and menu. Now.com | www.13.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo.

To upload your own logo you must follow these steps: 1. g. Go to “Black Eve theme options” Click on “Enable custom logo image” checkbox Insert the logo URL (use the same steps as for the post thumb image upload) Insert the logo description . margin-left:2px. hover image and attach a link to it. If you don’t want it choose NO from the “Display information box” select field. image. 2. 1. Enter box title b. margin-top:10px. Enter box hover image (use the same steps as for the post thumb image upload) f.g. title. Enter box thumb image (use the same steps as for the post thumb image upload) e. 4. 3. Save and preview Black Eve Theme .g. Enter box link to d. The “Information box” is default set to display.1 ”part we must insert our information as follows: a. 5.Logo image ALT tag (e. Scroll down until you find “Information box” a.) Information box You have the possibility to insert a custom message. Go to “Black Eve theme options” 1.com | www.Logo You have the possibility to upload your own custom logo or leave it as default wordpress name.com .WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Black Eve logo) Save and preview If the logo doesn’t align properly you can insert additional css styling in the “Override logo image CSS:” input (e. 6. In the “Box no. Enter box text c. 2.cssluxury.

3.com .com | www. Posts You have the possibility to choose what post category must be displayed on the main page and the number of post shown. Go to “Black Eve theme options” 2. … if you need them. In the “Footer text” textarea insert you’re copyright notice (e. 1.cssluxury.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Scroll until you find “Footer Options” 3. You can configure this from “Black Eve theme options” >> “Main page” >> Posts display Footer You have the possibility to insert copyright notice. Copyright 2010 – Black Eve) Black Eve Theme .h. Of course. Repeat the steps for the next ones.g.

If you want the menu to NOT have a dropdown. under “Navigation”.cssluxury. go into “Black Eve theme options”. it will display them. For example if our main page “Theme pages” has subpages.com .com | www.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Hit Save and preview.4. check “Disable dropdown menu” Black Eve Theme . Your main page should look like this Working with menu dropdown The menu dropdown appears only if you have subpages or subcategories.

Black Eve Follow us – Displays your social links.js http://cufon.for the default blog template Blog 3col sidebar left – for the 3 columns blog template (the left one) Blog 3col sidebar right – for the 3 columns blog template (the right one) The theme comes with 5 custom widgets: 1. 5. One for each different page template.htm Fonts used: Arial free system font Fonts used: MgOpen Modata free font http://www. in the theme options Sources and Credits I have to thank the following people:          Donncha O Caoimh for the Flickr Widget which we modified and merged with the theme. Black Eve Theme .com/generate/ used to include the font used in this theme as text not as an image. 1. 3.js http://jquery. Flickr – Displays your flickr images.shoqolate.com/blog/2008/12/social-mediamini-iconpack/ The services icons are from http://www.gr/typo/mgopen/index jquery-1.komodomedia.com/ cufon-yui. Sidebar . Black Eve Twitter widget– Displays your Twitter updates. Black Eve Testimonials Widget – Displays your testimonials.3. Dinu Florin for Pt which we trimmed down a little and used for some features. All the images used are my personal creations The social icons are from http://www. Can display up to 10 updates. 4.cssluxury.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo. Black Eve Recent Posts – Displays the recent posts with the possibility to exclude categories 2.com . 2. having the option to insert client name and website.com/icon/i143s0/ivista_icon_pack_2. 6.Working with the widgets This theme has 6 widget areas.for the default page template Services sidebar – for the services template Contact sidebar . This can be configured through “Miscellaneous” tab.2. 5. 4.min.vistaicons. 3.zvr.for the contact template Blog 2col sidebar .com | www.

thank you so much for purchasing this theme.jshttp://www.dillerdesign.html Javascript slideshow script (on the first page) jQuery.js http://www.serie3.html Used for Jquery media page (the nice effect on the images holder) jquery.min.fr/jQuery. The link: http://www.filamentgroup.jqtransform.jshttp://cssglobe.PNGs on Internet Explorer 6.com/2009/09/jqueryvgrid. No guarantees.0.min. so we don't recommand using it as a default style for this browser.xlune.com/experiment/DD_belatedPNG/ MgOpen_Modata_400-MgOpen_Modata_700.2.com/creating-a-slick-auto-playingfeatured-content-slider/ Javascript needed for the slideshow script (on the first page index3. As I said at the beginning.leigeber.pack.com/colorbox/ The script for the photo gallery jQuery.com .com/metiers/multimedia/opensource/jqtransform/ The script for the nice forms style jquery.              DD_belatedPNG_0.uk/sandbox/jquery/easing/ Needed for the slideshow javascript (on the first page) scripts. but I'll do my best to assist.com/2008/11/drop-down-menu/ .easing.js .js http://gsgd. Black Eve Theme . Although this script does resolve most of the PNGs.com | www.YMslider-min. you might consider visiting the forums and asking your question in the "Item Discussion" section.jshttp://blog.used to fix the transparent .0.vgrid.com/post/1695/easiest-tooltip-and-image-preview-using-jquery Javascript tooltip script (on the first page) Once again.free.dreamcss.WP Version Created: 18/03/2010 | By: Cristian Gogoneata | Email: gogoneata_cristian@yahoo.The necessary javascript for the menu.equalHeights.cssluxury.js .js http://colorpowered.8a-min.font.1.maxymeum.info/s3slider/ Javascript slideshow script (on the first page index2.jshttp://css-tricks.1.colorbox-min.com/2009/04/create-beautiful-jquery-sliders. jquery.jshttp://www.com/lab/setting_equal_heights_with_jquery/ The script for equal height boxes jquery.YMslider/v105/ Javascript content slider (on the services page) s3Slider.html) jquery-easing-compatibility.dfce.this is the font used for text replacement menu. I'd be glad to help you if you have any questions relating to this theme. the results are unexpected.js http://www.2.html) tooltip. If you have a more general question relating to the themes on ThemeForest.js http://www.jshttp://seb.co.