Fashionic WordPress Theme

Size: px

Start display at page:

Download "Fashionic WordPress Theme"

Clare Thornton
6 years ago
Views:

1 Fashionic WordPress Theme Documentation By uiueux studio Last edited: Thank you for purchasing Fashionic. If you have any questions that are beyond the of this documentation, please feel free to via my user page contact form here.

2 Content 1. Frequently Asked Questions 2. Installation 3. Adding Content 4. Pages and Menus 5. Shortcode 6. Theme Options 7. Javascripts 8. Sources and Credits 9. Appendix Page 2

3 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 page 4) 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 400 2:3-268 x 400 3:2-400 x 268 Original 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 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?

4 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 post Note: same with inserting gallery 1.7 Quickly set up Contact page and About page Please refer to 9. Appendix. Page 4

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

6 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" 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" Page 6

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

Gallery The Gallery Post is used to post images, the latest uploaded image will

You could turn off the mouseover effect for Gallery Post when you editing the

You need to upload the images from your computer (In other words, the images of

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

Video The Video Post suport Youtube, Vimeo and all other videos with embed codes.

9 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. v=xxxxxxx or ): Page 9

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

11 Page 11 Fashionic WordPress Theme - Documentation

12 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 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) 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. Page 12

13 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 Page 13

14 5. Shortcode Following 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: Page 14

15 5.4 Title 5.5 Image Border Style These are examples for Buttons: 5.6 List These are examples for Buttons: Page 15

16 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: Page 16

17 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 Social Icons These are examples for Social Icons (the 1st is for mouseover status): 5.12 Map Page 17

18 5.13 Contact Form Page 18

19 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 - , 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. Page 19

20 7. Javascripts This theme imports several JavaScript files. All located in the "fashionic/js" folder. main.js - main custom javascript jquery min.js - jquery library Galleria 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: Post Formats Admin UI : TinyMCE: Page 20

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

22 [fixed_column margin_top="0" margin_right="10px" margin_bottom="20px" margin_left="10px" width="140px"][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] [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] Page 22

23 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" =" " 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) Fax: +83(32) 23232[/ list_style_phone][half_line][list_style_mail] uiueux@gmail.com[/list_style_mail] [map width="100%" height="220px" zoom="2" maptype="roadmap" location=" , "][/map][/fixed_column] Page 23

24 The End Thanks again for purchasing Fashionic. If you have any questions that are beyond the of this documentation, please feel free to via my user page contact form here. Page 24

Connected TV Applications for TiVo. Project Jigsaw. Design Draft. 26 Feb 2013

Connected TV Applications for TiVo Project Jigsaw Design Draft 26 Feb 2013 UI Design Connected TV application for TiVo Project Jigsaw 2 Overview LAUNCH POINT The goal of Project Jigsaw is to create a library