FAQ

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, fluxus-child-theme, demo xml, 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 user.css, user.js or user.php files (located in the theme root folder), then you have to copy them over from old version to a new one.

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

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

3. Copy wp-content/themes/fluxus_old/user.php to wp-content/themes/fluxus/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 for content text and Lato for headlines (in Light, Normal and Bold weights). They are loaded by the theme in functions.php and referenced throughout style.css.

You can switch to different fonts without editing theme files:

1. Go to Google Fonts and find a font that you would like to use. Note which weights you need (choosing all available variations will slow your website, so pick as few as possible).
2. Add the following code to your user.php file. It unloads the default fonts and loads your own (replace the URL with the one Google Fonts gives you):

function my_custom_fonts() {
  wp_dequeue_style( 'fluxus-fonts' );
  wp_enqueue_style(
    'my-fonts',
    'https://fonts.googleapis.com/css?family=Your+Font:300,400,700'
  );
}
add_action( 'wp_enqueue_scripts', 'my_custom_fonts', 20 );

1. Add the following to your user.css file to apply the new font families (keep the quotes):

body {
  font-family: 'Your Content Font', georgia, serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-navigation,
.button {
  font-family: 'Your Headline Font', helvetica, arial, sans-serif;
}

If some elements still use the old fonts, inspect them in your browser and add the according selectors to the lists above.

How to change accent color?

Go to Appearance > Customize > Colors. There you can pick a predefined skin (Light or Dark) and tune background and accent colors one by one, with a live preview.

How to customize social icons?

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-500px-with-circle
.icon-behance-with-circle
.icon-bluesky-with-circle
.icon-dribbble-with-circle
.icon-facebook-with-circle
.icon-flickr-with-circle
.icon-google-with-circle
.icon-instagram-with-circle
.icon-linkedin-with-circle
.icon-patreon-with-circle
.icon-pinterest-with-circle
.icon-skype-with-circle
.icon-tumblr-with-circle
.icon-twitter-with-circle
.icon-vimeo-with-circle
.icon-vk-with-circle
.icon-youtube-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:

https://example.com/wp-content/uploads/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(https://example.com/wp-content/uploads/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?

Go to Appearance > Theme Options > Portfolio and change the "Clicking on project image" setting.

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.

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 underscore, 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’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-does-not-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.

How to change crop in Grid Portfolio?

Grid Portfolio tries to occupy the whole screen with project images, to do so it crops parts of the image depending on the screen size available. Since Fluxus 1.4 you can change the cropping point per image: edit the page that uses the Grid Portfolio template, find the grid settings and hover any image to customize its size and cropping.

In addition, following tips can help to achieve better cropping:

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 details next to an image in your project's Project Media section, then check Featured, and uncheck Published checkboxes.

Change cropping mode for all images at once

To crop only the bottom part of every image, add the following to your user.css file:

.grid-project__preview {
  background-position: center top !important;
}

Use center bottom to crop only the top part instead.

How to 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.

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

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

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

4. 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 Media at the bottom of project page to add some images to your projects.

How to allow HTML in footer copyright?

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

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