Follow us on Twitter    ThemeForest    Instagram

Fluxus

Wordpress portfolio theme for photographers
Version 1.9

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

Important

This information is for Fluxus version 1.5 or newer.

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 in Fluxus 1.5 or newer

  1. Create a page and set the page’s template to Full Page Slider. Save the page.
  2. After saving at the bottom of the page two new sections will appear: Options and Slide Media.
  3. Click Add Media and select image or video to create your first slide.
  4. Check Published to make the slide visible on your page.
  5. Save the page. Try visiting the page you have just saved. You should see your first slide.

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 filling the whole screen area. To do so it has to crop 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 behaviour and make images fit. To do so, next to the image click Edit Details and look for a setting Fill mode. It allows to change the cropping behaviour for individual images.

Slide Options

  • Title – the title displayed in big font.
  • Subtitle – subtitle displayed in smaller font above the title.
  • Content – content that includes support for basic formatting.
  • Button label -label of the main call to action button. In none is provided, the default one will be used.
  • Link to project – enables you to link your slide with a portfolio 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 project option.
  • Text color – color of the text that is displayed on top of the slider image.
  • Style – allows choosing a different visual style of content box.
  • Content position & size – by default the text on top of the slider will be positioned in the center, by choosing Custom and clicking  Configure custom position & size you will be able to drag the content box anywhere on the page.
  • Fill mode – 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.
  • Background overlay – 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 contrasting background for your text.
  • Published – the slide will not be visible publicly until the Published checkbox is checked.

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 recommends using featured images for your posts. Landscape orientation ratio works best for featured images.

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 (only in 1.4 or older) – featured image is displayed in the background of the content. Note that in Fluxus 1.5 this template was replaced by Full Page Slider because visually it can achieve same design as Page with Background.

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 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.
  • user.css – contains user modifications (before 1.3 this file was located /css/user.css).
  • 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?

Important note: the instructions below are needed only for Fluxus versions prior 1.3. If you are using version 1.3 or newer you can change accent color in the admin panel by going to Appearance > Customize.

Making color picker is in the plans, meanwhile you can change accent color by adding the below code to your css/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 user.css file to change Facebook icon color into black:

.icon-facebook-with-circle:before {
   color: #000 !important;
 }
.icon-facebook-with-circle: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-with-circle
.icon-facebook-with-circle
.icon-gplus-with-circle
.icon-flickr-with-circle
.icon-pinterest-with-circle
.icon-twitter-with-circle
.icon-tumblr-with-circle
.icon-vimeo-with-circle
.icon-linkedin-with-circle
.icon-instagram-with-circle
.icon-behance-with-circle
.icon-youtube-with-circle
.icon-500px-with-circle

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 user.css file:

.icon-facebook-with-circle {
   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-with-circle: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, which is the official way of translating WordPress themes and plugins. This is a brief guide that explains how to translate Fluxus theme into German.

When using WordPress 4.0 or newer

Before starting make sure you have downloaded a free tool POEdit. It is available for both OS X and Windows.

1. Using FTP client connect to your website and download English translations file that was included with Fluxus theme. Find it under: wp-content/themes/fluxus/languages/en_US.pot

2. On your local computer rename the en_US.pot file de_DE.po (the convention is: language code followed by “_” followed by country code in capital letters).

3. Open de_DE.po file with POEdit and use it to translate the strings. For testing things out you can simply translate “Oops! That page can&rsquo;t be found.” into something else.

4. When done translating save the file. POEdit will save the translations to de_DE.po and in addition it will generate a de_DE.mo which will be used by WordPress.

5. Upload de_DE.mo to wp-content/themes/fluxus/languages/de_DE.mo

6. The translations are there, now we need to tell WordPress to use the new German language. The easiest way is to upload a copy of our de_DE.mo file to wp-content/languages/de_DE.mo (create that folder if it doesn’t exists). Then login to WordPress Admin section and go to Settings > General on the bottom there is “Site Language” setting. Change it to “Deutsch” and click “Save Changes”. Go to your website and visit any non-existing page eg. example.com/this-surely-doesnt-exist (or more likely example.com/asdasdasd) instead “Oops! That page can’t be found” you should now see the string that you’ve added via POEdit.

7. Your site now should be displaying some strings that you’ve entered in step #3. Further edit de_DE.po file to translate more strings and repeat the #4 and #5 steps to upload your translations.

 

When using WordPress 3.X

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?

Note: Following instructions are for Fluxus versions prior to version 1.4. As of 1.4 you can change cropping point in Grid Portfolio settings.

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 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 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 user.css file:

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

How to disable Lightbox zoom-in mode?

For Fluxus 1.7 or newer please add following code to your user.css file:

.fluxus-lightbox__btn--resize {
  display: none;
}

Before Fluxus 1.7 Add following code to your user.css file:

.fluxus-lightbox .lightbox-center-area,
.fluxus-lightbox .lightbox-resize,
.fluxus-lightbox .lightbox-resize[style] {
  display: none !important;
}

What is the best size for images?

Recommended image size is no larger than 2560×2560. Ideally it should be larger than 1500×1500 to ensure good quality.

Few notes

  1. If your images exceed 2560×2560 then it is a good idea to resize them before uploading. It will save bandwidth and make the upload process quicker. In some cases web servers can have limited amount of memory which can cause issues when resizing large images.
  2. Fluxus uses sizes defined in your Settings > Media. Make sure those numbers are set to sensible values. Recommended are: Thumbnail 500×500, Medium 800×800, Large 1280×1280. Changes to these values will only affect newly uploaded images. Use Regenerate Thumbnails plugin to regenerate existing images.
  3. Fluxus will also create 2048×2048 size. From all the available image sizes Fluxus will automatically choose the best one to show depending on number of factors.

Why does my project URLs look like this: /something/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/
    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.

How to change text like “view work” or “other projects”?

As of WordPress 4.0 there’s an easier method than manually creating a translation.

1. Install and activate a free Loco Translate plugin.

3. Inside WordPress admin click on the new “Loco Translate” menu item and in the Themes section, next to Fluxus click “New Language”.

4. Enter en_US as the language code. It is very important that the language code matches your current locale, by default it is en_US, but you may have changed it. In that case enter the locale name you are using.

5. Translate strings like “view work” into your preferred versions. Click “Save” when done. Your website should now use translated versions.

When updating the theme simply copy en_US.po and en_US.mo files from wp-content/themes/fluxus/languages/ directory into your newly installed theme.

How to increase sidebar width?

Add the following CSS code to your user.css file to increase sidebar (and logo area) width to 300px

@media screen and (min-width: 1024px) {
  .logo-container,
  .sidebar {
    min-width: 300px;
  }
}

How to remove project title from Horizontal Portfolio?

Since project title is shown on image hover you may want to remove it to make your website even more minimal. On mobile devices captions will still appear (since hover is not possible there). Hide project titles using following CSS code:

@media screen and (min-width: 1024px) {
  .page-template-template-portfolio .captioned-media__caption {
    display: none;
  }

  .captioned-media {
    padding-bottom: 0;
  }
}

How to remove sidebar from portfolio project pages?

You can hide sidebar from your portfolio project pages by adding following CSS to your user.css file.

.fluxus_portfolio-template-default.single-fluxus_portfolio .sidebar {
  display: none;
}

.fluxus_portfolio-template-default.single-fluxus_portfolio .site-with-sidebar {
  padding-left: 15px;
}

@media screen and (max-width: 768px) {

  .fluxus_portfolio-template-default.single-fluxus_portfolio .site-with-sidebar {
    padding-left: 0 !important;
  }

  .fluxus_portfolio-template-default.single-fluxus_portfolio .site-content,
  .fluxus_portfolio-template-default.single-fluxus_portfolio .site-content[style] {
    padding-top: 0 !important;
  }

}

How to import demo content from demo.xml file?

Fluxus comes with demo.xml data file which can be used to quickly setup basic website structure.

How to import demo content?

  1. Log in to your website as an administrator
  2. Make sure Fluxus theme is activated
  3. Go to Tools > Import
  4. Choose WordPress from the list
  5. Upload demo xml/fluxus.xml file which can be found in the files you have purchased
  6. You will be asked to import attachments. Make sure you check Download and import file attachments box.
  7. After importing data go to Settings > Reading and select Homepage as your front page.
  8. Go to Appearance > Menus > Manage Locations there assign 3 menus to their locations:
    Header Primary Menu to Main Menu
    Header Secondary Menu to Secondary Menu
    Footer Primary Menu to Footer Menu
  9. Go to Portfolio > Projects edit first project and click Add Images at the bottom of project page to add some images to your projects.

How to align logo section to the left?

You can change logo alignment by adding following CSS to your user.css file:

.logo-container {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

12 Further Help Top

For further help please contact inTheme using ThemeForest contact form.

Thank You.