Contents

1. How to activate capital letters for the intro titles and the menu?

2. I want to change the permalink slug in the URL from "portfolio" to something else. How to do that?

3. How to create a child theme to use with UXBARN themes?

4. [Update Note] Major change on OptionTree plugin implementation since the theme v1.7.0

5. It used to work before but suddenly it does not work. What to do?

6. Is it possible to use an animated GIF as portfolio featured image? If yes, how?

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

8. How to hide the slider's caption on mobile devices?

9. How can I make portrait photos have the same width as landscape photos on portfolio single pages?

10. How to create and display default Home Slider?

11. How to make the page/post content area wider?

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

13. The menu items overlap with social icons and copyright text on small screen. How to fix that?

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

15. How to renew or extend the support for an item?

16. How to adjust the side margins of the side panel to make more room for the logo?

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

18. I got "Page Not Found" after changing pages on my portfolio. How to fix that?

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

20. How to customize the width of the scrollbar of the content area?

21. [v1.5.0 Note] Changes in theme's custom code for Visual Composer

22. How to manually sort portfolio items?

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

24. I'm unable to update/register the bundled plugins with the theme's purchase code. Why?

25. How do I disable the lightbox on portfolio single pages?

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

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

28. How can I increase the height of portfolio slider on portfolio single page?

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

30. How to adjust the CSS for various resolutions?

31. How to enable Visual Composer mode for portfolio item?

32. How to reduce the top and bottom margins of the side panel?

33. Is it possible to remove left and right white space around the top page/post image?

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

35. How can I get the tagline under the logo instead?

36. How to reorder portfolio categories on the listing template?

37. How do I remove the category links on portfolio single pages?

38. How to configure blog's meta info display (date, author, comments count) ?

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

40. Can I increase the logo size?

41. How to manage and use custom meta info for portfolio?

42. How to adjust the height of the home slider from "624" to something else?

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

44. How to translate the copyright text using WPML?

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

46. How to hide the full screen slider and make the content area displayed right under the menu on mobile views?

47. How do I expand the width of the content area?

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

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

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

51. How do I make the page content visible on portfolio templates?

52. Some Visual Composer's elements/functionalities are missing. How can I enable them?

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

54. How can I rename the "portfolio" slug and its texts to something else?

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

56. Portfolio category images don't show up if Jetpack plugin is active. How to fix that?

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

58. How to hide portfolio categories when hovering on the portfolio items?

59. [v1.2.0 Note] Changes in theme's custom code for Visual Composer

60. How do I make the portfolio titles visible on the portfolio listing templates?

61. I've tried installing in WordPress but it says the theme is missing the style.css stylesheet. Am I doing something wrong?

62. I was unable to install the theme. I got the message "Are you sure you want to do this?". What should I do?

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

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

65. Setting up automatic update in UXBARN themes

66. How to hide search button in the header?

67. How to add a blank menu?

68. How do I change the page layout to make all text span across the container?

1. How to activate capital letters for the intro titles and the menu?

You can use this custom CSS to adjust that:

#main-container #intro-title,
#menu-container {
    text-transform: none;
}

In case you would like to use custom CSS for other elements, I would recommend Developer Tools on Chrome or Firebug on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.

2. I want to change the permalink slug in the URL from "portfolio" to something else. How to do that?

Please open "/includes/cpt.php" file then search for the function of "uxbarn_register_cpt_portfolio()". In the function, find this line of code:

'rewrite' => array('slug' => __('portfolio', 'uxbarn'), 'with_front' => false)

You can change the slug here. Just replace "portfolio" with your own slug to use.

3. How to create a child theme to use with UXBARN themes?

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

READ ME FIRST

This article is provided as a courtesy. The publishing of this information does not imply support of this article. The customization and/or the issue of the customized code is outside the scope of support provided by UXBARN. Please take a moment to review the Item Support Policy.

You must exactly know what you are doing when following the article instruction.

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

First thing first, make sure to update the theme to the latest version before proceeding.

If you want to customize the theme at coding level, not just CSS, we would strongly suggest using a child theme for that. A child theme allows you to override the parent theme's functions, template files and CSS so you will be able to adjust them as you want.

Note that you can use an FTP client like FileZilla to connect to your web server that hosts your WordPress site.

Let's start by following the below steps to create one:

1. Create a new folder for your child theme in the "themes" directory of your WordPress site. The path to the directory should look like this:

[root]/wp-content/themes/

In this case, we name the child theme's folder as "child-theme" so as a result, the complete path will look like this:

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

2. Create two required files in the "child-theme" folder which are "style.css" and "functions.php".

3. Open the "style.css" of the child theme and add this code at the beginning of the file:

/*
 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 important line is the "Template" line. It must correspond to the folder name of the parent theme. For example, if you are using our Fineliner theme, it will be the parent theme in this case and the value to be put in the "Template" line will be "Fineliner" like this:

/*
 ...
 Template:     Fineliner
 ...
*/

You may be working with a different theme, so adjust it accordingly.

4. Open the "functions.php" file of the child theme and add this code at the beginning of the file:

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

The action and function tell WordPress to load the "style.css" file of the child theme by appending it to the parent theme's CSS list on the front end.

5. Now go to your WordPress admin and go to the "Appearance > Themes" menu. You will see your child theme appearing in the theme list. Click to activate it.

6. That is it for creating a new child theme.

----------

Overriding Parent Theme's Template Files

If you want to edit the code in the theme's template files like "header.php", "index.php", etc, you can just copy the file from the parent theme and put it into your child theme folder then edit it from there.

----------

Overriding Parent Theme's Functions

If you want to edit the functions of the parent theme, for example, the "uxbarn_register_theme_image_sizes()" function, you can do that by copying only the function from the parent theme and put it into the "functions.php" file of your child theme.

* Note that, you must copy only the "function() {...}" part, NOT including the "function_exists()" wrapper.

----------

Overriding Parent Theme's CSS

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

----------

Remember!

Everytime when you finished updating the parent theme, make sure to check all the code you use in your child theme and update them as necessary to reflect any changes in the parent theme. You might back up your custom code first, update the files with the latest version, then apply your custom code back.

By doing this, it ensures that the files and code in your child theme are always up-to-date and to prevent any problem that might occur.

----------

That should be all to help you get started with a child theme to use with our themes.

You can also find more info here: https://uxbarn.com/series/getting-started-with-theme-customization/

4. [Update Note] Major change on OptionTree plugin implementation since the theme v1.7.0

Archtek theme v1.7.0 has changed the way to implement OptionTree plugin entirely. The plugin was previously included in the "/optiontree" folder which was in the theme folder (built-in version). Now the theme has removed the built-in version out and implemented OptionTree as a standalone plugin. If you are updating the theme from previous version to v1.7.0, you will see a notice asking you to install the OpionTree plugin. Just follow the link on screen to install and activate the plugin.

There might be some effects of some option types after the update as followings:

1. Any "Yes-No Toggle Button" type from the previous version will now be "Yes-No Radio Button" type.

2. LayerSlider selection type in "Theme Options > Home Slider" from the previous version will now be a simple textbox that accepts the shortcode of the slider you want to use.

But do not worry. Actually your saved data/options are still the same and there should not be any problem when viewing on the frontend. But if you go to check the option types mentioned above on the backend (ex. post's edit screen, page's edit screen, Theme Options), you might see them as unchecked (or blank). If you want to save the post/page, you just need to select the value for those options again.

5. It used to work before but suddenly it does not work. What to do?

There must be something triggered the problem. Some of the possible causes might be:

Here are what you can try to troubleshoot the problem:

6. Is it possible to use an animated GIF as portfolio featured image? If yes, how?

It is possible, but you would need to override the parent theme’s function and customize it in a child theme.

First, you need a new child theme for the job. Please see here on how to create one: https://uxbarn.ticksy.com/article/8649/

Then in the “functions.php” file of the child theme, add this code:

function kathy_get_portfolio_list_image_size( $layout = 'list', $is_full_width = true ) {
    return 'full';
}

The custom code will override the image size of the parent theme and the GIF file's animation should work.

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

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

8. How to hide the slider's caption on mobile devices?

1. Go to "Style Customizer > Others > Custom CSS"

2. Enter this custom CSS into the box:

@media only screen and (max-width: 767px) {
    .slide-caption-wrapper {
        display: none;
    }
}

This code will force to hide both caption title and text on mobile devices (resolution width lower than 767px).

9. How can I make portrait photos have the same width as landscape photos on portfolio single pages?

You would need to customize it via a child theme. Please do:

1. Create a new child theme for this customization. For how-to instruction, please see: https://uxbarn.ticksy.com/article/8649/

2. In the parent theme, open the "/includes/plugin-codes/custom-uxbarn-portfolio.php" file and find this function:

function enso_print_portfolio_image_format_content( $image_id_list_string ) {
   ...
}

3. Copy and put it into the "functions.php" file of the child theme you created in step 1.

4. After that, find this code in the function:

$image_size = 'enso-port-single-portrait';

Change it to:

$image_size = 'enso-full-width';

5. That's it. The theme should now display portrait photos in full-width.

10. How to create and display default Home Slider?

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.


11. How to make the page/post content area wider?

You would have to manually use custom CSS to adjust that. Please go to "Appearance > Customize > Additional CSS" and try applying this code:

.page .post-content-container,
.single-uxbarn_portfolio .post-content-container {
    margin-left: 0;
}
.page .post-title,
.page .post-content,
.single-uxbarn_portfolio .post-title,
.single-uxbarn_portfolio .post-content {
    float: none;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}
.single-post .post-content-container, 
.blog-list .post-content-container.no-image, 
.search-results .post-content-container {
    margin-left: 10%;
}
.no-image .post-excerpt, 
.search-results .post-excerpt, 
.single-post .post-content {
    width: 70%;
}
.blog-list .no-image .post-meta-wrapper, 
.single-post .post-meta-wrapper {
    margin-left: 8%;
    width: 16%;
}
@media only screen and (max-width: 950px) {
    .page .post-content-container, 
    .single .post-content-container, 
    .blog-list .post-content-container.no-image, 
    .search-results .post-content-container {
        margin: auto;
        width: 70%;
    }
    .no-image .post-excerpt, 
    .search-results .post-excerpt, 
    .single .post-content, 
    .page .post-content {
        float: none;
        width: auto;
    }
    .blog-list .no-image .post-meta-wrapper, 
    .single-post .post-meta-wrapper {
        margin: auto;
        width: auto;
    }
    .page .post-title,
    .single-uxbarn_portfolio .post-title {
        width: auto;
    }
}
@media only screen and (max-width: 800px) {
    .page .post-content-container, 
    .single .post-content-container, 
    .blog-list .post-content-container.no-image, 
    .search-results .post-content-container {
        margin: auto;
        width: 90%;
    }
}


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

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.

13. The menu items overlap with social icons and copyright text on small screen. How to fix that?

Please go to "Style Customizer > Others > Custom CSS" and try using this CSS:

@media only screen and (max-width: 1200px) {
    
    #side-container {
        padding: 20px 50px
    }
    
    #logo-wrapper {
        margin-bottom: 20px;
    }
    
    #menu-wrapper > ul > li {
        font-size: 12px
    }
    
    #side-footer-wrapper {
        bottom: 20px;
    }
    
    #copyright {
        margin-bottom: 10px;
    }
    
}

This code will reduce the overall spacing of the side panel for the resolution lower than 1200px (set by media query as you can see). But if you have so many menu items, the issue might still occur. If this is the case, I would recommend to either reduce the number of menu items or set the "font-size" value in the code above to be lesser.

In case you would like to use custom CSS for other elements, I would recommend "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.

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

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

15. How to renew or extend the support for an item?

You can renew or extend the support by going to the item page on ThemeForest. Just log in with your ThemeForest account (the account that made a purchase) and go to the item page then you will find a button to renew/extend the support on the right panel.

16. How to adjust the side margins of the side panel to make more room for the logo?

Please go to "Style Customizer > Others > Custom CSS" and use this custom CSS:

#side-container {
    padding-left: 10px;
    padding-right: 10px;
}

P.S. In case you would like to use custom CSS for other elements, I would recommend "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.

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

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

18. I got "Page Not Found" after changing pages on my portfolio. How to fix that?

Please make sure that the portfolio slug is not the same as any page slug.

For example, the theme by default uses "portfolio" as a portfolio slug. If you also have a page that has the same slug as "portfolio", please change the page slug to something else (eg. "my-portfolio").

OR, you might want to change the portfolio slug instead. To do that, go to "Appearance > Customize > Portfolio Options" and scroll down to the bottom. You will see the options to change portfolio slugs there.

After that, go to "Settings > Permalinks" and click save.

This should help.

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

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

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

20. How to customize the width of the scrollbar of the content area?

You would need to manually edit the JS code for that. Please open "/js/kose.js" file and find this code:

$('#inner-content-container').niceScroll({
	cursorcolor : ThemeOptions.content_scrollbar_color,//'#fcda1c',
	cursorwidth : 3,
	cursorborder : 0,
	touchbehavior : false,
	autohidemode : true,
	hidecursordelay : 1000,
	scrollspeed : 100,
	//bouncescroll : true,
});

Just increase the value of "cursorwidth" here to make the scrollbar bigger. Then clear all the the cache and see the result.

Note that the theme uses "nicescroll JS" for the scrollbar. You can find more info about its API here: http://areaaperta.com/nicescroll/

21. [v1.5.0 Note] Changes in theme's custom code for Visual Composer

Since the theme v1.5.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:

22. How to manually sort portfolio items?

The theme by default comes with built-in sorting functionality in the "Appearance > Customize > Portfolio Options". 

However, you can try using this plugin to manually sort your portfolio items: https://wordpress.org/plugins/post-types-order/

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

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.

24. I'm unable to update/register the bundled plugins with the theme's purchase code. Why?

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 cannot use the theme's purchase code to register or update them directly.

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

25. How do I disable the lightbox on portfolio single pages?

Please go to "Appearance > Customize > Portfolio Options" and scroll to the "Other Options" section. You will find the option to disable it there. ;)

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

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.

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

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.

28. How can I increase the height of portfolio slider on portfolio single page?

Please try the followings:

1. Open "functions.php" file and find this code:

add_image_size('single-portfolio', 1020, 500, true);

2. Change the value of "500" into your new height number here.

3. Go to "Style Customizer > Others > Custom CSS" and enter this:

#portfolio-item-images .single-portfolio-item {
min-height: 500px;
}

Change from "500px" into the new height.

4. Re-upload all the images for the portfolio. This will make WordPress to use the new defined dimension.

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

*Note: Since the theme v1.5.0, a new feature for creating your own meta info for portfolio has been introduced. You can manage the custom meta info by going to "Settings > UXbarn Portfolio Options" and they will appear on the portfolio's edit screen. There is no need to use the below instruction.


There are two major sections involved which are:

1. For the front end, open "/uxb_templates/single-portfolio.php" file and there you will see the code for the meta info to display on your website.

2. For the back end, open "/includes/plugin-codes/custom-uxbarn-portfolio.php" file and search for the function of "uxbarn_custom_port_create_meta_info()".

30. How to adjust the CSS for various resolutions?

In case you want to adjust elements on various resolutions, I would recommend this:

1. Use https://designmodo.com/responsive-test/ or http://responsivepx.com/ for simulating the viewport.

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

3. Use the proper CSS media queries to set the CSS for specific resolutions. Note that you can google for more info about CSS media queries.

Note: You can put your custom CSS into the "Style Customizer > Others > Custom CSS" box. For Schon theme and latters, you can find it here: 

31. How to enable Visual Composer mode for portfolio item?

Please go to "Settings > Visual Composer" and tick the "uxbarn_portfolio" item in the Content Types list. Then the Visual Composer button will show up in the portfolio edit screen.

32. How to reduce the top and bottom margins of the side panel?

Please go to "Style Customizer > Others > Custom CSS" and use this custom CSS:

#side-container {
    padding-top: 20px;
}

#side-footer-wrapper {
    bottom: 20px;
}

You can adjust the px value here.

P.S. In case you would like to use custom CSS for other elements, I would recommend "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.

33. Is it possible to remove left and right white space around the top page/post image?

The white space is part of the design, but if you want to remove that, you can use this custom CSS as a workaround.

.post-image {
    margin-left: 0;
}
.blog-list .post-content-container {
    width: 32.5%;
}
.single-post .post-image,
.page .post-image {
    margin: auto;
    width: 100%;
}
.single-post .post-image img,
.page .post-image img {
    display: block;
    margin: auto;
}
.content-width,
.page-template-template-featured-works .theme-widget-area.content-width {
    width: 1105px;
}
.page-template-template-featured-works .content-width {
    width: 77.66%;
}
@media only screen and (max-width: 1600px) {
    
    .page-template-template-featured-works .content-width,
    .theme-widget-area.content-width,
    #content-container {
        width: 1105px;
    }
}
@media only screen and (max-width: 1165px) {
    
    .page-template-template-featured-works .content-width,
    #content-container,
    .content-width {
        width: 100%;
    }
    .theme-widget-area.content-width {
        width: 90%;
    }
}
@media only screen and (max-width: 950px) {
    .blog-list .post-image {
        width: 100%;
    }
    .blog-list .post-content-container {
        width: 58%;
    }
}
@media only screen and (max-width: 768px) {
    .blog-list .post-content-container {
        width: 70%;
    }
}
@media only screen and (max-width: 600px) {
    .blog-list .post-content-container {
        width: 90%;
    }
}

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

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.

35. How can I get the tagline under the logo instead?

Please try applying this custom CSS code by going to "Appearance > Customize > Additional CSS":

.tagline {
    position: absolute;
    bottom: -1.6em;
    text-align: center;
}
@media only screen and (max-width: 1165px) {
    .tagline {
        bottom: -1.6em;
        display: block;
    }
    .site-logo {
        position: relative;
    }
}
@media only screen and (max-width: 480px) {
    .tagline {
        width: 100%;
    }
    .site-logo {
        margin-bottom: 1.6em;
    }
}

36. How to reorder portfolio categories on the listing template?

You can use this plugin for that: https://wordpress.org/plugins/taxonomy-terms-order/

37. How do I remove the category links on portfolio single pages?

Please try applying this custom CSS to remove that:

.portfolio-content-wrapper .post-categories-tags-wrapper {
    display: none;
}

38. How to configure blog's meta info display (date, author, comments count) ?

You can choose either to display the meta info individually for each post or set it globally for every post in Theme Options.

To set it individually, please go to Posts > All Posts and open the edit screen for the post you want. Then scroll down to the meta box section and you will find Meta Info Display options there.

To set it globally, please go to Theme Options > Blog and under the option of Post Meta Info, select it as Yes to override the setting from individual posts. Then you can select which meta info to be displayed here.

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

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

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

40. Can I increase the logo size?

You can use custom CSS to adjust that. Please try the following:

#logo {
    margin-right: 30px;
    width: 30%;
}
#tagline-search-group {
    text-align: left;
    width: 65%;
}
@media only screen and (max-width: 1024px) {
    #logo {
        width: 350px;
        margin: auto;
    }
}
@media only screen and (max-width: 480px) {
    #logo {
        width: 100%;
    }
}

You can go to "Appearance > Customizer > Others" to put the code there.

In case you would like to use custom CSS for other elements, I would recommend Developer Tools on Chrome or Firebug on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.

41. How to manage and use custom meta info for portfolio?

To manage the custom meta info list, please go to "Settings > UXbarn Portfolio Options" then select "Custom Meta Info" tab. After saving, they will appear on the portfolio's edit screen then you can enter the data.

42. How to adjust the height of the home slider from "624" to something else?

Please do the followings:

1. Open "functions.php" and find this:

add_image_size('home-slider-image', 2000, 624, true);

Then change "624" here into your custom height.

2. Open "style.css" and edit the CSS "height" of these selectors: "#home-slider-container", "#home-slider .home-slider-item", "#uxb-layerslider.no-slider", and "#uxb-layerslider-container".

3. Re-upload all the slider images to make WordPress generate the images with the new defined height.

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

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

44. How to translate the copyright text using WPML?

To translate the copyright text, please follow these steps:

  1. Go to "WPML > String Translation" on your admin panel.
  2. Scroll down to the bottom of the page and you will see a link "Translate texts in admin screens". Click it.
  3. Find the "copyright" text in the page using your browser. You will find its entry with the actual copyright text. Tick the item and scroll down to the bottom and click "Apply".
  4. Now back to "WPML > String Translation" and you can see the copyright text ready for translation.

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

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

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

46. How to hide the full screen slider and make the content area displayed right under the menu on mobile views?

You can use this custom CSS to adjust it:

@media only screen and (max-width: 1160px) {
    #full-scrn-slider-container {
        display: none;
    }
    #content-container {
        top: 0;
        position: relative;
    }
}

You can find where to place the code by going to "Style Customizer > Others > Custom CSS".


47. How do I expand the width of the content area?

Please go to "Appearance > Customize > Additional CSS" and apply all the custom CSS below:

.post-title, .section-title {
    float: none;
    width: 100%;
}
.post-excerpt, .post-content, .section-content {
    float: none;
    width: 100%;
}
.fl-row-content-wrap {
    padding-left: 0;
    padding-right: 0;
}
.post-content-container.no-image {
    margin-top: 0;
}
.side-fixed #side-container {
    margin-top: 0;
}
.post-content a {
    
}
.post-content a > img {
    float: left;
    margin-bottom: 25px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    border: 0;
}
.post-excerpt, 
.post-content, 
.section-content,
.post-meta-wrapper, 
.author-social {
    float: none;
    margin: 0;
    width: 100%;
}
.post-excerpt, 
.post-content {
    margin-bottom: 25px;
}
.single-post  .post-content {
    margin-bottom: 50px;
}
.post-meta-wrapper {
    overflow: hidden;
}
.single-post .post-meta {
    margin-bottom: 5%;
    overflow: hidden;
}
.single-post .post-meta:last-child {
    margin-bottom: 0;
}
.post-meta li {
    float: left;
}
.post-meta li::after {
    content: '//';
    padding: 0 8px 0;
}
.post-meta li:last-child::after {
    content: '';
    padding-right: 0;
}
.meta-categories li::after,
.meta-tags li::after {
    content: ',';
    padding: 0;
    margin-right: 6px;
}
.meta-categories .meta-categories-title::after,
.meta-tags .meta-tags-title::after {
    content: '';
    margin-right: 0;
}
.meta-categories .meta-categories-title,
.meta-tags .meta-tags-title {
    float: none;
}
.post-content-container, 
.content-section-wrapper {
    
}
.top-section {
    margin-bottom: 6.5%;
}
.section-content {
    margin-bottom: 3%;
}
.comment-author-avatar {
    margin-right: 25px;
    width: 100px;
}
.blog-list .post-image {
    margin-bottom: 25px;
}
@media only screen and (max-width: 1350px) {
    #content-container {
        width: 70%;
    }
    
}

The code will set the content area to 100%, reduce the spacing at the top, and adjust some other elements to best work with this custom width.

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

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.

49. The Google Maps element do not load and show up. What do I 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.

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

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.

51. How do I make the page content visible on portfolio templates?

The option for this was introduced in v1.0.2. If you are already using this version or above, please go to "Appearance > Customize > Portfolio Styles" and you will find the option named "Show Page Content?" in each template section.

52. Some Visual Composer's elements/functionalities are missing. How can I enable them?


***Note: Since the theme v1.2.0, the custom code for overriding Visual Composer are deprecated. You should now use most elements of Visual Composer in this version and later. There is no need to use the below instruction.


Some functionalities of VC have been intentionally limited/overridden to make the theme fit with the design. In case you would like to change that, you can find the related custom code in these files:

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

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

54. How can I rename the "portfolio" slug and its texts to something else?

To rename that, please open "/includes/plugin-codes/custom-uxbarn-portfolio.php" file. You can then find the portfolio texts in the function of "uxbarn_custom_port_cpt_args()".

For the portfolio taxonomy, just see in the function of "uxbarn_custom_port_tax_args()".

If you get 404 page after making changes, please go to "Settings > Permalink" and click to save once. This should solve the 404 issue

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

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:

56. Portfolio category images don't show up if Jetpack plugin is active. How to fix that?

Please go to "Jetpack > Settings > Appearance" and disable its Photon feature (screenshot: https://cl.ly/iljb ).

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


***Note: Since the theme v1.2.0, a new feature for creating your own meta info for portfolio has been introduced. You can manage the custom meta info by going to "Settings > UXbarn Portfolio Options" and they will appear on the portfolio's edit screen. There is no need to use the below instruction.


There are two major sections involved which are:

1. For the front end, open "/uxb_templates/single-portfolio.php" file and there you will see the code for the meta info to display on your website.

2. For the back end, open "/includes/plugin-codes/custom-uxbarn-portfolio.php" file and search for the function of "uxbarn_custom_port_create_meta_info()".

58. How to hide portfolio categories when hovering on the portfolio items?

You can use custom CSS to hide that. Please go to "Style Customizer > Others" and enter this code into the custom CSS box:

.portfolio-item-hover h3 {
    border: 0;
}

.portfolio-item-hover ul {
    display: none;
}

In order to find the CSS for other elements, I would recommend to use "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements and their CSS then you can customize using the CSS box like above example.

59. [v1.2.0 Note] Changes in theme's custom code for Visual Composer

Since the theme v1.2.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:

60. How do I make the portfolio titles visible on the portfolio listing templates?

You can use custom CSS to adjust that. Please first make sure you are using the latest version of the theme, then go to "Appearance > Customize > Additional CSS" and you can apply this code to make the titles visible:

.portfolio-title {
    display: block;
    font-size: 10px;
    text-align: center;
    width:  100%;
}


61. I've tried installing in WordPress but it says the theme is missing the style.css stylesheet. Am I doing something wrong?

The item is an HTML site template. It can't be used as a WordPress theme.

62. I was unable to install the theme. I got the message "Are you sure you want to do this?". What should I do?

There might be some restricted PHP configuration on your server. Please try configuring the php.ini to increase the values of these:

If you are not sure how to do that in this technical case, please contact your web hosting and ask them to help configure the file. After that, try restarting the server and test it again.

Or, alternatively, you can install the theme via FTP (please see the theme documentation for more info.)

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

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

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

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

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

65. Setting up automatic update in UXBARN themes

All of our themes have the automatic update functionality via 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.

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.

Please follow the steps to setting up the plugin:

1. After activating the plugin, you would have to configure it by going to the "Envato Plugin" menu in your WP admin panel. You will see the screen as the below image: 


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 on the "generate a personal token" link on the page.

You may then see the login page, just login with your account that is used to purchase the theme. Now you will see the screen like this for creating a new token: 


Select the permissions as showing in the above image and click "Create Token". You will finally see a screen showing 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 under 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 to display. The plugin will list only the added items. The overall concept is similar to the global one. Once you click the "Add Item" button, you will see this popup window:


Use the same steps as the above global token's to create a new token. Or if you already have one, put it into the "Token" field here. For the item ID, just go to the item page on ThemeForest website then look at the browser's URL field. You will see a number like this "11354296" right after the item name. Copy and put it into the "Item ID" field then click "Save".

That's it! Once the plugin is properly configured, next time when there is a newer version of the theme available, the users will see an update notification on their WP admin so they can right away update the theme in WP. No more manual FTP update.

66. How to hide search button in the header?

You can use custom CSS to hide that. Please go to "Style Customizer > Others" and enter this code into the custom CSS box:

#header-search {
    display: none !important;
}

In order to find the CSS for other elements, I would recommend to use "Developer Tools" on Chrome or "Firebug" on Firefox to inspect the elements and their CSS then you can customize using the CSS box like above example.
 

67. How to add a blank menu?

Go to Appearance > Menus and click the Custom Links section. Enter "#" in the URL field and any character in the Link Text field.

Once it is added in the menus, add the "blank-menu" text in the CSS Classes field. If you do not see the field, click Screen Options at the top right of the screen and tick the checkbox to make it visible.


68. How do I change the page layout to make all text span across the container?

You would have to use custom CSS to adjust that. Please try applying this code:

.page .post-title-wrapper {
    float: none;
    margin-bottom: 5%;
    width: 100%;
}
.page .post-content-wrapper {
    float: none;
    width: 100%;
}

You can enter the code by going to “Apperance > Customize > Additional CSS”.

If you would also like to use custom CSS for other elements, we would recommend Developer Tools on Chrome or Firebug on Firefox to inspect the elements on the page. Then you will know which CSS selector to adjust.

More info: https://uxbarn.com/inspecting-elements-developer-tools/