Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Thank you for purchasing Fashionic.If you have any questions that are beyond the of this documentation, please feel
free to email via my user page contact form here.
Fashionic WordPress Theme Documentation
By uiueux studio www.uiueux.com [email protected]
Last edited: 2013-1-23
Content
1. Frequently Asked Questions
2. Installation3. Adding Content
4. Pages and Menus
5. Shortcode6. Theme Options
7. Javascripts8. Sources and Credits
9. Appendix
Fashionic WordPress Theme - Documentation
Page 2
1. Frequently Asked Questions
1.1 Create a homepage (for beginner)
1) to create a page for the homepage content – then
2) go to Settings>Reading: Front page displays and
3) select a page which display as the homepage to be your Front page4) Save Changes
1.2 Set the width for the post block in a List Page
Editing the page, make sure the Template is List page: Go to Page Options>Block Width, input a number (px) you want
1.3 How are the thumbnails generated
When upload images, 5 size thumbnails would be generated to meet the Portfolio List page presentation.
in Page Options, there is a option named “Gallery Post Thumbnail Scale” provide 4 scale for the Portfolio(Gallery) List:
1:1 - 150 x 150(when Block Width less than 200PX) & 400 x 4002:3 - 268 x 4003:2 - 400 x 268Original - 400 x Unlimited Height
1.4 How to crop a specific area of a uploaded image to be the thumbnail
With the function comes with WP, we could crop a specific area from a uploaded image:1) edit a gallery post
2) upload a image (not feature image)3) in Add Media window, press the Edit Image button to crop a area for your thumbnail.
1.5 Enable the slider
Fashionic WordPress Theme - Documentation
Page 3
The slide could be used in Static Page or List Page, when editing page, go to Slider Options
and check the “Enable Slider” to active it.
1.6 How to active light box in content page?
1) Click “Add media”, the media window will popup
2) Select the image, select “Media file” in “Link to” selector
3) Click insert the post, update postNote: same with inserting gallery
1.7 Quickly set up Contact page and About page
Please refer to 9. Appendix.
Fashionic WordPress Theme - Documentation
Page 4
2. Installation
To use a WordPress theme you must have a working version of Wordpress already installed. For information in regard to installing the WordPress platform, please refer to the WordPress Codex-http://codex.wordpress.org/Installing%20WordPress
2.1 Extract the package file
After extract the main zip file, you'll see these folders and files:
fashionic floder - main theme folder
‣ img - UI images folder
‣ js - javascript files folder
‣ styles - css file folder
‣ functions - Options and widgets php files
‣ languages - po mo files for muti-languages
fashionic.zip - zipped theme file
Fashionic Documentation.pdf - help file
html.zip - zipped html version
log folder - log file and zipped older version theme
Fashionic.theme.wordpress.demo.data.xml - dummy content file
2.2 Install theme file
This template works well for wordpress 3.5 update yours if needed.
Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.
Fashionic WordPress Theme - Documentation
Page 5
2.2.1 Using WordPress Theme Upload:
Be sure to extract the file "fashionic.zip" from the ThemeForest download before
uploading. Using the ThemeForest ZIP file directly will result in a "Missing Style Sheet"
error.
• Login to your WordPress admin.
• In the "Appearance > Themes" menu click the tab "Install Themes"
• At the top of the page click, "Upload", then click the file input to select a file.
• Select the zipped theme file, "fashionic.zip", and click "Install Now"
• After installation you will receive a success message confirming your new install.
• Click the link "Activate"
2.2.2 Using FTP:
• Login to your FTP server and navigate to your WordPress themes directory.
• Normally this would be "wp-content/themes"
• Extract folder "fashionic" from the zipped theme.
• Copy the folder "fashionic" to your themes directory.
• After the files finish uploading, login to your WordPress admin.
• In the "Appearance" menu click "Themes"
• Click "Activate" for the theme "Fashionic Theme"
Fashionic WordPress Theme - Documentation
Page 6
3. Adding Content
3.1 Setup Categories
Before adding items(posts), it is recommended to setup the category structure for your next work. Then when you add or update your post, you could select the categories directly.
3.2 Adding Posts
We have prepared 4 formats for your post, you could choose either of them to match your need when creating a post. Theses formats would affect the styling of your post in list and content page.
• Standard
The standard format will show the title, content and featured image(optional) in the list page. It looks like:
Blog: In the standard post, you could choose the “Blog style” to post a blog, a blog with feature image will looks like:
Fashionic WordPress Theme - Documentation
Page 7
• Gallery
The Gallery Post is used to post images, the latest uploaded image will be display in the list. You could turn off the mouseover effect for Gallery Post when you editing the list page.
You need to upload the images from your computer (In other words, the images of gallery post must be uploaded to this post). For gallery post, you need not insert the images to post content.
Note: In wordpress 3.4, you need to click the Upload/Insert button to open the media window.
Fashionic WordPress Theme - Documentation
Page 8
In media window, you could select the “Uploaded to this post” to find the image of the gallery post.
You could set gallery image order and slider options in post.
• Video
The Video Post suport Youtube, Vimeo and all other videos with embed codes. You could enter the embed codes or Youtube and Vimeo URl ( e.g. http://www.youtube.com/watch?v=xxxxxxx or https://vimeo.com/xxxxxxxx ):
Fashionic WordPress Theme - Documentation
Page 9
• Audio
The Html5 audio play support opp and mp3 format audio files. The Audio Post will looked like:
Fashionic WordPress Theme - Documentation
Page 10
Fashionic WordPress Theme - Documentation
Page 11
4. Pages and Menus
4.1 Adding pages
To make menus work, you must setup the pages first. The menu you want to display in the site need to be linked to the specified pages.
4.1.1 Adding page
Go to “Pages > Add New” to add a new page. The page could be displayed as a list page or static page depending on your requirement (the drop-down menu named Template).
List page: This option will make you page displayed as a list, you need to assign the category you want to show in this page.
Static Page: If you want it is a static page, such as About us, Contact, you need to input the content into the text editor to edit your page.
Slider: The slider could be showed in any page (optional).
4.1.2 Setup a page as Homepage:
Go to Settings > Reading, select “A static page”, and choose your page you want to show from the drop=down menu “Front page”.
Fashionic WordPress Theme - Documentation
Page 12
4.2 Custom menus
Using the version 3.0 of WordPress or higher, you can setup custom menus. Menu will be displayed on the left sidebar.
Navigate to Appearance > Menus, it is recommended to create you menu from Pages or Custom. Select the menu you created for main menu
Fashionic WordPress Theme - Documentation
Page 13
5. ShortcodeFollowing snap shows the Shortcodes provided by this them:
5.1 Buttons
These are examples for Buttons:
5.2 Message Box
These are examples for Buttons:
5.3 Line
These are examples for Buttons:
Fashionic WordPress Theme - Documentation
Page 14
5.4 Title
5.5 Image Border Style
These are examples for Buttons:
5.6 List
These are examples for Buttons:
Fashionic WordPress Theme - Documentation
Page 15
5.7 Column
This is an one third + two third Column example:
5.8 Fixed Column
These are examples for Buttons:
5.9 Icon
These are examples for Buttons:
Fashionic WordPress Theme - Documentation
Page 16
5.10 Embed
You could directly insert the URL of Youtube, Vimeo video or Twitter,
For videos, it is recommended to set a width for the video.
5.11 Social Icons
These are examples for Social Icons (the 1st is for mouseover status):
5.12 Map
Fashionic WordPress Theme - Documentation
Page 17
5.13 Contact Form
Fashionic WordPress Theme - Documentation
Page 18
6. Theme Options
Navigate to “Appearance > Theme Options”, you could customize most of the appearance elements for your site.
6.1 Appearance > Theme Options > General
Logo(image) - Custom the logo image or logo text, you could also setup your high
resolution logo image for retina displayers.
Sidebar - the Sidebar width and Search bar, copyright options
List Page and Content Page - Text descriptions in the site
System - Email, Track code and the icons for browser and mobile devices.
6.2 Appearance > Theme Options > Social Networks
Setup the social media icons for site and posts.
6.3 Appearance > Theme Options > Color Settings
Most settings about color are in this section. We have provide two color sets for white and
dark style, and you could do many detail settings on the basis of these two skins.
6.4 Appearance > Theme Options > Font Settings
This section is for setting up the text’s fonts: size and type.
Fashionic WordPress Theme - Documentation
Page 19
7. JavascriptsThis theme imports several JavaScript files. All located in the "fashionic/js" folder.
main.js - main custom javascript
jquery-1.7.1.min.js - jquery library
Galleria-1.2.7.js - for background slider
jquery.infinitescroll. js - Infinite scroll(items load)
Comments-ajax.js – ajax type comments
jquery.isotope.min.js – Waterfall list
jquery.ui.map.js – Google Map
jquery.hoverdir.js – Gallery blcok hover effect
jquery.hoverIntent.js – Menu hover effect
jquery.infinitescroll.min.js – HTML5 player
8. Sources and Credits
The following elements have been used in this theme.
WordPress Options Panel: http://wptheming.com/2010/11/thematic-options-panel-v2/
Post Formats Admin UI : https://github.com/crowdfavorite/wp-post-formats
TinyMCE: http://www.tinymce.com
Fashionic WordPress Theme - Documentation
Page 20
9. Appendix
9.1 About Page
To create a About page the same with the demo, you could copy/paste the following into to your (Page) text editor:
Mid nec magna turpis porta tincidunt massa! Tempor montes magnis auctor ut! Pellentesque placerat,
quis augue dignissim? Pulvinar rhoncus! Scelerisque augue hac enim, quis cum. Lectus urna hac augue,
turpis ut diam, dis lectus porta! Sociis, magnis porttitor mus nunc etiam risus mauris, dapibus auctor
purus tincidunt? Tempor montes magnis auctor ut! Pellentesque placerat, quis augue dignissim?
Pulvinar rhoncus! Scelerisque augue hac enim, quis cum.
[fixed_column margin_top="0" margin_right="10px" margin_bottom="20px" margin_left="30px"
width="140px"] [center][round]http://www.uiueux.com/wp/fashionic/files/2012/08/staff1.png[/
round]
[title color="dark" size="h5"] Nike Beak [/title]Founder & CEO
[social social_type="facebook" social_link="#"][/social][social social_type="twitter" social_link="#"]
[/social][social social_type="flickr" social_link="#"][/social][social social_type="youtube"
social_link="#"][/social][/center]
[/fixed_column]
[fixed_column margin_top="0" margin_right="10px" margin_bottom="20px" margin_left="10px"
width="140px"][round]http://www.uiueux.com/wp/fashionic/files/2012/08/staff2.png[/round]
[center][title color="dark" size="h5"]Tom Abelard [/title]CTO
[social social_type="linkedin" social_link="#"][/social][social social_type="github" social_link="#"][/
social][/center]
[/fixed_column]
Fashionic WordPress Theme - Documentation
Page 21
[fixed_column margin_top="0" margin_right="10px" margin_bottom="20px" margin_left="10px"
width="140px"][round]http://www.uiueux.com/wp/fashionic/files/2012/08/staff3.png[/round]
[center][title color="dark" size="h5"]Tom Abelard [/title]Brain
[social social_type="vimeo" social_link="#"][/social][social social_type="facebook" social_link="#"][/
social][/center]
[/fixed_column]
[fixed_column margin_top="0" margin_right="0px" margin_bottom="20px" margin_left="10px"
width="140px"][round]http://www.uiueux.com/wp/fashionic/files/2012/08/staff4.png[/round]
[center][title color="dark" size="h5"]Dieter Rams [/title]Chief Designer
[social social_type="forst" social_link="#"][/social][social social_type="dribbble" social_link="#"][/
social][social social_type="pinterest" social_link="#"][/social][/center]
[/fixed_column]
[title color="dark" size="h5"] CLIENT [/title]
[fixed_column margin_top="0" margin_right="10px" margin_bottom="10px" margin_left="0px"
width="200px"][center] insert your image here[/center][/fixed_column]
[fixed_column margin_top="0" margin_right="10px" margin_bottom="10px" margin_left="0px"
width="200px"][center] insert your image here[/center][/fixed_column]
[fixed_column margin_top="0" margin_right="10px" margin_bottom="10px" margin_left="0px"
width="200px"][center] insert your image here[center][/fixed_column]
[fixed_column margin_top="0" margin_right="10px" margin_bottom="10px" margin_left="0px"
width="200px"][center]insert your image here[/center][/fixed_column]
Fashionic WordPress Theme - Documentation
Page 22
9.2 Contact Page
To create a Contact page the same with the demo, you could copy/paste the following into to your (Page) text editor:
[fixed_column margin_top="0" margin_right="40px" margin_bottom="0" margin_left="0"
width="400px"]Ridiculus penatibus pulvinar egestas hac arcu eros augue rhoncus, Magna nascetur
aliquet enim elit facilisis. Ridiculus penatibus pulvinar egestas hac arcu eros augue rhoncus, nisi sed
purus porta ac enim diam auctor turpis proin. Lundium dapibus!
[form title="Contant" name="Name" email="Email" button="SEND"][/form]
[/fixed_column]
[fixed_column margin_top="0" margin_right="0" margin_bottom="0" margin_left="0"
width="400px"][list_style_location] Address: 123 Amphitheatre Parkway Mountain View [/
list_style_location][half_line][list_style_phone] Phone: +83 (32) 982133 Fax: +83(32) 23232[/
list_style_phone][half_line][list_style_mail] Email: [email protected][/list_style_mail]
[map width="100%" height="220px" zoom="2" maptype="ROADMAP"
location="42.03296272471851, -91.40622499999995"][/map][/fixed_column]
Fashionic WordPress Theme - Documentation
Page 23
The End
Thanks again for purchasing Fashionic. If you have any questions that are beyond the of this documentation, please feel
free to email via my user page contact form here.
Fashionic WordPress Theme - Documentation
Page 24