• No results found

RSW. Responsive Fullscreen WordPress Theme

N/A
N/A
Protected

Academic year: 2021

Share "RSW. Responsive Fullscreen WordPress Theme"

Copied!
64
0
0

Loading.... (view fulltext now)

Full text

(1)

RSW

(2)

Thank you for purchasing this theme.

(3)

Table of Contents

Links 4

Important Notes 5

Uploading RSW via FTP to Wordpress 6 Building the Menus 8

- Enable Descriptions 8 Building the Menus 9 - Adding more items 11 Building the Menus 12 - Activating the menu 12 Social Header icons 13 Setting up Logo 14

Setting up a Default Background 15 Overlay Patten 16

Fullscreen Slideshow with/without Audio 17 Adding Music to Fullscreen Slideshow 21 Setting up Fullscreen Video function 22

Fullscreen HTML5 Video 23 Fullscreen Vimeo Video 24

Fullscreen Youtube / FLV Video 25

Selecting Fullscreen page as Homepage 26 Fullscreen Slideshow Settings 27

News Box 28

Portfolio Showcase ( Step 1 of 2) 30 Portfolio Showcase ( Step 2 of 2 ) 32 Portfolio Drag & Drop Sorter 34

Custom Post Formats 35 1. Standard Post 36 2. Aside post 37 3. Link post 38 4. Audio post 39 5. Quote post 40 6. Image post 41 7. Video post 42 8. Gallery post 43 Blog list Template 47

Contact Form Template 48 Fullwidth Template 49 Multiple Sidebars 51 Shortcodes GUI 53 Shortcode Slideshows 54 Custom widgets 56 Twitter widget 57 Gallery widget 58

Recent and Popular Posts 59 Portfolio Related 60

(4)

RSW

for W

ordPress

Icons used from (Selected icons Included)

http://www.greepit.com/open-source-icons-gcons/ http://somerandomdude.com/projects/iconic/ http://www.iconsweets.com

Supersized (INCLUDED no need to install)

http://buildinternet.com/project/supersized/

JPlayer (INCLUDED no need to install)

http://www.jplayer.org/

FlexSlider (INCLUDED no need to install)

http://www.woothemes.com/flexslider/

Pretty Photo (INCLUDED no need to install)

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

MEDIA USED IN THE THEME DEMO Music by DanoSongs.com

http://www.danosongs.com/

Videos by Blender Foundation

(5)

RSW

for W

ordPress

RECOMMENDED IMAGE SIZES

Fullscreen : 1080px or more

Fullwidth : 930px Width

Post images : 650px Width

(6)

RSW

for W

ordPress

1. Download the zipped theme pack to your local computer from themeforest and extract the ZIP file contents to a folder on your local computer.

2. Using an FTP client to access your host web server.

3. Upload the Theme files in the extracted folder called ‘rsw’ (its inside the extracted ‘rsw-packed’) to wp-content/themes directory provided by WordPress. Please make sure you’re uploading the files from the extracted rsw zip.

4. Visit Administration > Appearance > Themes, under the Manage Themes tab, under the Available Themes, if necessary navigate to the page displaying that Theme, then click the Activate link to make the Theme, the Current Theme.

Uploading RSW via FTP to Wordpress

(7)

RSW

for W

(8)

RSW

for W

ordPress

Building the Menus

- Enable Descriptions

Screen Options

Click Screen Options. This tab is displayed on the top right corner of the browser window.

Enable Descriptions Check

Enable Descriptions Tab.

Click Menus

Clicking will display Menu Builder Screen.

1 2

(9)

RSW

for W

ordPress

Building the Menus

- Create Menu

Enter a Name

Enter an name for your Menu and Click Create Menu tab

1

(10)

RSW

for W

ordPress

Building the Menus

- Create an Item

Create Home Button

From Custom Links box , enter URL and Label. Click ‘Add to Menu’

(11)

RSW

for W

ordPress

Indenting

Indenting the items creates sub menus for the Photo Menu

Create more item

Pages, Categories or Custom Post Types can be added easily by selecting and clicking ‘Add to Menu’

Building the Menus

- Adding more items

1

(12)

RSW

for W

ordPress

Choose your Menu

Selecting this options will populate your menu.

NOTE: Refer to Official Wordpress Menu Guide

(13)

RSW

for W

ordPress

Social Header icons

Social icons

The social icons can be generated by

populating your social links in the input fields.

Social Widget

The Social widget can be found in the Widgets list area in wp-admin.

NOTE: Drag and drop the Social widget to Social Header Widget area are and activate your social links.

(14)

RSW

for W

ordPress

Theme Options

- Setting up Logo

To setup logo, login to Wordpress Admin and Click Theme Options and click the General Tab as shown below. Click upload and select your logo image to upload. Once uploaded click ‘Use this image’ as shown on the right handside image. Make sure you’ve selected ‘Full image’ for the image size.

Once uploaded - Click Use this image

Click Upload

1

2

(15)

RSW

for W

ordPress

Theme Options

- Setting up a Default Backgrounds

Background image

Upload and click ‘Use this Image’ from the uploader to activate a background. Remember to select the ‘Full image’ option when choosing the image size.

Full size

Click ‘Use This Image’ to set the image. Make sure ‘Full Size’ is selected.

For Slideshows using Fullscreen Post

1 2

3

4 5

(16)

RSW

for W ordPress

Theme Options

- Overlay Patten

Overlay pattern

Select any of the overlay pattern for the background image.

1 2

(17)

RSW

for W

ordPress

Fullscreen Slideshow with/without Audio

1

2

3

Click the Upload icon

This brings up the uploader popup where you can add multiple images by drag and dropping the files.

(18)

RSW

for W

ordPress

5

Save Changes

(19)

RSW

for W

ordPress

6

7 Title

Show / Hide image options

Description

9

8

Save Changes

(20)

RSW

for W

ordPress

10

Drag and Drop the slides to Order them

(21)

RSW

for W

ordPress

Adding Music to Fullscreen Slideshow

Fill all image formats for best crossbrowser playability

OGA/OGG audio format native playback is supported in Firefox, Opera and Chrome

MP3 audio format native playback is supported in Safari,Chrome and IE Select Slideshow Type

11

12

(22)

RSW

for W

ordPress

Setting up Fullscreen Video function

1. For the fullscreen video to function it’s required to download JWPlayer.

Don’t include the Viral - video sharing plugin with the player when downloading.

Please download JWPlayer from the following URL http://www.longtailvideo.com/players/jw-flv-player/

The file list of the downloaded zip file are

2. Copy the above files from the zip folder to your themes folder in /JS/JWPLAYER/

(23)

RSW

for W

ordPress

Fullscreen HTML5 Video

Check out Native HTML5 Video Formats to Browser from the following URL.

http://diveintohtml5.org/video.html

1

2

3

4

Select Fullscreen Video

Enter Video URL

(24)

RSW

for W

ordPress

Fullscreen Vimeo Video

1

2

3 Select Fullscreen Video

4 Enter VIMEO Video ID

(25)

RSW

for W

ordPress

Fullscreen Youtube / FLV Video

1

2

3 Select Fullscreen Video

4 Enter Youtube video url

(26)

RSW

for W

ordPress

Theme Options

- Selecting Fullscreen page as Homepage

Select homepage fullscreen page and Save!

1

2

(27)

RSW

for W

ordPress

Theme Options

- Fullscreen Slideshow Settings

1

2

3

(28)

RSW

for W ordPress

Theme Options

- News Box

1 2

3 News Box can be enable or

(29)

RSW

for W

ordPress

(30)

RSW

for W

ordPress

Portfolio Showcase ( Step 1 of 2)

Goto WP-Admin > Portfolio List > And build your Portfolio by clicking Add New

1

1

2

3 Click Set Featured image and upload.

Drag and drop an image file

Click use Featured image Image displayed

once an image is

4

5 6

(31)

RSW

for W

ordPress

Description

Description to appear under the thumbnails

Sidebar Choice

Sidebar choice for this item

Custom Thumbnail

A custom thumbnail instead of the featured image used in the Page

Video URL

Video URL for the lightbox

Link To

Link to another URL (optional)

Slideshow height

Slideshow height

Video Embed code

Video embed code used for video header option

Background setting

Background setting for the Portfolio details page.

Portfolio Header type

Portfolio header type. You can choose to display an image, slideshow or video embed

7

8

(32)

RSW

for W

ordPress

Portfolio Showcase ( Step 2 of 2 )

Goto WP-Admin > Pages > Add New

Step

2

1

2

3 Set Page Temaplte to Portfolio Choose your Portfolio Settings.

(33)

RSW

for W

ordPress

Featured Image

Upload and set your Featured Image

NOTE:

Once published this page will populate your portfolio items. Background Settings

5

6

(34)

RSW

for W

ordPress

Portfolio Drag & Drop Sorter

Drag n Drop to rearrange the Portfolio Slides

1

(35)

RSW

for W

ordPress

RSW theme can build you custom post formats. Post formats can be chosen from the Post Edit screen. The list appears as the below screen shot.

When you select a post format additional options will relating the the chosen post format. These extra options are available for Gallery. Link, Image, Quote, Video and Audio.

Custom Post Formats

8 Custom post formats

(36)

RSW

for W ordPress

1. Standard Post

1 2 3 4

Choose Standard Post Format

Fill contents

Select Sidebar and background settings

Featured Image

Upload and set your Featured Image

5

(37)

RSW

for W

ordPress

An Aside is a cusom post format which doesn’t have a title. Very useful for small notes and such.

No additional options.

(38)

RSW

for W

ordPress

Linked post can be linked anywhere.

(39)

RSW

for W

ordPress

Audio post formats can generate an audio player for your post.

(40)

RSW

for W

ordPress

5. Quote post

(41)

RSW

for W

ordPress

You can display image post either as a standalone image or activated with a lightbox.

6. Image post

(42)

RSW

for W

ordPress

Video post formats can generate a video player for your post.

(43)

RSW

for W

ordPress

8. Gallery post

Gallery post can display a slideshow gallery in the post head. You can populate slideshow images by uploading them as image attachments.

1

2

Click the Upload icon

This brings up the uploader popup where you can add multiple images by drag and dropping the files.

3

(44)

RSW

for W

ordPress

Save Changes

(45)

RSW

for W

ordPress

Drag and Drop the slides to Order them

Once you add Title and Description to each slide proceed to Save all Changes.

(46)

RSW

for W

ordPress

(47)

RSW

for W

ordPress

Blog list Template

Goto WP-Admin > Pages > Add New

Choose Template

Blog list

NOTE:

Once published this page using the bloglist template will populate your posts

1

2

3

(48)

RSW

for W

ordPress

Contact Form Template

Choose Template

Contact Template

NOTE:

Make sure you fill the Contact section in Theme options with field names and email address

1

2

3

(49)
(50)

RSW

for W

ordPress

(51)

RSW

for W

ordPress

Activate Sidebars by entering a Name for it

You can activate sidebars on demand by giving the sidebars a name. Active sidebars are listed in the Widgets area.

Sidebar 1 to 20

‘Choice of Sidebar’ option is found in all Post and Page editing screen.

Multiple Sidebars

1

(52)

RSW

for W

ordPress

(53)

RSW

for W

ordPress

The feature of Generating Shortcodes through the Post and Page editor makes it a breeze to apply Shortcodes. There is no longer need to memorize or refer to any of them. Clicking each shortcode button gives you a Pop-up with the configurations required to generate them right into the editor.

Complex text layouts can be generated using the Columns Shortcode.

NOTE:

For the Shortcode GUI to be visible you’ll need to be in the Post or Page editor in ‘Visual’ mode.

NOTE:

The Thumbnails and Slideshow shortcodes require image attachments in the post or page it’s generated in. Just upload Multiple images to the post or page and click save - no

need to insert the image to the contents area manually. Once the shortcode is generated it’ll pick the attached images and display them.

Shortcodes GUI

Videos Thumbnails Slidesho ws Pictur e F rame Seperators Togg les , T abs and Ac cor dions Post and P age Lists No tic es Buttons Typog raph y Columns and Column La

(54)

RSW

for W

ordPress

Shortcode Slideshows

1) Goto WP ADMIN > PAGE > ADD NEW

2) Fill the TITLE (important for Gallery setup) and CONTENTS 3) Upload your IMAGES

4) Press Save All ( As shown in below screenshot )

5) Publish!

Click the Upload icon

This brings up the uploader popup where you can add multiple images by drag and dropping the files.

(55)

RSW

for W

ordPress

(56)

RSW

for W

ordPress

(57)

RSW

for W ordPress

Twitter widget

Title Enter title Username

Username to fetch tweets from

Avatar

Toggle twitter username avatar

Number of feeds

(58)

RSW

for W

ordPress

Gallery widget

List Choice

Populate using Page Attachments or use Category to fill the slots

Note:

Gallery widget supports both in the Sidebar and Footer. It will style respectively for both areas.

Click Action

Link Portfolio image using Direct link or Lightbox

Select Category

Choose a Category if List Choice is Category

Image Order

Generate Random images or Sequencial

Limit

Number of Images to Display

Select Page

Choose a Page if List choice is Page

Select Category

(59)

RSW

for W

ordPress

Recent and Popular Posts

Select Category

Select Categories to Generate the Recent Posts from

Description Length

Number of Characters to display from Excerpt

Posts to Display

(60)

RSW

for W

ordPress

Related Portfolio

You can create a custom sidebar for Portfolio items and place this widget to see a list of related portfolio items to the one displayed.

Portfolio Type lister

Widget shows list of all work types/categories created in the Portfolio

(61)

RSW

for W

ordPress

Social Widget

How to open the Link

How to open the link. In a new tab or existing one.

Effect when mouse hovered on icon

Select type of effect when mouse is hovered on icon

Icon Size

Icon size, 16px or 32px

Social Website link

When you fill the URL link - the icon corresponding to the website will appear in the widget area.

Contact text

(62)

RSW

for W

ordPress

Flickr Widget

Number of Photos to show

Set number of images to show

Flickr ID

Fill in the Flickr ID. You can use idGettr link to find it easily.

Image Order

(63)

RSW

for W

ordPress

(64)

Once again,

Thank you for purchasing this theme.

I’d be glad to help you if you have any questions relating to this theme.

References

Related documents