Twitter or Follow us on ThemeForest

Thank You for purchasing

Fluxus

Wordpress portfolio theme for photographers

Version 1.2.5

01 Overview Top

Fluxus is a magazine inspired portfolio theme for photographers. It features a horizontal layout, which allows to showcase your art side by side, just like we are used to see it in print. Photographers are very picture oriented, and so is Fluxus. Pay attention to the pictures you are using on this theme and you will be able set up a great portfolio.

This documentation explains the theme features, how they work and how to properly use them. If you already know the basis of WordPress based website administration, then everything should be straightforward. Otherwise it is advisable to take a look at some introductory tutorials.

02 Getting Started Top

First thing to consider is your website structure. Visit the demo page to see what options are possible and decide what you are about to use. Let’s start by setting up the homepage, blog and portfolio.

Note

In this documentation it is considered that you have installed the theme in a fresh WordPress 3.5 installation. If that is not the case, then some of the walkthroughs and images may be different. Although you should still be able to do everything suggested.

Setting Up Homepage

Screen shot 2013-01-13 at 4.03.48 PMStart by creating a new page which will serve as your homepage. Go to Pages > Add New, set the title and click Publish. Now navigate to Settings > Reading and choose A static page next to the Front page displays option. From the Front page select box choose the page that you have just created. Save the changes.

Now the page you have just created will act as your homepage. Next thing is to customize it. Fluxus theme suggests 3 options for a homepage: Full Page Slider, Page with Background and Grid Portfolio. Pick one that you prefer and goto according section of this documentation to find out how to setup it.

Setting Up Blog

Crate a new page by going to Pages > Add New, specify page name and click Publish. Now navigate to Settings > Reading and from the Posts page select box choose the page you have just created. Save changes. Now if you visit the page, you should see a list of your blog posts (probably not many at the time).

Setting Up Portfolio

Screen shot 2013-01-15 at 2.19.34 AMCreate a new page by going to Pages > Add New, specify the name and locate Template select box. Select the template according to the type of Portfolio you would like to use (Horizontal Portfolio or Grid Portfolio). You can change it anytime. Publish the page and head to Portfolio section of this documentation to find out how to add portfolio items.

03 Portfolio Top

Fluxus theme offers two layout options for portfolio: Horizontal Layout and Grid Layout.

Quick Overview

To create a portfolio section on your website you have to do the following:

  1. Create a page and set it’s template to either Horizontal Portfolio or Grid Portfolio.
  2. Create some projects by going to Portfolio > Add New
  3. All your projects will be displayed on a page you have created on step #1

Note that “All” is emphasized, this means that if you will have two pages with Horizontal Portfolio template, they will both show the same projects. Go to Multiple Portfolios section to learn how to create categories for your projects.

Horizontal Portfolio

Displays your projects horizontally, scaling the images so that they fit in the viewers browser window.

Grid Portfolio

Screen shot 2013-01-13 at 5.29.12 PMArranges your projects in a predefined grid. If you have less than 12 projects, you might want to use a bigger grid. You can change the grid size by going to Pages and editing the page which has Grid Portfolio set as it’s template. On the bottom of the page there is Grid Options box, which allows you to specify custom grid size.

If grid portfolio is viewed on small screen, the grid size may automatically change from your predefined size in order to preserve nice layout.

Adding Portfolio Items

To add portfolio item go to Portfolio > Add New. Specify the name of your project and click Save Draft. After saving you will be able to see additional area named Project Options, use it to specify extra information about your project.

Adding Images

add-imageTo add images find the Project Media box on the bottom of the project edit page. Click Add Image button. Media browser will open where you can select an existing images or upload a new ones. Choose an image and click Add Image(s) button.

The image will be added to Project Media list. There you can further edit the image by entering image description which will get displayed on top of the image. Also you can specify the image to be featured. This means that the selected image should represent your project and it will get shown on horizontal and grid portfolios.

You can reorder the images and videos by simply dragging them in Project Media area.

Adding Videos

To add videos find the Project Media box on the bottom of the project edit page. Click Add Video button. An empty video item will be added to your Project Media list. Fill the Video Embed Code setting with embed code taken from YouTube or Vimeo and click Save. After saving Fluxus theme will try to recognize the embed code and show corresponding icon in the screenshot area. If that does not happen, check your embed code and make sure it looks like <iframe …></iframe>.

Project Options

Project Subtitle is displayed on top of project title. It can be useful for adding extra information to your project titles (e.g. Photography Series).

Project External Link is used to provide external link for your project (e.g. link to a magazine where this project is featured).

Project Information enables to add any amount of extra information related to the project. For example you can use it to give credits for calibration.

Feature Project Media Item

featureTo feature an image or video, find it in Project Media list and click edit. Check the Featured checkbox and click Save. Only one featured item per project is possible, so featuring an item will “un-feature” any other media items in that particular project.

Setting a video item as featured will require you to upload additional screenshot, which will be used on Horizontal and Grid portfolios instead of the video.

Note that if no item is selected as featured, then the first one will be used.

Project Media Order

To reorder your project images and videos simply drag them around in Project Media list. Note that since version 1.2.4 project media order is no longer automatically saved, you will need to click “Update” to save order changes.

Adding Project Types

Project types are used to filter your portfolio projects. They act like categories. To create a project type go to Portfolio > Project Types.

Screen shot 2013-01-14 at 3.06.22 PMYou can assign project types to your project on a project edit screen. Go to Portfolio, choose the project you wish to edit or create a new one. On the right hand side there is Project Types widget, where you can choose relevant project types.

Multiple Portfolios

Fluxus theme allows to have multiple main menu links that show different projects (and project types) to the user.

Let’s say you want to group your projects into a following structure:

  • Personal Projects
    • Travels
    • Experiments
  • Commercial Projects
    • Fashion
    • Weddings

You also want to place Personal Projects and Commercial Projects links in your main menu, so that users who click on them can only see projects that belong to those categories.

parentThis can be done using hierarchical project types. Go to Portfolio > Project Types and create 2 project types named Personal and Commercial.  Next create 4 more project types Travels, Experiments, Fashion and Weddings and make sure you assign their parent setting to either Personal or Commercial project type.

Now go to Appearance > Menus and find Project Types meta box. Use it to add Personal and Commercial project types to your main menu. Go to your website to see the changes. Clicking on “Personal” in main menu should show you all the projects that are tagged with Personal or any children tags (Travels, Experiments). It should also show only those Project Types that are the childs of Personal (in our case Travels and Experiments).

Note

If you can’t see Project Types meta box on the Menus page, then it is probably hidden. Click Screen Options on the top of the Menus page and select Project Types.

 

 

Ordering Projects

To reorder your projects go to Portfolio and click Quick Edit next to a project which position you would like to change. This will open project edit panel with an Order option. Changing the number will change projects position. Projects with lower values come first. If two projects have the same Order number than the one which were created more recently will be displayed first.

In other words – projects are sorted ascending by Order value and descending by creation date.

04 Full Page Slider Top

Full Page Slider allows you to showcase your images using the whole available screen area. You can add titles on top of the images and link them to specific pages.

Setting up Full Page Slider

  1. Create a page and set the page’s template to Full Page Slider. Save the page.
  2. Click Add Media and upload few new images to your page. This is important as the slider works only with images uploaded to that particular page.
  3. Open Slider tab (make sure you search for this tab in the media dialog, the one that opens after you click Add Media).
  4. You should see all your uploaded images. Edit their settings and make sure you publish each image individually by checking Published.

Important

Make sure images are at least 1920×1280 and for best results use images that are in landscape orientation.

Note on cropping

Full Page Slider works by willing the whole screen area. To do so it has to crop the top and bottom of the image. The amount of cropping depends on the aspect ratio difference of the image and the screen that it is being viewed on. It is possible to change this behavior and make images fit. To do so, next to the image click Show Details and look for a setting Image Scaling. It allows to change the cropping behavior for individual images.

Slide Options

  • Title - the title displayed in big font.
  • Subtitle – subtitle displayed in smaller font above the title.
  • Description – short description of the slide. If the slide is used to represent a project, then you might include short description of your project.
  • Custom link – the link of the button on the slide. If you are linking the slide to your portfolio project then use Link to portfolio option.
  • Link to portfolio - enables you to link your slide with a portfolio project.
  • Link title – specify the title of the link button. In none is provided, the default one will be used.
  • Text color – color of the text that is displayed on top of the slider image.
  • Info box position – by default the text on top of the slider will be positioned in the center, by choosing Custom and clicking Set custom position you will be able to drag the info box anywhere on the page.
  • Image scaling – when viewing the slide it is probable that the viewers screen aspect ratio will be different than the image aspect ratio. This means that the image can’t get fully displayed. Use this setting to choose how image should be scaled. Choose Crop Bottom, if you want the top of the image to be always visible. Choose Crop Top and Bottom to always display the vertical center of the image. Choose Crop Top to display the bottom part of the image and crop the top. You can also choose Fit Image which will show the whole image but it will also add padding around it.
  • Dim background – sometimes it will be not possible to place text on top of the slider so that it stays readable. Use this option to provide a solid color background for your text.
  • Published – the slide will not be visible publicly until the Published checkbox is checked.

Changing Slide Order

To change slide order drag your slides using the drag icon and click Save ordering changes, which is on the bottom of the Slider tab.

Custom Info Box Positioning

Custom position of the overlaying slide text is calculated using the top and left distance expressed in percentage. This makes it less accurate, but more flexible on different sized screens. On very small screens (e.g. handheld devices) custom position is ignored and the box is placed in the center. To avoid bad readability background becomes always dimmed.

05 Blog Top

Fluxus provides two layouts for showing up your blog posts: horizontal and vertical. To setup a blog page, create a new page and select either Horizontal Blog or Vertical Blog template. The page you have created will list all your blog posts.

Fluxus blog supports and encourages the use of featured images. To get the best of it make sure you use images with 16:9 aspect ratio. The excerpt is displayed on the blog index page and is limited to 50 words.

Post Formats

Fluxus theme offers 5 post formats: standard, aside, link, quote and video. To change post format locate a Post Format widget on a post editing page. Changing the post format reveals additional options that are associated with chosen post format.

Post Format: Standard

Standard post format has no options except for featured image. Setting featured image will get it displayed in blog index and on the post page itself. Make sure you use image that has 16:9 aspect ratio.

Post Format: Aside

Aside post format is used when you need to make a short note. No title will be displayed, only the contents of a post. The excerpt of aside post in blog index page is increased to 100 words.

Post Format: Quote

Quote post format displays a quote in the featured image area. If you set the featured image, then the quote will be overlaid on top of the image.

Quote Post Format Options

  • Quote – the quote
  • Text Color – the color of the quote text. If you are using featured image, then make sure it stays readable.
  • Quote Author – quote author displayed under the quote in smaller font.

Video

Video post format allows you to embed video from video service websites such as YouTube and Vimeo. Other websites should also work, but have not been tested. To embed a video simply paste the video embed code into video post format Embed Code area. Embedded videos will be visible in place of featured images on blog index page and on the post page. The player will be automatically resized to fit the available space.

YouTube embedding

Go to youtube.com and find the video you want to embed. Locate the Share button, click it and choose Embed. Then you will be provided with embed code which looks like this:

<iframe width="560" height="315" src="http://www.youtube.com/embed/-rvlaTg3vPg" frameborder="0" allowfullscreen></iframe>

Copy the code and paste it into video post Embed Code area.

Vimeo Embedding

Note

YouTube and Vimeo websites are constantly changing so these instructions might go out of date.

Go to vimeo.com and find any video you wish to embed. Hover the video player and you should see Share button on the right. Click it and paste the provided embed into video post Embed Code area.

06 Shortcodes Top

Fluxus theme comes with a handfull set of shortcodes. Use them in your posts and pages to embed extra functionality. The demo of all the shortcodes and their codes can be found on Fluxus Demo page.

Shortcode: Accordion

Accordion shortcode example:

[accordion]
[panel title="Page #1"]Nulla malesuada...[/panel]
[panel title="Page #2"]Pellentesque mattis...[/panel]
[panel title="Page #3"]Sed a sapien erat...[/panel]
[/accordion]

Shortcode: Alert

Alert shortcode example:

[alert]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/alert]
[alert type="note"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/alert]
[alert type="success"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/alert]
[alert type="warning"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
[/alert]

Shortcode: Aside

Any content wrapped in [aside][/aside] shortcode will be pushed to the right side of the page. It is useful when you wish to add some notes next to your main content. Use it like this:

This is your main content.
[aside]
This content will be shown on the right hand side.
[/aside]
Your main content continues.

Also [aside] shortcode supports position attribute, use it like this [aside position="absolute"]. This will position aside content using CSS absolute position. If you’re not aware of what that means, it’s best just to check out the difference by trying it.

Shortcode: Buttons

Button shortcode supports thsee parameters:

  • URL – the link that button points to.
  • Style – button color, possible values are: yellow, blue, red, green, black.
  • Size – if set to “big”, then the button will become bigger than the normal one.

Button shortcode examples

Normal buttons

[button url="#"]Button #1[/button]

[button url="#" style="yellow"]Button #2[/button]

[button url="#" style="blue"]Button #3[/button]

[button url="#" style="red"]Button #4[/button]

[button url="#" style="green"]Button #5[/button] 

[button url="#" style="black"]Button #6[/button]

Big buttons

[button url="#" size="big"]Button #1[/button]

[button url="#" style="yellow" size="big"]Button #2[/button]

[button url="#" style="blue" size="big"]Button #3[/button]

[button url="#" style="red" size="big"]Button #4[/button]

[button url="#" style="green" size="big"]Button #5[/button]

[button url="#" style="black" size="big"]Button #6[/button]

Shortcode: Columns

Columns shortcode allows to split text content into multiple columns. Imagine that the content area is divided into 12 equal parts. By using columns shortcode you can specify how many parts should a column take.

For example, if you want to have two equal sized columns, then you need to use two columns with a size of 6. The code would be:

[columns]
[column6]
Content of the first column.
[/column6]
[column6]
Content of the second column.
[/column6]
[/columns]

If you want to have three columns of equal size, then you should use three columns with a size of 4.

[columns]

[column4]
Content of leftmost column.
[/column4]

[column4]
Content fo middle column.
[/column4]

[column4]
Content of rightmost column.
[/column4]

[/columns]

Troubleshooting issues

First make sure that the sum of column sizes is no more than 12. If the layout still seems broken, then try to delete space between column tags, for example if you have the following

[columns]

[column6]
Content of the first column.
[/column6]

[column6]
Content of the second column.
[/column6]
[/columns]

Change it into this:

[columns][column6]Content of the first column.[/column6]
[column6]Content of the second column.[/column6][/columns]

Shortcode: Services

Use services shortcode to create a nice looking layout accompanied with round pictures. The service shortcode looks best when used on a page with Full Width template.

Service shortcode parameters

  • Title – title displayed above the image.
  • Icon – the name of the icon that is going to be displayed on top of the image. There are 280 icons. To find out how they look and what are their names visit fontello.com the section called Entypo is included with Fluxus theme. Hover any icon to see the name of the icon and use it with service shortcode.
  • Image – URL pointing to an image. Usually you will upload an image using WordPress Media and get it’s URL from there.

Services shortcode example:

[services]

[service title="We Shoot" icon="camera" image="./camera.jpg"]
Pellentesque...
[button style="yellow"]More[/button]
[/service]

[service title="We Write" icon="pencil" image="./write.jpg"]
Pellentesque...
[button style="yellow"]More[/button]
[/service]

[service title="We Think" icon="lamp" image="./think.jpg"]
Pellentesque...
[button style="yellow"]More[/button]
[/service]

[service title="We Grow" icon="chart-line" image="./grow.jpg"]
Pellentesque...
[button style="yellow"]More[/button]
[/service]

[/services]

Shortcode: Social Icon

Use social icon shortcode to embed little links to social networks.

Supported Parameters

  • URL – link to your social network profile.
  • Icon – icon name.

Supported Icon Names

social-icons

Social Icon example code:

[social icon="github" url="#" /]
[social icon="flickr" url="#" /]
[social icon="vimeo" url="#" /]
[social icon="twitter" url="#" /]
[social icon="facebook" url="#" /]
[social icon="facebook-squared" url="#" /]
[social icon="gplus" url="#" /]
[social icon="pinterest" url="#" /]
[social icon="tumblr" url="#" /]
[social icon="linkedin" url="#" /]
[social icon="dribbble" url="#" /]
[social icon="stumbleupon" url="#" /]
[social icon="lastfm" url="#" /]
[social icon="rdio" url="#" /]
[social icon="spotify" url="#" /]
[social icon="qq" url="#" /]
[social icon="instagram" url="#" /]
[social icon="dropbox" url="#" /]
[social icon="evernote" url="#" /]
[social icon="flattr" url="#" /]
[social icon="skype" url="#" /]
[social icon="renren" url="#" /]
[social icon="sina-weibo" url="#" /]
[social icon="paypal" url="#" /]
[social icon="picasa" url="#" /]
[social icon="soundcloud" url="#" /]
[social icon="mixi" url="#" /]
[social icon="behance" url="#" /]
[social icon="google-circles" url="#" /]
[social icon="vkontakte" url="#" /]

Icons in Circles

[social icon="github-circled" url="#" /]
[social icon="flickr-circled" url="#" /]
[social icon="vimeo-circled" url="#" /]
[social icon="twitter-circled" url="#" /]
[social icon="facebook-circled" url="#" /]
[social icon="gplus-circled" url="#" /]
[social icon="pinterest-circled" url="#" /]
[social icon="tumblr-circled" url="#" /]
[social icon="linkedin-circled" url="#" /]
[social icon="dribbble-circled" url="#" /]
[social icon="stumbleupon-circled" url="#" /]
[social icon="lastfm-circled" url="#" /]
[social icon="rdio-circled" url="#" /]
[social icon="spotify-circled" url="#" /]
[social icon="skype-circled" url="#" /]

 

Shortcode: Tabs

Tab shortcode example:

[tabs]

[tab title="First Tab"]
Aenean...
[/tab]

[tab title="Second Tab"]
Lorem ipsum...
[/tab]

[tab title="Third Tab"]
Ut vehicula
[/tab]

[/tabs]

Shortcode: Standfirst

Standfirst shortcode simply increases the font size of the wrapped text. Example usage:

[standfirst]
Increase the paragraph's font size with standfirst shortcode.
[/standfirst]

Shortcode: Break

Use brake shortcode to insert a tiny horizontal line. It can be used for separating content. Shortcode example:

Content before separator.
[break]
Content after separator.

07 Contacts Top

Fluxus theme has a page template that is specially designed for providing contacts information. It supports Google Maps and is compatible with Contacts Form 7 plugin which allows to create custom contact forms.

To set up contacts page create a new page and assign a Contacts template to it. After saving the page you will be able to see Contacts Page configuration box. Use it to integrate Google Maps into your contacts page.

If you set featured image for your contacts page, it will get displayed in the background of your contacts form.

Contacts Page Configuration

  • Google Maps API – in order to use Google Maps, you have to provide your personal Google Maps API.
  • Map Center Position - latitude and longitude of the point that will be in the center of the map.
  • Map Icon – latitude and longitude of the marker.
  • Icon Image URL – provide an URL to the image which will be used instead of default Google Maps marker.
  • Contacts Information – can be used to add extra information such as email, phone number and address. This information will be displayed nicely on the right side of the content.

 

Setting Up Google Maps

First you will need to acquire Google Maps API key. Go to this link and follow instructions to find out how. Enter the API key into Google Maps API box.

To set the map position you will need to get the coordinates. It is easy. Visit itouchmap.com and enter the address you wish to get coordinates for. You will be given two numbers that look like this: 37.813582,-122.47813. First number is the latitude, the second is longitude. Enter each of them into the corresponding boxes. Save the page and you should see the the map in the background of your contacts page.

You can customize the default Google Maps marker by providing your own one. Enter an URL that points to an image in the Icon Image URL box. Specifying Icon Latitude and Icon Longitude will set the position of the marker. Normally it is OK to make them the same as map center latitude and longitude. Although if you are picky, you might want to set the center position a little bit to the side of your marker. This way the marker will displayed on the side of the page and will not be covered by the content that is placed in the center.

Contact Form

Fluxus theme is compatible with Contact Form 7 plugin. Contact Form 7 is a powerful plugin that enables you to create custom contact forms.

Follow these steps to create a contact popup form on your page

  1. Install Contact Form 7 plugin
  2. Create a contact form using Contact Form 7 plugin and copy the provided shortcode. It should look something like this: [contact-form-7 id="25" title="General Contact"]
  3. Create a contacts page, make sure you assign Contacts template to it.
  4. Paste the copied shortcode inside the content and save the page.

Now your contacts page will have a Send Message button, clicking it will open the contacts form you have created with Contact Form 7.

08 Theme Options Top

Theme options contains general settings for Fluxus theme. They can be accessed by going to Appearance > Theme Options.

09 Theme Templates Top

This theme comes with 7 templates that you can assign to every page. Assigning any of these templates to a page will change it’s looks or functionality.

Available templates

Contacts - allows to set up Google Maps to be used on the page.

Full Page Slider - displays full page slider instead of content. See Section 4 for more info.

Full Width - page is displayed without a sidebar.

Full Width with Sidebar - page content area is usually limited to specific size of available space. Using this template will make the page content take all the available space.

Grid Portfolio - displays portfolio items in a grid layout.

Horizontal Blog – displays blog posts in a horizontal layout.

Horizontal Portfolio - displays portfolio items in a horizontal layout.

Page with Background – featured image is displayed in the background of the content.

Vertical Blog - displays blog posts in a vertical layout.

10 Theme Files Top

If you are willing to modify theme files you will find many helpful comments in every file. Modifying the files will impact the ability to update this theme in future. To prevent this be sure that you place your modifications in special files.

Modifying CSS

Major Modifications

Create a new CSS file under /css/skins/, place your modifications in that file. Then go to Appearance > Theme Options, navigate to Style tab and select your created file in the Stylesheet select box. This way you will be able to switch between your modifications and original files in case you need to debug something. Also if you are changing the colors, you might consider copying dark.css file and working on top of it.

Medium Modifications

Place all your modifications in /css/user.css

Quick Modifications

Go to Appearance > Theme Options, select Style tab and place your CSS code in the Custom CSS textarea. This method should used as temporary, as it is not best practice.

CSS Files

  • global.css – contains reset file and default styles for tags.
  • style.css – contains all the theme styles.
  • /css/fontello.css – contains definitions of icon font generated using fontello.com. The icon set embedded is called Entypo.
  • /css/grid.css – contains Bootstrap fluid grid. You can change the grid size by generating a new grid using the css/less/grid.less file.
  • /css/responsive.css – contains all the rules for website responsiveness.
  • /css/user.css – contains user modifications.
  • /css/skins/ – skins folder.
  • /css/wp-admin/ – folder that contains all CSS files used in WordPress admin UI.

JavaScript Files

  • /js/main.js – main JavaScript file.
  • /js/size.js – contains methods that occur on browser resize.
  • /js/utils.js – contains small jQuery plugins and other snippets.
  • /js/html5.js – HTML5 enabling script for IE.
  • /js/jquery.fluxus-grid.js – jQuery plugin used for Grid Portfolio.
  • /js/jquery.fluxus-lightbox.js – jQuery lightbox.
  • /js/jquery.fluxus-slider.js – jQuery plugin used for Full Page Slider.
  • /js/jquery.transit.js – jQuery plugin for CSS3 transitions.
  • /js/jquery.tinyscrollbar.js – jQuery plugin that enables content scrollbars.
  • /js/jquery.sharrre-1.3.4.js – jQuery plugin that concatenates social networks share count.
  • /js/jquery.reveal.js – jQuery plugin that enables modal boxes.
  • /js/user.js – contains user modifications.

Modifying JavaScript

Place your modifications in /js/user.js file. This file will be loaded after all the other Fluxus scripts. jQuery and plugins included in utils.js file are accesible in this file.

Adding JavaScript Snippets

Go to Appearance > Theme Options, locate a setting called Tracking Code. Paste your JavaScripts in that field, they will be placed in the footer of every page. Note: you do not need include <script> tags.

Modifying PHP Files

Place your modifications inside the /inc/user.php file. This file is included at the very end of functions.php file.

Photoshop Files

All Photoshop files required for further styling can be found in the /psd folder of the theme Zip package.

11 FAQ Top

How to update theme?

Step 1: Download the updated version from ThemeForest

Login to ThemeForest and go to your account’s downloads section. Download Fluxus Theme again, which will get you the latest version.

Step 2: Upload new version via FTP

Connect to your website using FTP client. Navigate to wp-content/themes folder. There you should see fluxus folder. It contains Fluxus theme files. Rename that fluxus folder to something like fluxus_old. This will allow you to have a backup copy just in case if there are issues with the new version. Now it is time to upload new files. Extract the downloaded archive. You should get the following folders: documentation, fluxus, licensing, psd. Upload only the fluxus folder to wp-content/themes.

Step 3: Check if the theme has been updated

Login to your website and go to Appearance > Themes. Next to your current theme you shall see version number. Check if it the same as the one on ThemeForest page. Also you can find change log on the bottom of that page, which describes the changes made in the new version.

Step 4 (optional): Copy your modifications to an updated theme

If you have added custom modifications to any of the css/user.css, js/user.js or inc/user.php files, then you have to copy them over from old version to a new one.

Copy wp-content/themes/fluxus_old/css/user.css to wp-content/themes/fluxus/css/user.css

Copy wp-content/themes/fluxus_old/js/user.js to wp-content/themes/fluxus/js/user.js

Copy wp-content/themes/fluxus_old/inc/user.php to wp-content/themes/fluxus/inc/user.php

Troubleshooting: Going back to previous version

Just in case something goes wrong you can always go back to the previous version if you did Step 2 properly. Connect to your website using FTP, go to wp-content/themes. Make sure that in Step 2 you have renamed the old version to fluxus_old or something similar and it still exists. Delete fluxus folder, where the current version is and rename fluxus_old back to fluxus. This will bring back the old version.

How to change fonts?

This theme uses two fonts available from Google Fonts - Merriweather and Lato. It is possible to change them by editing style.css and header.php

  1. Go to Google Fonts and find a font that you would like to use.
  2. Click “Quick Use” next to the font.
  3. In the opened page choose the font weights. Merriweather is being used for content text, so you might want to include Normal and Bold variations. Lato is used in 3 weights: Light, Normal and Bold. If you are substituting Lato font, then for the best results you should use a substitute that also has those 3 weights. Note that choosing all available variations will slow you website, so pick as few as possible.
  4. On the same page find a line which says - Add this code to your site. Copy the provided code and paste it into your header.php file. You should paste it next to the existing font declarations, which looks like this:
    <link href=”http://fonts.googleapis.com/css?family=Merriweather” rel=”stylesheet” type=”text/css”>
    <link href=”http://fonts.googleapis.com/css?family=Lato:300,400,700″ rel=”stylesheet” type=”text/css”>
  5. Remove existing font declarations for Merriweather and Lato fonts from your header.php file.
  6. Save the file and upload it to your server.
  7. Open style.css and replace every occurrence of ‘Merriweather’ to your new font name that is going to be used for content. Replace every occurrence of ‘Lato’ to your new font name that you want to be used for headlines. Do not strip out single quotes.
  8. Save the file and upload it to your server. You should now see your font in action.

 

How to change accent color?

Making color picker is in the plans, meanwhile you can change accent color by adding the below code to your user.css file. Just make sure you modify the color code #D8D8D8 to your preferred color. Also if you use dark color as a background, then the black text on top of it will get barely visible. In that case you might want to change text color as well.

.site-navigation .active > a,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a,
.site-navigation .active .current-fluxus-project-type-ancestor > a,
.current-fluxus_portfolio-parent > a,
.nav-tip #key-right.flash,
.nav-tip #key-left.flash,
.navigation-paging .paging .current,
.comment-actions a:hover,
#wp-calendar tbody td a,
.slide .style-default .button:hover,
.slider-navigation li a.active,
.slider-navigation li a:hover,
.project .hover-box .button,
.page-contacts .entry-content .button,
#close-map,
.tooltip,
.fluxus-lightbox .lightbox-prev,
.fluxus-lightbox .lightbox-next,
.fluxus-lightbox .lightbox-close,
.fluxus-lightbox .lightbox-resize,
.page-contacts .entry-content .button:hover,
#close-map:hover {
    background-color: #D8D8D8; /* your color here */
    color: #000; /* your text color here */
}

.reveal-modal,
.navigation-paging .paging .current {
    border-color: #D8D8D8;  /* Your color here */
}

.tooltip:after {
    border-top-color: #D8D8D8;  /* Your color here */
}

.excerpt-more {
    border-bottom-color: #D8D8D8;  /** Your color here */
}

How to customise social icons?

social-iconsSocial icons are implemented using so called “font icons”. Basically each icon is a letter of a special font. This has many benefits: it is easy to change their size, color and on hover state, also they look crisp on retina (high PPI) displays.

How to change icon color?

Add following code to your css/user.css file to change Facebook icon color into black:

.icon-facebook-circled:before {
   color: #000 !important;
 }
.icon-facebook-circled:hover:before {
   color: #333 !important;
 }

This will turn blue Facebook icon into black and will change it’s hover state color into dark gray. Use that snippet to apply different colors to your social icons.

Here are CSS selectors for all available social icons:

.icon-dribbble-circled
.icon-facebook-circled
.icon-gplus-circled
.icon-flickr-circled
.icon-pinterest-circled
.icon-twitter-circled
.icon-tumblr-circled
.icon-vimeo-circled
.icon-linkedin-circled
.icon-instagram-circled

How to change social icon into a custom one?

First you will need to upload an icon image to your website. Use WordPress Media manager for that. After doing this you will be able to retrieve an URL to your  icon, it should look like this:

http://cdn2.inthe.me/demo/fluxus/wp-content/uploads/2013/07/facebook-icon-20x20.png

Make sure you are able to see the icon when you visit your URL. Then modify following CSS code with your own URL and add it to your css/user.css file:

.icon-facebook-circled {
   background: url(http://cdn2.inthe.me/demo/fluxus/wp-content/uploads/2013/07/facebook-icon-20x20.png) no-repeat;
   width: 20px !important;
   height: 20px !important;
 }
.icon-facebook-circled:before {
   display: none;
 }

This will replace Facebook social icon with the image you’ve uploaded. It is best to use icons that are 20px to 24px in height, otherwise you will need to modify the spacing in the footer. The code snippet above can be used for icons that are 20×20 in size, for anything different don’t forget to modify width and height properties.

How to disable Lightbox inside project pages?

Important: Following instructions are only for Fluxus versions prior to 1.2.4. As of 1.2.4 Lightbox behaviour can be controlled via Appearance > Theme Options > Portfolio

Clicking on an image inside portfolio project page will open that image in the “Lightbox”. It is a common request to disable that functionality. This can be done by adding following code to user.js file:

(function($) {
    $(function () {
        var $images = $('.project-image-link');
        $images.each(function () {
            $(this).off('click')
                   .click(false)
                   .css('cursor', 'default');
        });
    });
})(jQuery);

This is a temporary workaround while I make it possible to deactivate Lightbox using Theme Options.

How to translate Fluxus theme?

Fluxus theme is translatable using .po and .mo files, this is a standard way of translating WordPress themes and plugins. This is a brief guide that explains how to translate Fluxus theme into German.

1. Using FTP client connect to your website and download default.po file from Fluxus theme’s languages folder. You should find it under wp-content/themes/fluxus/languages

2. On your local computer rename the default.po file to something that would represent your language, in our case it could be de.po (hence DE is for Deutschland). Now we need to translate the de.po file.

3. Download translation program POEdit.

poedit4. Use POEdit to open the de.po file. After opening you should see lots of strings, for a start let’s translate only one. Find a string that says “Other projects”, click on it and provide translation into your language. Save the file.

5. After saving you should see another file called de.mo. This is the file that got generated after saving the .po file. Let’s upload this de.mo file to wp-content/themes/fluxus/languages

6. The final step is to tell WordPress which language file to use. For this you will need to modify your wp-config.php. Find a line that says define(‘WPLANG’, ”); and change it into the file name of your .mo file (without extension). In our case it is define(‘WPLANG’, ‘de’);

other-projectsThat’s it. Now try going to your portfolio project and look for a place that used to say “Other Projects”. It should read whatever translation you’ve entered using POEdit.

If you are new to WordPress then this translation method might look too difficult (I must admit it is not very user friendly). In that case you might want to read official WordPress documentation to get other more extensive solutions.

How to change crop in Grid Portfolio?

Grid Portfolio tries to occupy the whole screen with project images, to do so it crops the top and bottom part of the image depending on the screen size available. The part that gets cropped part varies depending on the screen size and chosen grid size. In certain cases it is possible to achieve better cropping using following tips:

Create a separate featured image

Manually create a featured image for your project so that the subject is in the center. This will ensure that only non-important top and bottom parts gets cropped. Note that you can create a featured image, which won’t be included in project images and will only be used to represent a project. To do so click Edit next to an image in your project’s Project Media section, then check Featured, and uncheck Published checkboxes.

Change cropping mode so that only bottom part of the image gets cropped

You can do this by adding the following to your css/user.css file:

.grid-project .preview {
    background-position: top center;
}

Change cropping mode so that only top part of the image gets cropped

Add this to your css/user.css file:

.grid-project .preview {
    background-position: bottom center;
}

Disable cropping completely

This is not recommended as it will introduce padding which will change the visual appearance of the grid. If you really need to avoid cropping, then this might be an option. Add this to your css/user.css file:

.grid-project .preview {
    background-size: contain;
    background-color: #fff;
}

What is the best size for images?

Recommended image sizes should be at least 1500×1000 and at most 1920×1280.

Few notes

  1. Larger images than 1920×1280 will get downsized so that width doesn’t exceed 1920 and height doesn’t exceed 1280. Aspect ratio will be preserved. If your original files are larger than that, then it is a good idea to resize your images before uploading. It will save some bandwidth and make the process quicker.
  2. Smaller images will also work, but the quality might drop on bigger screens. Especially if you are using Image Upscale option found in in Theme Options.
  3. 1920×1280 size was chosen, because it is a sweet spot. The images don’t take too much space to slow down the website and the resolution is still enough for todays high PPI screens.

Why does my project URLs look like this: /something-weird/project-type/project-name?

Fluxus uses a URL structure that is made out of 3 distinct parts. For example a link to a specific project could look like this: /something-weird/project-type/project-name

  1. /something-weird/
    This is the slug of an existing page that has Horizontal Portfolio or Grid Portfolio template assigned to it. If you are using portfolio, then you have created at least one such page. To change the slug simply edit that page and click “Edit” next to it’s permalink. It is best to set the permalink of this page something to generic like: works, portfolio, projects.
  2. /project-type/
    The slug of the project type that the project belongs to. If project has multiple Project Types assigned, then the first one created will be used. Project Type slugs can be changed under Portfolio > Project Types
  3. /project-name
    Is the slug of the project.

12 Further Help Top

For further help please contact inTheme using ThemeForest contact form.

Thank You.