Fineliner - WordPress Theme

1. The Google Maps element do not load and show up. What do I do?

2. How to disable featured image cropping on the blog page?

3. How to remove animation when hovering on blog images?

4. [v1.8.0 Note] Changes in theme's custom code for Visual Composer

5. How to create and display default Home Slider?

6. How to display shop sidebar on product category template of WooCommerce?

7. [v1.7.0 Note] For WooCommerce user, there are a few extra steps when updating the theme to v1.7.0 and above

8. How to adjust the height of the portfolio slider on portfolio single page?

9. How to remove Related Works section out of the portfolio single page?

10. Icon fonts are not showing in Firefox. How to fix this?

11. How to adjust the height of the default home slider?

12. How to create and show portfolio on the page?

13. I cannot open portfolio single page. I only see "404 Page Not Found". What to do?

14. Style Customizer is not saving the changes. What should I do?

15. Where to find the code of portfolio meta info (Date, Client, Categories and Website) so I can customize it?

16. How to remove or hide the border around images?

17. How can I change the gallery thumbnail style (from circle to square or, from square to circle) ?

18. How to adjust the height of the blog image?

19. Creating a child theme

20. General troubleshooting steps

21. Some bundled plugins cannot be updated. They tell me to register with their own license first. What to do?

22. I want to have all the content like the demo site. How do I do that?

23. I couldn't update the bundled plugins with the theme purchase code. Why?

24. How to adjust CSS for different screen sizes?

25. Setting up automatic updates

26. OptionTree could not be downloaded and installed. What to do?

Please first update the theme to the latest version. After that, go to "Theme Options > Google Maps" to enter your API key and save. Clear all cache and check it again. The maps should load properly now.

=====================================================================

*NOTE: Below instruction is for the theme version prior to v2.0.0. If you are using the theme v2.0.0 and above, you can just upload the blog image (featured image) and it will be automatically scaled down to fit the area without hard cropping anymore. It means that the height of the image will now be flexible depending on the uploaded image's proportion.

=====================================================================

To disable cropping on the blog images, please do the following:

1. Open the "index.php" file and find this code:

echo get_the_post_thumbnail( $post->ID, $uxbarn_blog_thumbnail_size );

Change it to:

echo get_the_post_thumbnail( $post->ID, 'full' );

This will force WP to use the full size of it.

2. Apply this custom CSS:

.blog-item-thumbnail {
    height: auto !important;
}

Please go to "Theme Options > Blog" and you will find an option to disable the effect.

Since the theme v1.8.0, most custom code for overriding Visual Composer's elements are deprecated. A little drawback is that it might affect some of previous elements that you are using in your theme. But it will be greater in a long run for supporting plugin's stability and its powerful features.

Some affected elements are:

• Button
  • Previous one is deprecated.
  • Any icon that you were putting in the old button will not display.
  • Button shape (square, radius, and round) will not display correctly as it might only display as square shape.
  • Solution: Remove the old one and instead use the new Button element from the list.
• Single Image
  • "on click" attribute of the element will be reset.
  • Solution: Edit the element and select the attribute again.
  • Note: You can use "border" extra class name for displaying border around image.
• Image Gallery
  • Caption will not display.
  • You might need to respecify image size.
  • Note: You can use "circle" extra class name for making the gallery grid displaying as circular shape.
• Call-to-action Box
  • Previous one is deprecated.
  • Text in the old box might disappear.
  • Solution: Remove the old one and instead use the new CTA element from the list.
  • You can enter either "bottom-line", "right-line", "left-line" or "top-line" into the extra class name field of the newer element to display the accent-color line on the box.
  • You can enter "header-has-line" into the extra class name field of the newer element to display the line under the CTA title.
• Progress Bar
  • Some bar colors might be missing which you can respecify.
• Tabs
  • Previous one is deprecated. You can use a newer element from the list.
• Tour
  • Previous one is deprecated. You can use a newer element from the list.
• Message Box
  • You might have to reselect the color for the box.
• Accordion & Toggle
  • Previous one is deprecated. You can use a newer element from the list.
  • You might have to respecify the active tab and collapsible attribute.

1. On your admin panel, go to "Home Slider > Add New Slide" to start creating a new slide.

2. On the slide's edit screen, you will see some options available for how the caption text will display for that slide. Note that the post title will display as caption's title. And for the slide image, just upload Featured Image.

3. Back to your admin panel, go to "Theme Options > Home Slider" and make sure that you selected "Display Home Slider?" option as "Yes" and selected "Slider Type" option as "Default Slider". You can also configure some other options of the slider like Transition Effect, Auto Rotation, etc. here.

4. That's it. Now you should see the home slider on the frontend.

Unfortunately there is no option for that out of the box. You would need to manually customize the code in "/includes/plugin-codes/plugin-custom-functions.php" file.

Please find "uxbarn_wooc_theme_wrapper_start()" and "uxbarn_wooc_theme_wrapper_end()" functions in the file and look for this code:

if ( is_shop() ) {

Change it to:

if ( is_shop() || is_product_category() ) {

Make sure to edit the code in both functions. Now your product category template should also display the shop sidebar.

The theme v1.7.0 has removed some WooCommerce's template files which were previously in "/woocommerce" folder inside the theme folder. So, in order to make it work properly with WooCommerce 2.3, before updating the theme files, please do:

1. Connect to your FTP and go to the theme directory of your site. The path should look like this:

[root]/wp-content/themes/Fineliner

2. Delete "/woocommerce" folder that is inside the theme directory.

That's it. Now you can update the theme as normal by uploading the latest theme files into this directory, replacing any existing ones (don't forget to back up first).

=====================================================================

*NOTE: Below instruction is for the theme version prior to v2.0.0. If you are using the theme v2.0.0 and above, you can just upload the portfolio images and they will be automatically scaled down to fit the area without hard cropping anymore. It means that the height of the image will now be flexible depending on the uploaded image's proportion.

=====================================================================

1. Install and activate "Simple Image Sizes" plugin: http://wordpress.org/plugins/simple-image-sizes/

2. Install and activate "Regenerate Thumbnails" plugin: http://wordpress.org/plugins/regenerate-thumbnails/

3. Go to "Settings > Media" and add a new image size with dimension and also specify the "Crop?" to "Yes" or "No" depending on you whether to make WordPress crop the uploaded image or not. 

For example, create "new-portfolio-size" into the list with 1100px width and 900px height then define the Public name to be the same as "new-portfolio-size". 

(Tip: If you want to create a flexible height which will depend on its width, just set the height as "9999px" with "No" for the "Cropping?" option.)

4. Copy the Public name or the name of that created size (make sure they are the same) then open the "/uxb_templates/single-portfolio.php" theme file and find this code:

$image_size = 'uxb-port-single-landscape';

Change it to:

$image_size = 'new-portfolio-size';

Notice that it is the copied Public name here.

5. Go to "Tools > Regen. Thumbnails" and click the button to regenerate all images to make WordPress applies the new image size to all the uploaded ones.

6. Done. Now each slide of your portfolio single page (with "Landscape layout mode") should use the new defined dimension.

If you would like to customize the "Portrait layout mode", just use the same concept.

Please go to "Settings > UXbarn Portfolio Options" and there you will see the option to remove the Related Works section.

It looks like it is about the cross-domain request issue.

For the fix, you might need to add some code into the ".htaccess" of your site to allow that request. See here for more info: http://davidwalsh.name/cdn-fonts

Or, if this issue happens on secondary language when you are using WPML plugin, please go to "WPML > Languages > Language URL format" and change the format to "Different languages in directories" instead. It should help.

=====================================================================

*NOTE: Below instruction is for the theme version prior to v2.0.0. If you are using the theme v2.0.0 and above, you can just upload the image and it will be automatically scaled down to fit the area without hard cropping anymore. It means that the height of the slider will now be flexible depending on the uploaded image's proportion.

=====================================================================

Please try the followings:

1. Open "/includes/theme-functions.php" file then find this code:

add_image_size( 'theme-home-slider-image', 1170, 600, true );

Change from "600" to your new height number.

2. Open "style.css" file and find this CSS:

#home-slider-container {
    background: url('images/loading.gif') no-repeat center;
    min-height: 600px; /* init height */
    margin: 35px 0;
    overflow: hidden;
    position: relative;
}

Again, change "600" to the new height number.

3. Re-upload the featured images for your slider. This makes WordPress to recreate the image and use the adjusted height in step 1.

Please find below for the summary of how to add portfolio into the page:

1. Go to "Portfolio > Add New Portfolio Item" to add each portfolio item. Repeat this until you get all the items you want.

2. Go to "Page > Add New" to add a page for listing all those created portfolio items. 

3. In the page edit screen, click "Visual Composer" button to enable Visual Composer editor then click "Add element > Portfolio" to add the Portfolio element into the page. You can set some element options here, for examples, which portfolio categories to display, how many items, etc.

Note: I would also recommend to see the documentation for how to import the XML dummy data to get most posts/pages like showing on the demo and you can use them as examples. You can start from there or you might get some idea when browsing through the sample pages.

Please go to "Settings > Permalinks" and click to save once. This should solve the issue.

This issue is mostly caused by the server side or the WordPress installation. On the Style Customizer screen, after saving, if you check the Chrome browser's console in Developer Tools, you may see the error message like "403", "405" or "500 Internal Server Error" or some kind of AJAX stuff (or, in a very rare case, you may see nothing about the error).

I would suggest to firstly uninstall the current WordPress and theme then try the following steps:

1. Download the latest WordPress from: http://wordpress.org/download/

2. Do a fresh WordPress installation from the downloaded package. Also, make sure to enable "WP_DEBUG" (see this: http://codex.wordpress.org/Debugging_in_WordPress )

3. Install the theme with all dummy data using steps provided in the theme's documentation.

4. Test the site again.

If the issue still persists, please try it on another servers you have or contact your web hosting and send them the error message you see in the Chrome's console. They should be able to help you out especially for the "500" error code.

Another possible reason is the PHP version on your server. Make sure that your server has the up-to-date PHP version installed.

In the latest version of the theme, you can customize the portfolio's meta info by going to "Settings > UXbarn Portfolio Options > Custom Meta Info". There you can create your own set to use in the theme instead of the default ones.

You would have to edit the CSS for the ".border" class in "style.css" file to remove the border. Or, go to "Style Customizer > Others > Custom CSS" and try using the custom CSS as:

.border {
    border: 0 !important;
}

1. Click the pencil icon of the "Image Gallery/Slider" element. Screenshot: http://bit.ly/1efjFGj

2. Select the grid style from dropdown. Screenshot: http://bit.ly/1ge00SL

=====================================================================

*NOTE: Below instruction is for the theme version prior to v2.0.0. If you are using the theme v2.0.0 and above, you can just upload the blog image (featured image) and it will be automatically scaled down to fit the area without hard cropping anymore. It means that the height of the image will now be flexible depending on the uploaded image's proportion.

=====================================================================

1. Open "/includes/theme-functions.php" file then find this code:

add_image_size( 'theme-blog-thumbnail', 750, 200, true );
add_image_size( 'theme-blog-thumbnail-full', 1020, 220, true );

Change from "200" and "220" to your new height number. You can use "9999" for infinite height (depending on the uploaded image).

2. Open "style.css" file and find this CSS:

.blog-item-thumbnail {
    margin-bottom: 30px;
    height: 200px;
    overflow: hidden;
}

.blog-item-thumbnail {
    height: 220px;
}

Change from "height" to "min-height" for these two CSS selectors.

3. Re-upload all the image thumbnails for the blog posts (or you can use "Regenerate Thumbnails" plugin to regenerate them). This makes WordPress to recreate the image and use the adjusted size in step 1.

This article is offered for informational purposes. Please note that while we're happy to provide this guide, we can't offer support for custom code modifications. For details on what our support covers, please review our Item Support Policy.

Before you proceed, it's crucial to understand the steps outlined in this article.

Firstly, ensure your theme is updated to the latest version.

If you're planning to make more than just CSS changes to the theme, we highly recommend using a child theme. A child theme allows you to modify the parent theme's functions, templates, and styles without losing those changes when you update.

For these tasks, you can use an FTP client like FileZilla to connect to the server hosting your WordPress site.

Ready to create a child theme? Follow the steps below:

1. Create a New Folder: Start by creating a new folder for your child theme within the "themes" directory of your WordPress site. The directory path should look something like this:

[root]/wp-content/themes/

For this example, we'll name the child theme's folder "child-theme," making the complete path look like:

[root]/wp-content/themes/child-theme/

2. Add Required Files: Inside the "child-theme" folder, create two essential files: "style.css" and "functions.php."

3. Edit 'style.css': Open the "style.css" file in your child theme and insert the following code at the top:

/*
 Theme Name:   Child Theme
 Theme URI:    https://uxbarn.com
 Description:  My Child Theme
 Author:       UXBARN
 Author URI:   https://uxbarn.com
 Template:     [parent-theme-folder-name]
 Version:      1.0.0
 License:      GPL
 License URI:  http://codex.wordpress.org/GPL
 Tags:         light, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  uxbarn
*/

The crucial part here is the "Template" line. This must match the folder name of the parent theme. For instance, if you're using our Kathy theme as the parent, the "Template" line should read "kathy," like so:

/*
 ...
 Template:     kathy
 ...
*/

Note: If you're using a different theme, adjust this line accordingly.

4. Edit 'functions.php': Now, open the "functions.php" file in your child theme and add the following code at the top:

<?php
function child_theme_enqueue_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles', 99 );

This action and function instruct WordPress to load the "style.css" file of the child theme, appending it to the parent theme's list of styles on the front end.

5. Activate the Child Theme: Finally, navigate to your WordPress admin panel and go to "Appearance > Themes." You should see your child theme listed among the available themes. Click to activate it.

----------

Overriding Parent Theme's Template Files

If you wish to modify theme template files like "header.php" or "index.php," simply copy the desired file from the parent theme into your child theme folder. You can then make your edits there.

----------

Overriding Parent Theme's Functions

To modify functions from the parent theme—say, the "uxbarn_register_theme_image_sizes()" function—copy only the specific function into the "functions.php" file of your child theme.

* Note: Be sure to copy only the "function() {...}" portion, excluding the "function_exists()" wrapper.

----------

Overriding Parent Theme's CSS

You can do this by either using the "Additional CSS" field in the theme customizer or adding your custom CSS code into the "style.css" file of your child theme.

----------

Important Reminder!

After updating the parent theme to a newer version, always review the code in your child theme. Update it as needed to align with any changes in the parent theme. This practice ensures that your child theme remains up-to-date and avoids potential conflicts.

----------

That should be all the necessary information to help you get started with a child theme!

When there's something wrong happened with your WordPress site, don't panic. In many cases, the cause of issues can be found and solved easily. Please try the following troubleshooting steps:

1. First, make sure that everything is up-to-date on your site (WordPress, themes, and plugins).
2. If you still have issues, try to switch the theme to the default WordPress' Twenty [xxx] theme (for example, Twenty Seventeen) to make sure that the issues you are having are related to the UXBARN theme you are using. If the issues are still there after switching themes, it means the issues are not from the theme, but they might be from any of the plugins you are using.
3. Now you can try to disable the plugins one by one to see if any of them are the cause. If you find ones, please contact the plugin developers.
4. If the problem occurred after you had customized the theme, try to revert everything back to the default state. This should solve the problem in most of the cases. After that, double check your custom code again before adding it back piece by piece.

The above steps are probably enough for troubleshooting the issues by yourself.

But if you see an error message like "500 Internal Server Error", it means there's something wrong on your server. Please contact your system admin to help you check the server's error log and to solve the issue.

There are two different cases here:

Case 1: The bundled plugins cannot be updated right after finished updating the theme

You find that the newer versions of the bundled plugins already come with the latest version of the theme. You normally can update them via WP but this time the plugins prevent you from the update.

Symptoms

This is the case that after you finished updating the theme, you see a notification to update the bundled plugins on your WP like this:

You then click "Begin updating plugin" and try to update the plugin in the next screen but you get the message like this:

Note that in this case, the bundled plugin is only Visual Composer. There can be any other bundled plugins that give the similar message, for example, Revolution Slider, LayerSlider, etc. and you cannot then update them via the theme.

Solution

On your WP panel, go to the "Plugins" menu and disable the plugins in question first. Then try to update them once again using the same method. This should let the update pass the registering/activating process of the plugin. Finally you should see a complete message like this:

Now just reactivate the plugin after the update.

Case 2: You just see a notification from the bundled plugins to register/activate them to receive auto update

In this case, you can just ignore the notification as you get the plugins with the theme (bundled ones). So you do not have the purchase code of the plugins to register or activate them. Normally the bundled plugins will be updated periodically with the new version of the theme.

Or, you may consider purchasing the plugins separately to get their own purchase code so you can use the auto update of the plugins without waiting the next version of the theme. But we cannot guarantee the plugin support as we only test with the version that comes with the theme.

You can do that by importing the demo data from the provided XML file which is included in the full purchased package.

For a full guide of how to install the theme (and import the demo data), we would suggest reading through the theme documentation. There are also some useful tutorials provided in the doc to help you get started with the theme.

Note that the documentation is also included right in the purchased package. Just go to the 'Documentation' folder and open the 'index.html' file with your browser.

Since they are "bundled" with the theme, the plugins will only be updated with the newer version of the theme. This is normal for any bundled items. You won't be able to use the theme purchase code to register or update them directly.

If you wanted to directly update the bundled plugins, you would need to purchase them separately to get their own purchase code.

There are times when you wanted to use CSS code for different screen sizes. For example, you want to display the tagline normally on PC, but you want it to be hidden when viewing on a mobile.

1. Use https://designmodo.com/responsive-test/ or http://responsivepx.com/ for simulating the device viewport. You can also use the Chrome's Developer Tools for the job.

2. Use the Chrome's Developer Tools or Firebug on Firefox to inspect the elements you want to adjust.

3. Use CSS media queries to create the CSS for a particular screen size. For example:

@media only screen and (max-width: 768px) {
    .tagline {
        display: none;
    }
}

The code above will hide the tagline on any 768px screens and below.

For more information about CSS media queries, please see: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

4. You can enter any custom CSS code into the "Additional CSS" section that is in the theme customizer.

You can set up the automatic updates in our UXBARN themes using the Envato Market plugin. After installing the theme, you should see a notification at the top telling you to install the Envato Market plugin; just install and activate it first.

The idea of this plugin is that, you create and save a token and the plugin will list the items you purchased on the Envato Market (ThemeForest, CodeCanyon, for examples). You can then update the items easily via WordPress Updates.

Please follow the steps below to set up the plugin:

1. After activating the plugin, you will need to configure it by going to the "Envato Market" menu on your WP admin panel. You should see this screen:

2. There are 2 options to choose:

2.1) For Global OAuth Personal Token, it is suitable if this is your own website so once the token is saved, the plugin will list all the purchased items. To start creating the token, click the "generate a personal token" link on the page.

You might then see the login page. Just log in with your account that you used when purchasing the theme. Now you will see the screen like this for creating a new token: 

Select the permissions as shown above and click "Create Token". You will finally see a screen showing the information of the created token. Copy that token and put it into the "Token" field on the Envato Market plugin page.

After saving, you will see all of the purchased items of the account that is used to create the token.

2.2) For Single Use OAuth Personal Token, it is suitable if you create this website for your client so you can specify which items you want them to display. The plugin will show only the added items. The overall concept is similar to the global token instructed above. Once you click the "Add Item" button, you will see this popup window:

Use the same steps as the above global token to create a new token. Or if you already have one, put it into the "Token" field here.

To find the item ID, just go to the item page on ThemeForest then look at the browser's URL field. You will see a number like this "11354296" right after the item name in the. Copy and put it into the "Item ID" field then click "Save".

That's it! If the plugin is properly configured, next time when there is a newer version of the theme available, you will see an update notification on your WP admin.

On November 6, 2018, the OptionTree plugin seemed to be somehow disabled on the plugin repository of WordPress.org so you would not be able to download and install it. When you are trying to install the plugin, you might get an error message like this:

Something went wrong with the plugin API.

The issue should be temporary, and it should be online again in a few days.

However, if you are still experiencing the issue, you can manually install the plugin by following these steps:

1. Download the OptionTree plugin\'s ZIP package from here: https://cl.ly/32a1a9b26df4

2. On your WP admin panel, go to \"Plugins > Add New > Upload Plugin\" then browse to the plugin\'s ZIP file you downloaded in step 1 and click the Install Now button.

3. After it is installed, click the Activate Plugin button you see on screen.

* The themes that are affected by this situation are: Kathy, Darren, Alvar, Enso, Viceversa, Nakamura, Finnik, Lowel, Schon, Calmer, Thine, Kose, Fineliner, and Archtek.

Latest Update about OptionTree (April 3, 2019)

The author of OptionTree has already updated the plugin to v2.7.0, but it is currently in a develop branch on their github repo (reference: https://github.com/valendesigns/option-tree/issues/696#issuecomment-476055302 ). Once everything is settled, we will update and include the latest version of OptionTree in the following themes:

• Lowel, Schon, Calmer, Thine, Kose, Fineliner, and Archtek

Note that for the other themes (Kathy, Darren, Alvar, Enso, Viceversa, Nakamura, and Finnik), the OptionTree plugin has been replaced with Advanced Custom Fields.