fashionic wordpress theme · you need to upload the images from your computer (in other words, the...

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

http://themeforest.net/user/bwsm


http://www.uiueux.com

http://www.uiueux.com

mailto:[email protected]


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

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


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.


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.


http://codex.wordpress.org/Installing%20WordPress

http://codex.wordpress.org/Installing%20WordPress

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"


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:


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


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 ):


http://www.youtube.com/watch?v=xxxxxxx




https://vimeo.com/xxxxxxxx

https://vimeo.com/xxxxxxxx

• Audio

The Html5 audio play support opp and mp3 format audio files. The Audio Post will looked like:


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


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


5. ShortcodeFollowing snap shows the Shortcodes provided by this them:

5.1 Buttons

These are examples for Buttons:

5.2 Message Box


5.3 Line



5.4 Title

5.5 Image Border Style


5.6 List



5.7 Column

This is an one third + two third Column example:

5.8 Fixed Column


5.9 Icon



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


5.13 Contact Form


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.


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


http://wptheming.com/2010/11/thematic-options-panel-v2/

http://wptheming.com/2010/11/thematic-options-panel-v2/

https://github.com/crowdfavorite/wp-post-formats

https://github.com/crowdfavorite/wp-post-formats

http://www.tinymce.com/

http://www.tinymce.com/

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]


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]


http://www.uiueux.com/wp/fashionic/files/2012/08/staff1.png%5B/round%5D








[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]



[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]


width="200px"][center] insert your image here[/center][/fixed_column]


width="200px"][center] insert your image here[/center][/fixed_column]


width="200px"][center] insert your image here[center][/fixed_column]


width="200px"][center]insert your image here[/center][/fixed_column]






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]




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 · you need to upload the images from your computer (in other words, the...

Documents