Black Eve Theme Wp Documentation

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.

http://themeforest.net/user/disgogo


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.

Note: This theme has included the jQuery script. So, if you install plugins please be aware that a lot of them comes with their own version of jQuery. What that means =>jQuery being loaded twice in the same theme, will cause some parts of the javascript to fail, for example the slideshow.

What can be done=>You can delete the jQuery script from the theme (/wordpress_install_dir/wp-content/themes/blackeve/js/jquery.js) or from the plugin.

Now your theme should look like this:

http://codex.wordpress.org/Installing_WordPress

http://wordpress.org/download/


Theme configuration

Creating site structure

Now your theme is installed and ready to go. First we need to create the site/page structure.

1. First we need to create the pages

a. Go to “Pages” and delete the “About” page

b. Go to “Pages>>Add new”

c. Create the pages as you like. To achieve the live preview example create the

following pages:

i. Theme pages

1. Elements page

2. Full width page

3. Page with images

4. Standard page

ii. Blog 1 column

iii. Blog 3 columns

iv. Blog Standard

v. Contact

vi. Services

vii. Portfolio

d. After you create the pages go to “Appearance>>Black Eve theme options” to link

the pages to the menu and assign the templates.

i. In “Black Eve theme options” click on “Navigation” tab and link the pages to

the menu.

ii. 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). Save and preview.


iii. 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. For this we

have to go on each page tab (from Black Eve theme options) and select

what pages to show. For example to assign the Portfolio page with the

Portfolio template we have to do the following:

1. Go to “Black Eve theme options >> Portfolio page”

2. Select from “Select portfolio page” >> “Portfolio” – this is the page we

created earlier. Now we have assigned the proper template.


3. Click Save and preview. Your portfolio page must look like this now:

4. Make the same operation for the rest of the pages.

2. Now we have to create the categories for the pages that uses posts (Blog pages, Portfolio

and Services) and for the main page slider

a. Go to “Posts >> Categories”

b. Create the category/categories for Blog pages, Portfolio and Services and Main

page slider. (e.g. : For Portfolio -> Portfolio, for Main page slider -> Featured posts,

etc…)

3. In order to display the categories we need to have posts in them, so let’s create some posts

a. Go to “Posts”

b. Delete the “Hello world” post

c. Go to “Posts>>Add new”


d. Give it a name, insert some content and select the proper category from the right

side:

e. Do the same operation until you have at least one post in each category.

4. Now we have to assign the categories for the pages we want them to display. (and the main

page slider)

a. First go to “Posts >> Categories”

b. Delete the “Uncategorized” category

c. Hover on “Blog 1 column” category and remember the category id. See the

screenshot. The id is “5” in this example.


d. Now, go to “Black Eve theme options”, in “Blog 1 col” and insert the category id in

the “Insert categories ID to display:” field

e. Save and preview. Your blog 1 column page must look like this

f. Now, do the same operation for the Services, other blog pages, Portfolio page. For

the main page slider you can select the category from a dropdown in the

“Slideshow” tab, so you don’t have to remember anything.

At this point we have created the site structure. That was the “difficult” part, if we can call it that. In

the next sections of the tutorial I will show you how to configure the site to achieve the live preview

structure.

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.


1. Go to “Post>>Add new”

2. Give the post a title and content.

3. Now we have to insert the post thumb image.

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 “Post thumb ⇒ Image URL” paste the URL that you

have copied into the value field.

8. In the right side of the page under “Categories”, select “Blog Standard”

9. Publish and preview

10. Your “Blog standard” page should look like this

Create a post for the Portfolio category


you how to create a post for the “Portfolio” category.


2. Give the post a title


3. Now we have to insert the post thumb small image (300x200px, if you upload image bigger

than that resolution, don’t worry the image resize script comes into action)





7. Go back to the post editing screen. Under “Portfolio-Thumb image URL” paste the URL

that you have copied into the value field.

8. Now we have to paste the url for the “Large image”. Do the same steps, and paste the

URL of the large image in “Portfolio-Large image URL”

9. In the right side of the page under “Categories”, select “Portfolio”

10. Publish and preview


11. Your portfolio page should look like this:

Create a post for the Main page slider (Featured posts) category


you how to create a post for the “Featured posts” category.


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)






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. Now, in the “Slideshow ⇒ Large image LINK” input, insert the link for the post (e.g.

www.google.com)

9. In the right side of the page under “Categories”, select “Featured posts”

10. Publish

11. 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.

d. Save

12. Preview the main page


13. Your main page should look like this:

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.


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 “Override

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. 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


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.


2. Scroll until you find “Footer Options”

3. In the “Footer text” textarea insert you’re copyright notice (e.g. Copyright 2010 – Black

Eve)


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”


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

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.

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.komodomedia.com/blog/2008/12/social-media-

mini-iconpack/

The services icons are from

http://www.vistaicons.com/icon/i143s0/ivista_icon_pack_2.htm

Fonts used: Arial free system font

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.

http://inphotos.org/

http://donncha.wordpress.com/flickr-widget/

http://florindinu.ro/

http://code.google.com/p/pt-toolkit/

http://www.komodomedia.com/blog/2008/12/social-media-mini-iconpack/

http://www.komodomedia.com/blog/2008/12/social-media-mini-iconpack/

http://www.vistaicons.com/icon/i143s0/ivista_icon_pack_2.htm

http://www.zvr.gr/typo/mgopen/index

http://jquery.com/

http://cufon.shoqolate.com/generate/


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.

http://www.dillerdesign.com/experiment/DD_belatedPNG/

http://www.leigeber.com/2008/11/drop-down-menu/

http://colorpowered.com/colorbox/

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

http://blog.xlune.com/2009/09/jqueryvgrid.html

http://gsgd.co.uk/sandbox/jquery/easing/

http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

http://seb.maxymeum.free.fr/jQuery.YMslider/v105/

http://www.serie3.info/s3slider/

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/

http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Black Eve Theme Wp Documentation

Documents

Transcript of Black Eve Theme Wp Documentation