Fluxus

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

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

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

Fluxus theme offers three areas for navigation menus.

1. Header Primary Menu
   Main navigation menu.
2. Header Secondary Menu
   Displayed to the right of main menu. It’s purpose is to display links that are of less importance.
3. Footer Primary Menu
   Displayed on the right side of the footer.

Go to _{Appearance > Menus} and add previously created Homepage, Portfolio and Blog pages to the main navigation menu.

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

To 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

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

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

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

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.

This 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).

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.

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.

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.

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.

Link post format shows a link in the featured image area.

Link Post Options

• _{Link URL} – website address of the link button
• _Title – link button title
• _Description – short text displayed under the button

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

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.

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]

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]

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.

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]

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]

This theme uses standard WordPress gallery shortcode. Easiest way to include a gallery into the content is using WordPress interface. Click _{Add Media} (_{Insert/Upload} on older WordPress versions) button, which will open Media Manager. Then select the _{Create Gallery} tab and upload or select existing images and click _{Create a New Gallery} button.

Show gallery photos in a Lightbox

When creating a WordPress gallery there’s an option which allows to specify where the photos should link to. Two options are available:

1. _{Attachment Page} – this will link each gallery image to it’s attachment page.
2. _{Media File} – this will open each image inside a Fluxus Lightbox.

The default option is Attachment Page, make sure you choose Media File if you want to see your photos inside a Lightbox.

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]

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 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="#" /]

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]

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

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

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.

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.

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.

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.

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

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

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.

Place your modifications inside the _inc/user.php file. This file is included at the very end of _{functions.php} file.

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

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.

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.

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 */
}

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

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.

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.

4. 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’);}

That’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.

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;
}

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;
}

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.

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.

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.

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;
  }
}

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;
  }
}

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;
  }

}

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.

By default HTML is filtered out from any input fields in Theme Options. However if you wish to add a link to your footer copyright you could use put following code to your _user.php file:

function optionsframework_allow_html_in_some_fields( $input, $option ) {
  $whitelist = array( 'fluxus_copyright_text' );

  if ( in_array( $option[ 'id' ], $whitelist ) ) {
    return $input;
  } else {
    return call_user_func( 'sanitize_text_field', $option[ 'id' ], $option );
  }
}

function optionsframework_custom_sanitization() {
  // Text areas
  remove_filter( 'of_sanitize_text', 'sanitize_text_field' );
  add_filter( 'of_sanitize_text', 'optionsframework_allow_html_in_some_fields', 10, 2 );
}

add_action( 'admin_init', 'optionsframework_custom_sanitization', 100 );

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;
}